Most basic histogram 2d
Most basic histogram 2d using the geom_bin2d() function of ggplot2
Color and bin size
Learn how to customize the color and the bin size of your 2d histogram
Most basic
Most basic, default parameters
change theme
Use the theme_bw() for better appearance
Learn how to customize the color and the bin size of your hexbin chart
Hexbin package
Build a hexbin chart with the hexbin package and color it with RColorBrewer
Scatter on top of 2d distribution
Add a scatterplot on top of the ggplot2 2d density chart
The most basic arc diagram you can do in d3.js. Keeping only the core code.
Vertical version
Just a variation putting the nodes along a vertical line
Highlights a node
Hover a node to highlight all its related links.
Highlight links
This block shows how to highlight all links of a node on hover.
Button for order
Add a button that controls node order along the axis.
The most basic area chart you can do in d3.js. Keeping only the core code.
Add line and dot
Highlight the main trend with a line on top of the area. And display individual information with dots.
Small multiple
Applying the small multiple technique to area chart. A good workaround to stacked area chart when you have several group to display.
The most basic background map you can do in d3.js. Keeping only the core code.Input data format: geoJson
Change projection
Shows how to switch from one projection to another thanks to the geo-projection plugin.
Single country
How to plot the boundaries of any country in d3.js.Actually explains how to filter a geoJson file.
Most basic leaflet
A very basic example showing how to build a leaflet map.
Button to control tile
Add a button that allows to select different background tiles.
Mike's tutorial
A tutorial built by Mike Bostock: a very good starting point to maps in d3.js.
Demo of all projections
A block showcasing all the different available projection, with smooth transitions.
Leaflet documentation
Link to the leaflet website: awesome doc for awesome maps.
Most basic barplot
The most basic barplot you can do with geom_bar(), using default settings.
Custom color
A few examples showing how to custom barplot color.
Horizontal barchart
It makes sense to make your barchart horizontal: group labels are now much easier to read
Bar width
You can control bar width using the width argument of geom_bar()
Control group order
Reordering categories in the barchart is a crucial step for an insightful figure: learn how to do it.
Variable width
A barplot with variable width to represent categories sample size.
Error bars
How to add error bars on a barplot, and why should be careful about it.
Most basic usage of the barplot() function.
Control color
How to control barplot color, how to pick a nice color palette.
General customization
Title, axis labels, axis limits, and more.
Horizontal barplot
A horizontal version of the barplot, thanks to the horiz argument.
Play with bar width and space between bars.
Bar texture
Change bar texture with the density and angle parameters of the barplot function.
Axis features
Change font, color and size of axis labels and titles
Increase margin
Increase margin size with the mar argument of the par function
Add error bars
Add error bars on barplot to show confidence interval or standard deviation
Number of obs
Add number of observation on top of barplot, and other customization
Basic barplot
The basic barplot hides information: how does the underlying distribution look like? What are the category sample sizes?
Add individual observation
See how low group C sample size actually is?
Violin plot
See group B? It would be a shame to miss out this bimodal distribution.
Most basic boxplot
The most basic boxplot you do using ggplot2.
geom_boxplot() options
An overview of the boxplot options offered by ggplot2 to custom chart appearance.
Changing group order in a boxplot is a crucial step. Learn why and discover 3 methods to do so.
Several examples showing most usual color customization: uniform, discrete, using colorBrewer, Viridis and more.
Highlight a group
Learn how to highlight a group on your chart to convey your message more efficiently.
Grouped boxplot
A grouped boxplot displays the distribution of several categories organized in groups and subgroups
Faceting in boxplot
An alternative to grouped boxplot where each group or each subgroup is displayed in a distinct panel.
It is possible to make the box widths proportionnal to category sample size.
Boxplot from continuous variable.
how to build a boxplot with ggplot2 where categories are actually bins of a numeric variable.
Add mean value.
Explaines how to add mean value on top of boxplot. (remember boxplot displays the median, not the mean).
Boxplot downside is to hide information. You can reveal box underlying distribution showing individual observations with jitter.
Marginal distribution
Add marginal distribution around your scatterplot with ggExtra and the ggMarginal function.
Boxplot on top of histogram
How to add a boxplot on top of a histogram.
Boxplot with custom colors
Color specific groups in this base R boxplot using ifelse statement.
X axis labels on several lines
How to display the X axis labels on several lines: an application to boxplot to show sample size of each group.
Boxplot with jitter
Show individual observations on top of boxes, with jittering to avoid dot overlap.
Order categories by median
Learn how to reorder categories using increasing median.
Boxplot with specific order
Learn how to reorder categories with a specific order.
Grouped and ordered boxplot
How to build a grouped boxplot (groups & subgroups) and order it by increasing median.
Boxplot with variable width
Make box size proportional to category sample size.
Boxplot with labels on top
Add labels on top of each category to display custom information like category sample size.
Tukey test
Tukey test compares the mean of all pairs of category. Here is how to perform it and represent its result on a boxplot.
Box type around plot
Learn how the bty argument of the par() function allows to custom the box around base R plot.
Split plot window with layout()
Layout() divides the device up into as many rows and columns as need, with custom proportions.
Basic bubble chart
The most basic bubble chart you can build with R and gglot2 with geom_point()
Control bubble size
Control bubble size with scale_size(): allows to set minimum and maximum size.
Improve appearance
Make your chart pretty with nice color scale, general theme, stroke around cirle and more..
The most basic bubble map you can do in d3.js. Keeping only the core code.Input data format: geoJson + javascript object
Add tooltip
Pretty useful to add a tooltip to add more information conerning the marker.
Circle features
How to map circle size and color to data?
Legend
How to build a nice legend to illustrate bubble size.
Group selection
Add a button to select displayed group, with smooth transition.
Basic bubblemap with leaflet
A very basic example showing how to add circles with d3 on top of the leaflet.js background.
Mike's tutorial on bubble map
A complete tutorial on bubble map by Mike Bostock, d3.js creator.
Application to the flare dataset
Probably the most famous example of hierarchical edge bundling.
Flight Paths Edge Bundling
Apply edge bundling technique on a connection map.
US cartogram
Cartograms of the US with button to control the input variable.
Cartogram with button
Cartogram of Switzerland with buttons to control several attributes
The most basic chord diagram you can do in d3.js. Keeping only the core code.
Add ticks and tick labels
Same graphic as before, just adding tick and ticks labels
Control colors
You probably want to set a color for each group, and colors links according to their source / target. Here is how.
Storytelling with Chord Diagram
Nadieh Bremer tells us about the switching behavior between phone brands through a chord diagram. A must see example of data story telling.
The most basic choropleth map you can do in d3.js. Keeping only the core code.Input data format: geoJson
Unemployment rate by county in the USA
A beautiful example by Mike Bostock: static choropleth map with legend, and nice color scale
The most basic circular packing you can build..
The most basic circular barchart you can build, to illustrate how coord_polar() works
Add labels
Add labels with geom_text(). Tricky, since you have to compute label angles first.
Add a gap
Lear how to add a gap in the circle. The same technique will then be used to add gaps between groups
Gap between groups
The space between groups allows to highlight them.
Order
As usual, it makes sense to order bars of each group to get the ranking more easily
Customization
Add scale, group names and more
Most basic scatterplot with R and ggplot2
Custom appearance
Classic appearance customization with theme_ipsum and more
Connected Scatter for evolution
Use connected scatterplot with 3 numeric variable to show an evolution.
How to add a legend to base R plot
The legend() function allows to add a legend. See how to use it with a list of available customization.
Image on the chart background
The rasterImage function allows to add an image on the background of the chart.
Manage date data
Learn why it is important that your date is recognized at the date format, and how to do so.
One unique connection
How to display one unique connection on the map. Just to illustrate how to use d3.geoPath()
Multi connections
Same idea but applied on several connection. Just shows how to enter in the data to add all connections.
Input = csv file
Plot a connection map from a list of connection stored in a .csv format. It requires a reformatting step.
Voronoi Arc Map
Highlight flight routes when an airport is hovered.
Scatterplot matrix
Basic scatteprlot matrix with the ggpairs() function.
Pearson correlation
Visualize correlation with ggcorr().
Show groups
You can use the ggplot2 syntax to add aesthetics and ths map color to categories.
Square and Pie
How to use the corrgram() function to represent correlation with square and pie charts.
Ellipse + Scatterplot
Visualize correlation with corrgram(). Use ellipses and scatterplots
Half matrix
You can display correlation in half the matrix only.
Ellipse package
The ellipse package allows to visualize a correlation matrix with ellipses.
plot() function
The plot function is straightforward way to build a basic scatterplot matrix.
car package
The car package probides a scatterplotMatrix function to build correlogram.
Basic linear axis
The most basic linear axis you can do in d3.js. Keeping only the core code.
Categorical axis with scalePoint()
scalePoint()
The scalePoint() allows to build a categoric axis. Simple example keeping only the core code.
Categorical axis with scaleBand()
scaleBand()
Slightly different from the previous example: this method is adapted for barplot or boxplot where each category uses a range of the axis.
Vertical axis
Learn how to make a vertical axis in d3.js
Custom axis labels
How to change font, size, color, orientation of axis labels
Add titles
How to add titles at the right position to your axis
Just calling a color
Several ways exist to call a single color in d3.js. Learn what are the possibilities.
Sequential color scale
What are the different option to build a sequential colorscale? How to build a palette?
Categorical color scale
Give a specific color to each entity of your dataset. How to build the palette with d3.js
theme: ggplot2
Inspired from the famous R ggplot2 library.
theme: ipsum
Inspired from the ipsum theme of the hrbrmstr R library
theme: publication
An old school theme in black and white. Publication ready, or for nostalgic of the good old R.
theme: dark mode
In case your application is in night mode, use a dark background.
Categorical | circle
Use the enter() function to add one circle and one label per group.
Categorical | Square
Same thing with squares instead of circles
Most basic dendrogram
Most basic dendrogram. Built from a Json file.
Basic radial dendrogram
Very basic as well, but uses a radial layout instead of the linear
Transition tree / dendrogram
A block illustrating the difference between tree and dendrogram, with smooth transition between both.
Dendrogram and barplot
A block showing how to add a barplot next to dendrogram leaves.
The most basic density plot you can do with ggplot2.
Use the theme_ipsum to improve the general appearance of the previous basic density chart.
Mirror density chart
Put 2 density charts face to face to compare the distribution of 2 numeric variables.
Multi density chart
Explains how to display several density charts on the same axis, and the potential associated caveats.
Multi density with annotation
It is a good practice to write group names next to shapes instead of adding a legend beside the chart.
If you have several groups, plotting them on the same axis often results in a cluttered and unreadable figure. Use small multiple to avoid that.
Stacked density chart
Stack groups on of top of each other. Allows to study the whole, but makes it hard to study each group.
The most basic donut chart you can do in d3.js. Keeping only the core code.
Add annotation
Add annotation outside the chart using polylines
Pie chart with annotation
A pie chart by Mike Bostock with fancy annotation for each group.
Clean layout
Clean labeling of groups. Use d3 v3 though.
Pie chart with animation
Good illustration on how to animate transition between 2 input data.
Most basic heatmap
The most basic heatmap you can build with R, using the heatmap() function.
Control the color palette used in the heatmap. Several methods shown.
Color scheme on the side
Add color beside the heatmap to compare actual structure with the expected one.
Most basic usage of geom_tile to build heatmap
Interactive version
It's very easy to turn your heatmap interactive with ggplotly, check it out!
Most basic use of the levelplot() function of the lattice package.
Reorder and swap X and Y axis
How to control row and column order on your heatmap.
Color palettes
How to use common color palette: R natives, R Color Brewer and Viridis.
Heatmap with smoothing
The latticeExtra allows to add a layer of heatmap with smoothing.
Just a basic background map based on a geoJson input that gives the hexagon boundary.
Add label in centroids
Use the centroid() function to add hexagon labels.
centroid()
Bivariate Hexbin map
Density 2d technique. Quantity of data per hexagon is represented through hexagon color and size.
D3-hexbin documentation
The complete documentation of d3-hexbin: the plugin that groups two-dimensional points into hexagonal bins.
The most basic histogram you can do with R and ggplot2.
Control bin size
Playing with histogram bin size is an important step. Histogram appearance can greatly change, and so does the message you're trying to convey.
Mirror histogram
The mirror histogram allows to compare the distribution of 2 numeric variables.
Multi histogram
How to display several histograms on the same X axis
Using small multiple and histogram allows to compare the distribution of many groups with cluttering the figure.
Two histograms on same Axis
Compare the distribution of 2 variables with this double histogram built with basic R function.
Two histograms on split windows
Compare the distribution of 2 variables plotting 2 histograms one beside the other.
Histogram with colored tails
Coloring tails sometimes allow to highlight specific areas of the distribution.
Mirrored histogram in basic R
A mirrored histogram allows to compare the distribution of 2 variables. Here is how to build one in basic R.
Get rid of borders
Just a small tip to get rid of histogram borders and improve the general appearance.
The most basic tooltip you can do in d3.js.It just create one tooltip for one circle
HTML in tooltip
Learn how to customize your tooltip: you can apply any html code to it!
Tooltip linked with data
Tooltip is different for each datapoint, customized, and element style are modified when hovered.
Create your first brush
A very basic example showing how to initialize a brush area with d3.brush.
Trigger a function
How to get the brush coordinates and apply a function to the points in the area.
Brushing for zooming
How to zoom on the brushed area with a smooth transition.
HTML button types
HTML natively offers different types of button: here is a description of them with the associated code.
Most basic zoom
A very basic example showing how to initialize a zoom area with d3.zoom.
Update axis and element position
An example on a real scatterplot to show how to update axis and elements.
The most basic transition you can do in d3.js.It just modify the width attribute of a div using d3.js, keeping only the core code.
Pipe several transition
Run several transitions one after another. Involves different attributes like color and width.
Progressive transition
This example applies a different delay to each element. It gives a progressive transition where elements start moving one by one.
delay
Understand the basics of lollipop chart with this most simple version.
Log transform
How to use a log transformation for the Y axis with scale_x_log10().
Customize markers
See the different options allowing to customize the marker on top of the stem.
Customize stems
See the different options allowing to customize the stems.
General appearance
How to use the theme() function to improve your chart genereal appearance.
Horizontal version
Make your lollipop chart horizontal → your labels will be easier to read
Change baseline
Change the baseline to highlight an interesting threshold.
Changing group order in a lollipop chart is important to add insight to the chart. Learn why and discover 3 methods to do so.
Cleveland dot plot
A variation of the lollipop chart to study several categories on the same chart.
Annotation
Highlight one or several groups to convey your message more efficiently. Play with group appearance and add text annotation.
Conditional color
Change shape parameters depending on where the data points is located compared to a threshold.
The most basic network graph you can do in d3.js. Keeping only the core code.Input format: Json
Network of character co-occurence in Les Misérables
A famous network graph by Mike Bostock showing character co-occurence in a book.
D3-force documentation
The d3-force documentation on github is invaluable. A must read before diving into networks in d3.
D3-force testing ground
This example allows you to play with force parameters and see their effect in real time.
Most basic parallel chart
Most basic option using the ggparcoord() function of the ggally package
Improve general appearance
Add title, use a theme, change color palette, control variable orders and more
Highlight a group of interest to help people understand your story
Most basic option using the parcoord() function of the MASS package
Reorder variables
Reordering variables allows to avoid line crossings, and thus makes the chart more understandable
You are interested in a group compared to all the others? Highlight it.
Most basic piechart using the pie() function of base R.
Learn how to change pie shape, zoom in, add stripes, change labels and more.
Colors
How to pick a nice color palette and apply it to the piechart
Explains how to use coord_polar() on a barchart to get a pie chart
Make it clean
Clean the basic piechart: remove background, grid, axis labels
Add Labels
Compute and add labels on each slice, the trickiest part of the job.
Most basic ridgeline
The most basic ridgeline plot you can build with the ridgelines R package.
Distribution shape
Custom the distribution shape, here applying a histogram shape using binning.
Color gradient
Apply a color gradient to the chart. Makes the color scaled to the numeric variable.
This chart focuses on input format. It shows how to build very basic Sankey Diagrams from all kind of input datasets.
Customize colors
Learn how to customize node and connection colors.
Migration flow
A highly customized sankey diagram to explore migration flows between countries.
Sankey from .json file
The most basic sankey diagram you can do in d3.js. Keeping only the core code.Input data format: Json
Basic scatterplot
The most basic scatterplot you can build with R and ggplot2.Simply explains how to call the geom_point() function.
geom_point()
Custom marker features
The geom_point() function has option to custom color, stroke, shape, size and more. Learn how to call them.
Map marker feature to variable
Ggplot2 makes it a breeze to map a variable to a marker feature. Here is an example where marker color depends on its category.
Map to several features
Extension of the previous concept: several features can be mapped to variables in the same time
Annotate with geom_text
geom_text() allows to add annotation to one, several or all markers of your chart.
Annotate with geom_label
Very close to geom_text, geom_label produces a label wrapped in a rectangle. This example also explains how to apply labels to a selection of markers.
Scatterplot with rug
Add rug on X and Y axis to describe the numeric variable distribution. Show how geom_rug() works.
Linear trend
geom_smooth allows to add the result of a model to your scatterplot, with confidence interval as well.
Most basic scatterplot
The most basic scatterplot you can build with R, using the plot() function.
plot() parameters
Custom your scatterplot with the arguments of the plot() function.
Polynomial curve
Set a linear model with lm(), and plot it on top of your scatterplot with line().
Confidence interval
Add a confidence interval around the polynomial model with polygon().
Lattice XYplot()
The lattice XYplot() allows to build one scatterplot for each level of a factor automatically.
Correlation of discrete variables
Make the circle size proportional to number of data points when working with discrete variables.
the mtext() function
mtext() allows to add text in margin. Useful to add an unique title for several charts.
split_screen() function
Split screen allows to split the chart window in several sections.
Split screen with par(mfrow())
The easiest way to split the graphic window is to use par(mfrow()).
Most basic radar
Start with a basic version, learn how to format your input dataset
Radar chart customizations
How to customize the chart appearance, polygon, net, labels and more.
Basic multi-group radar chart
Customization option offered by the fmsb package
About axis limits
Learn how to control chart axis limits
Area chart
You probably want to understand how to build a basic area chart before trying the stacked version.
Likert package
The Likert package allows to build visualization for questionnaire answers
Stacked area from long input
The most basic stacked area chart you can do in d3.js. Keeping only the core code.Input format:long (tidy)
Stacked area from wide input
Another basic stacked area chart made in d3.js.Note that here the input format is wide (untidy): each group is provided in a specific column.
Learn how to apply the small multiple technique on line plot. It allows to avoid the spaghetti plot where lines become unreadable.
Most basic streamchart
The most basic streamchart you can build with R and the streamgraph package.
Change offset
By default a streamchart is displayed all around a horizontal line. You can change that thanks to the offset option
Change shape
Leave the smooth and rounded option to get something similar to a stacked area chart or to a stacked barplot.
Change color
Several ways to change the color palette used on the chart.
Most basic treemap
Start with the most basic treemap you can build. No customization, no subgroups, easy code.
Multi-level treemap
How to build a treemap with group and subgroups.
Customize treemap labels, borders, color palette and more
Most basic Venn diagram
This is the most basic venn diagram you can build with R and the VennDiagram package.
Description of the long list of options available to customize the venn diagram.
Application to a real dataset: the lyrics of 3 famous French singers.
Most basic violin chart
Most basic violin using default parameters.Focus on the 2 input formats you can have: long and wide
Changing group order in your violin chart is important. It adds insight to the chart. Learn why and discover 3 methods to do so.
Flipping X and Y axis allows to get a horizontal version. Group labels become much more readable
Violin + boxplot + sample size
This examples provides 2 tricks: one to add a boxplot into the violin, the other to add sample size of each group on the X axis
Grouped violin chart
A grouped violin displays the distribution of a variable for groups and subgroups. Here is an implementation with R and ggplot2
Vioplot package
Vioplot
The vioplot package allows to build violin charts. Learn how it works.
vioplot
Most basic wordcloud
See what input file is needed to run the basic wordcloud2 function with default parameters.
Text color: random
Change word color to random dark
Text color: 2 colors
Provide a vector of color.
Background color
How to change the background color with the backgroundColor argument
Available shapes
A few shapes are available to be used as Masks.
Your image as a mask
You can use any image as a mask.
Text rotation
Chinese version
Use a letter as a Mask
Use a word as a Mask
See what input file is needed to build this basic wordcloud.
Text analysis
A text analysis by Benjamin Tovarcis for document classification.
