What kind of data do you have? Pick the main type using the buttons below. Then let the decision tree guide you toward your graphic possibilities.
From Data to Viz provides a decision tree based on input data format. This tree leads to twenty formats representing the most common dataset types. For each, an example of analysis based on real-life data is provided using the R programming language.
‘From Data to Viz’ is a classification of chart types based on input data format. It comes in the form of a decision tree leading to a set of potentially appropriate visualizations to represent your dataset. Read more.
This website has been developed by two friends from the south of France in their spare time. Feel free to drop us a word if the project helped you or for any feedback. Or even better, hire us!
From Data to Viz is currently in beta version and any feedback is highly encouraged. You can open an issue on Github, drop us a message on Twitter, or send us an email at yan.holtz.data@gmail.com.
An alternative to boxplot to compare the distribution of several groups.
Violinplots allow to visualize the distribution of a numeric variable for one or several groups. It is really close from a boxplot, but allows a deeper understanding of the distribution.
Violins are particularly adapted when the amount of data is huge and showing individual observations gets impossible.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Show the density of a numeric variable
A density plot shows the distribution of a numeric variable. It takes only numeric variables as input and is very close from an histogram. It can be use in the same exact condition.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
An accurate graphical representation of the distribution of numeric data.
A histogram takes as input a numeric variable only. The variable is cut into several bins, and the number of observation per bin is represented by the height of the bar. It is possible to represent the distribution of several variable on the same axis using this technique.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Summarize the distribution of numeric variables
A boxplot gives a nice summary of one or several numeric variables. The line that divides the box into 2 parts represents the median of the data. The end of the box shows the upper and lower quartiles. The extreme lines show the highest and lowest value excluding outliers.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Several distributions aligned to the same horizontal scale and presented with a slight overlap
A Ridgeline plot (sometimes called Joyplot) shows the distribution of a numerical value for several groups. Distribution can be represented using histograms or density plots, all aligned to the same horizontal scale and presented with a slight overlap.
It is especially useful when the number of group to represent is high, and thus a classic window separation would take to much space.
R graph gallery D3.js gallery Flourish
See the dedicated page.
Show the relationship between 2 numeric variables.
A scatterplot displays the relationship between 2 numeric variables. For each data point, the value of its first variable is represented on the X axis, the second on the Y axis
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Like watching a table from above
A heatmap is a graphical representation of data where the individual values contained in a matrix are represented as colors. It is a bit like looking a data table from above.
It is really useful to display a general view of numerical data, not to extract specific data point.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Relationship between each pair of numeric variables
A correlogram or correlation matrix allows to analyse the relationship between each pair of numeric variables of a matrix.
The correlation between each pair of variable is visualised through a scatterplot, or a symbol that represents the correlation (bubble, line, number..).
The diagonal often represents the distribution of each variable, using an histogram or a density plot.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated section.
A scatterplot with variable dot size.
A bubble plot is a scatterplot where a third dimension is added: the value of an additional numeric variable is represented through the size of the dots.
You need 3 numerical variables as input: one is represented by the X axis, one by the Y axis, and one by the dot size.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Between the scatter and the line charts.
A connected scatter plot shows the relationship between two variables represented by the X and the Y axis, like a scatter plot does. Moreover, dots are connected by segments, as for a line plot.
Most of the time, they are exactly the same as a line plot and just allow to understand where each measure has been done. Sometimes, points are connected in an order different from the X axis, giving a supplementary information to the graphic.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
2d representation of a joint distribution.
A 2d density plot shows the distribution of values in a dataset across the range of two quantitative variables.
It counts the number of observations within a particular area of the 2D space and represent it using square, hexagon, or kernel density estimation.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Represents the value of entities using bar of various length.
A barplot shows the relationship between a numeric and a categoric variable. Each entity of the categoric variable is represented as a bar. The size of the bar represents its numeric value.
Barplot is sometimes described as a boring way to visualize information. However it is probably the most efficient way to show this kind of data. Ordering bars and providing good annotation are often necessary.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Also called Web chart or Radar chart.
Radar chart is a two-dimensional chart type designed to plot one or more series of values over multiple common quantitative variables. Each variable has its own axis, all axis are joint in the center of the figure.
Radar chart is often criticized in dataviz, and it is probably not the best way to convey information.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A visual representation of text data.
A Wordcloud (or Tag cloud) displays a list of words, the importance of each beeing shown with font size or color. This format is useful for quickly perceiving the most prominent terms.
This type of visualization is well known by the public and eye-catching. It works well to reveal the essential. However, wordcloud is often criticized for not being insightful and to distort reality. For example, long words will be more prominent on the picture independently of their occurence.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Compare samples for several numeric values.
Parallel plot or Parallel Coordinates plot allows to compare the feature of several individual observations on a set of numeric variables. Each vertical bar represents a variable and usually has its own scale. (The units can even be different). Values are then plotted as series of lines connected across each axis.
Parallel plot is the equivalent of a spider chart, but with cartesian coordinates. Thus, it is often prefered.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A fancy barplot, with even more options.
A lollipop plot is basically a barplot, where the bar is transformed in a line and a dot. It shows the relationship between a numeric and a categoric variable.
However it is more appealing and convey as well the information. It is especially useful when you have several bars of the same height: it avoids to have a cluttered figure and a Moiré effect.
The Cleveland dot plot is a handy variation, allowing to compare the value of 2 numeric values for each group.
R graph gallery Python gallery D3.js gallery Flourish
A barplot with a circularized X axis.
A circular barplot is a barplot, with each bar displayed along a circle instead of a line. Thus, it is advised to have a good understanding of how barplot work before making it circular.
Circular bar chart is very ‘eye catching’ and allows a better use of the space than a long usual barplot.
However it is more difficult to read the differences between each bar size. Thus, circular barcharts make sense only if you have an huge number of bar to display, and if an obvious pattern pops out.
R graph gallery D3.js gallery Flourish
See the dedicated page.
Divide your whole in rectangles
A Treemap displays hierarchical data as a set of nested rectangles. Each group is represented by a rectangle, which area is proportional to its value. Using color schemes, it is possible to represent several dimensions: groups, subgroups etc.
Treemaps have the advantage to make efficient use of space, what makes them useful to represent a big amount of data.
If you have many levels of hierarchy (>2), it is advised to build an interactive figure: clicking on a upper level of organization will reveal the next level and so on.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Show list sizes and their intersection.
A Venn diagram (also called primary diagram, set diagram or logic diagram) is a diagram that shows all possible logical relationships between a finite collection of different sets.
Each set is represented by a circle. The circle size represents the importance of the group. The groups are usually overlapping: the size of the overlap represents the intersection between both groups.
R graph gallery Python gallery
See the dedicated page.
A pieplot with an area of the center cut out.
A doughnut plot displays the value of several entities, really often to show proportions that must add up to 100%.
It is very close from a pie plot and thus suffers the same drawbacks. It is thus better to avoid using it, why not replacing it with a barplot or lollipop plot?
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A circular graphic divided into slices to illustrate numerical proportion.
A pie chart is a circle divided into sectors that each represent a proportion of the whole. It is often used to show proportion, where the sum of the sectors equal 100%.
Pie charts are highly critized and must be avoided as much as possible. Human is very bad at translating angles towards values.
Instead, why not considering a bar chart or a lollipop plot?
R graph gallery Python gallery D3.js gallery Flourish
Dedicated page | What to consider when creating pie charts by Uncharted.
A tree showing a hierarchical organization.
A dendrogram is a network structure. It is constituted of a root node that gives birth to several nodes connected by edges or branches.
Dendrogram can be made with 2 types of dataset. i/ A numeric matrix allowing to compute distance between individuals ii/ A hierarchical dataset where the relationship between entities is provided directly.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A circular version of a Treemap.
Circular packing or circular treemap allows to visualise a hierarchic architecture. It is an equivalent of a treemap or a dendrogram, where each node of the tree is represented as a circle and its sub-nodes are represented as circles inside of it. The size of each circle can be proportional to a specific value, what gives more insight to the plot.
If only one level of hierarchy is displayed (no encapsulation), it becomes equivalent to a barplot. Instead of showing the value of each individual as a bar, it uses a circle.
Circle packing is not recommended if you need to precisely compare values of group. However, it shows very well how groups are organised in subgroups. It uses the space less efficiently than a treemap, but the hierarchy gets more obvious.
R graph gallery D3.js gallery Flourish
See the dedicated page.
Also called multi-level pie chart or Radial Treemap.
A sunburst diagram displays a hierarchical structure. The origin of the organization is represented by the center of the circle, and each level of the organization by an aditional ring. The last level (leaves) are located at the extreme outer part of the circle.
It is possible to map a numeric value to each leaf of the graphic, in this case their size will be proportional to this value.
Sunburst diagrams suffer the same issue than pie or doughnut plot: it is really hard to compare the size of different slices and thus conveys poorly the information. You should probably consider treemap, circular packing or dendrogram.
R graph gallery D3.js gallery Flourish
See the dedicated page.
Shows the evolution of numeric variables.
A line chart or line graph displays the evolution of one or several numeric variables. Data points are connected by straight line segments. It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments.
A line chart is often used to visualize a trend in data over intervals of time – a time series – thus the line is often drawn chronologically.
When several values are available for each time stamp, data can be aggregated and a confidence zone is generally added around the trend.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A line graph, filling the area under the curve.
An area chart is really similar to a line chart, except that the area between the x axis and the line is filled in with color or shading. It represents the evolution of a numeric variable.
I am a big fan of area charts and believe that it makes the trend more obvious than using a line graph.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A stacked version of the area chart to compare several groups.
A stacked area chart is the extension of a basic area chart which displays the evolution of the value of several groups on the same graphic. The values of each group are displayed on top of each other, what allows to check on the same figure the evolution of both the total of a numeric variable, and the importance of each group.
If only the relative importance of each group interests you, you should probably draw a percent stacked area chart. It is the same thing, but proportion of each group are represented instead of absolute value.
Stacked area chart are criticized. Indeed, it can be hard to read the evolution of a specific group, since the reader has to substract the other groups in his mind. It is often better to use small multiple or line plot instead.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A smooth version of the stacked area chart.
A Stream graph is a type of stacked area chart. It displays the evolution of a numeric value (Y axis) following another numeric value (X axis). This evolution is represented for several groups, all with a distinct color.
Contrary to a stacked area, there is no corner: edges are rounded what gives this nice impression of flow. Moreover, areas are usually displaced around a central axis, resulting in a flowing and organic shape.
Stream chart gets really useful when displayed in an interactive mode: highlighting a group gives you directly an insight of its evolution.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
The basis of all geospatial analysis.
Drawing a background map is the first step of any geospatial analysis.
Once this background is available, you can color each region to get a choropleth map, add points or bubble to get a bubble map, reshape the region to get a cartogram, or show connection with a connection map.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Split the geographic region in a multitude of hexagons
A hexbin map splits a geographic area in a multitude of hexagons. A numeric value is attributed to each hexagone, what controls its color.
Hexbin map is a kind of choropleth map. It removes the bias introduced by the different region size in choropleth, since each region is represented by the same hexagone.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Distorts regions to map a quantitative variable
A cartogram is a map in which the geometry of regions is distorted in order to convey the information of an alternate variable.
Cartogram aims to correct the bias that can be observed in a choropleth map: when a variable is aggregated per region, a region with very few data points will look as important as a region with many data points
R graph gallery D3.js gallery Flourish
See the dedicated page.
Display a aggregated value for each region of the map.
A choropleth map displays divided geographical areas or regions that are coloured in relation to a numeric variable. It allows to study how a variable evolutes along a territory.
It is a powerful and widely used data visualization technique. However, its downside is that regions with bigger sizes tend to have a bigger weight in the map interpretation, which includes a bias.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Shows multiple connection using lines or arcs.
A connection map allows to show the connection between several positions on a map.
The link between 2 places can be drawn with a straight line, or more commonly by representing the ‘great circle‘: the shortest route between them. Knowing that the earth is a sphere, this results in rounded lines that give a really pleasant look to the map.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Bubbles on a map to show quantitative variables.
A bubble map uses circles of different size to represent a numeric value on a territory.
It is possible to display a bubble per geographic coordinate, or a bubble per region (in this case the bubble is usually displayed in the baricentre of the region).
Bubble map allows to avoid the bias caused by regional area sizes in choropleth maps.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A circular plot showing connections.
Chord diagrams allow to visualize flows or connections between several entities (nodes). Each entity is represented by a fragment on the outer part of the circular layout. Then, arcs are drawn between each entities. The size of the arc is proportional to the importance of the flow
Chord diagrams are eye catching and quite popular in data visualization. Their main downside is that they becom quickly cluttered and unreadable. Hierarchical edge bundling is a really close type of graphic that allows to avoid this issue.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A set of nodes and links
Network diagrams (also called Graphs) show interconnections between a set of entities. Each entity is represented by a Node (or vertice). Connection between nodes are represented through links (or edges).
Networks is an entire field of research in itself. For example, you need to set up a layout algorythm that finds out an optimal position for each node.
Several type of networks exist. They can be directed (flow) or undirected (connection). Links can be wheigthed or not.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
Showing flows with smooth links
A Sankey Diagram is a visualisation technique that allows to display flows. Several entities (nodes) are represented by rectangles or text. Their links are represented with arrows or arcs that have a width proportional to the importance of the flow.
Note that an Alluvial diagram is a sub category of Sankey diagrams where nodes are grouped in vertical nodes (sometimes called steps).
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A network structure where nodes are aligned.
An arc diagram is a special kind of network graph. It is consituted by nodes that represent entities and by links that show relationships between entities.
In arc diagrams, nodes are displayed along a single axis and links are represented with arcs.
They do not convey the overall node structure than an 2d network, but can highlight clusters and briges if the node order is chosen correclty.
R graph gallery Python gallery D3.js gallery Flourish
See the dedicated page.
A network structure where nodes are aligned.
Hierarchical edge bundling is a data visualisation method allowing to check connections between leaves of a hierarchical network.
Instead of using straight line to do so, each connection is curved and follow the hierarchical path between the 2 nodes. This technique minimize the clutter and allows to detect trends more efficiently.
R graph gallery D3.js gallery Flourish
See the dedicated page.
