Introduction

DynamicD3 offers custom data visualizations using D3.js. We will work with you to help you select the most effective way to display your data: this might include Bar Charts, Line Charts, Pie Charts, Sankey Diagrams or more exotic data visualizations such as chloropleths, Bubble Charts or Sunburst Diagrams.

D3.js data visualizations can include a large number of Add Ons such as tool-tips, zooms, mouse-overs and animations. These help users understand the data more intuitively and provide an engaging experience which is not possible with static data visualizations. We can also create a custom UI – using radio buttons, check-boxes, sliders or toggle switches – which extend the range of interactive experiences still further.

We give you either plain JavaScript, which you can insert straight into your website, or a React component. We will set up a simple free webpage as a demo. As an option, we can create a data grid so you can update your data easily.

D3.js can use data from a static JSON or CSV file, or it can take data from an API. We can also create a data grid so that you can update data easily.

Bar Charts

Bar charts are typically used for categorical data, such as this example comparing the number of operations on three specific organs at a major hospital.

Note that a bar chart is not the same as a histogram, even though they look similar. A histogram doesn't have categorical data, such as countries (in which a data point is unambiguously in one category or another). Rather, it shows data which forms a continuum, but which is bucketed into different ranges, called bins. For example, a data set in which the x-axis showed the distance from a certain point could be bucketed into ranges. However, those ranges are arbitrary, and are typically chosen to display the data clearly.

D3.js can be used for either a bar chart or a histogram, and either of these can represent one or multiple sets of data. It can also be used to represent continous data. However, this is more appropriately displayed in a line chart or scatterchart.

Line Charts

Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).

Line charts are particularly useful for showing multiple data-sets which are related in some way. These data sets typically use the same x-axis but can have different scales and different y-axes. They are particularly useful for seeing trends in different data-sets (such as comparing when there is a peak in illness in dfferent countries). In this example a UI is used to switch between different combinations of data sets. Note that D3.js can automatically adjust the scale of the vertical axis as the data changes.

Another strength of line charts is the ability to analyze trends effectively. A curve can be drawn which passes through each point or which shows short or longer-term trends. In the example linked to above a UI has been added so that users can explore the data set in different ways using different curves.

A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page

Pie Charts

In a Pie Chart, the angle of each slice is proportional to the quantity it represents. Pie Charts and Donut Charts are the same, except that Donut Charts have a hole in the middle which can contain data. Donut charts can have multiple rings showing a hierarchy of data values; however, this type of chart is referred to as a Sunburst diagram.

Pie charts are commonly used in newspapers. However, while they are familiar and easy to understand, they aren't the best way of showing proportional or categorical data, because it's hard to compare different values (unlike in a bar chart, where the heights of the rectangles can be compared easily. However, they are useful when the data represents a proportion of a total value. Proportions can also be shown with bar charts, but this is less intuitively obvious.

The metaphor of a pie can be extended by drawing one piece of the pie out. This can be done statically or using a mouse-over effect, as shown on the Pie Chart page. This is known as an exploded pie chart. More detailed information can be given for the exploded section.

Sunburst Diagrams

Sunburst Charts are a form of multi-level Pie Chart. They are sometimes known as radial treemaps, because the data is in the same hierarchical structure as a conventional treemap.

This type of data visualisation shows hierarchy through a series of rings that are sliced for each category node. Each ring corresponds to a level in the hierarchy, with the central circle representing the root node and the hierarchy moving outwards from it. For example, in this example types of operation are divided up. The first ring divides the operations according to the organ which is affected. The next ring divides each of these sections up according to the type of treatment (conservative, operation, transplant or drugs) and the next ring shows whether or not the patients had insurance. Mouse-overs show the underlying values in a display at the bottom. This means that users can explore the data by moving around the display. For example, they might want to know how the proportion of patients who had kidney treatment differed, based on their insurance coverage.

Colour can be used to highlight hierarchal groupings or specific categories. In the example above the user can change the colour scheme to emphasize different aspects of the data set. In the first example, different ranges of colours are used for each ring. This makes it easy to understand the data shown in each ring, while, at the same time, making section boundaries clear. However, this doesn't work with large data-sets. In this case, it's clearer if all the sections in a particular ring have the same shade. Finally, in some cases, random colours can be used. These make it harder to understand the significance of each level in the hierarchery, but make it easier to see different sectors. The UI display in the Sunburst example switches between these alternatives.

Sankey Diagram

Sankey diagrams are used to represent flow processes, such as the flow of money within an organization (as shown in a financial statement), the flow of energy or raw materials through a series of industrial processes or the flow of a more abstract asset, such as information. The height or width of each node represents the total amount of flow through that node and the thickness of the lines between each pair of nodes represents the amount of flow passing between these nodes. Colour may be used, either to show the amount of flow (for example, using a colour gradient) or to show some other aspect of the process, as in this Sankey diagram, which uses colours to illustrate the flow of refugees.

One area where Sankeys are often used is the energy sector. For example, they might show the source of natural gas by country, the means by which it reaches its destination (pipeline, ship, etc.) and then how it is used (end users). Diagrams like this are useful for policy-makers, as they highlight areas where efficiency can be improved.

Sankey diagrams are a particularly intuitive way of showing changes over times. In this Sankey Diagram the flow of refugees from various countries of origin into the United States is shown over a period of time. The slider allows users to move through the time-line, and smooth transitions make it easy to keep track of the nodes as they rise or fall in importance.

Chloropleth

Choropleths use colour to show how a variable varies across a geographic area. They are similar to heat maps; however, unlike the latter, they divide the map into geopolitical sub-units, such as countries, states, provinces or counties.

The values used in a chloropleth must take into account the varying sizes of the areas. For example, there is a huge difference between the sizes of different countries, so it makes no sense to colour countries based just on their populations. Instead, this data would be 'normalized' across regions by using population density rather than absolute population. For both types of display, darker or more intense colors usually represent higher values, while lighter or paler colors indicate lower values.

Unfortunately, real-world data isn't typically divided into natural categories. For example, a chloropleth in which the intensity of a colour was proportional to the population density might work when there is a similar difference between the population densities of different regions (such as between different counties in the same US state). However, often data contains values which are orders of magnitude greater than other values in the same data set. Fortunately, D3.js has a rich set of scales. In some cases, a log scale might be more appropriate: this would show small differences well, but also show much larger differences. In other cases, one colour could be used to show values above or below a certain threshold. It's this high level of flexibility which makes D3.js so such a powerful took for creating data visualizations.

As well as helping us scale the data, D3.js allows us to use a wide range of map projections: these have a major impact on the way the data is perceived. Chloropleths produced using other libraries often use standard projections such as Mercator's projection, which can lead to large distortions in certain parts of the world. This is less of an issue where the map shows smaller areas, such as counties in the UK, or where the areas displayed are all at a similar latitude.

Finally, it's possible to use two separate (but related) pieces of data, each with a different colour scale. This is known as a Two-Dimensional Cloropleth.

Bubble Chart

Bubble charts are like scatter plots with the data replaced by circles. Whereas a scatter plot can only use the position and the colour of a dot to represent information, a bubble chart also has horizontal and vertical dimensions. This makes bubble charts particularly suitable for displaying multi-dimensional relationships.

If only one extra piece of information needs to be displayed for each circle this can be represented by the area of the circle. However, this can be problematic, because users tend to judge the relative sizes of the circles based on their diameter rather than their areas. It's important to make this clear in the legend.

Bubble charts work less well when there are a lot of data points, and when there is a big range of data. When there are too many data points the display can look crowded and bubbles can overlap. When there is a large range of values in the data-set the smaller bubbles may not be clearly visible. These problems can be overcome to some extent by using mouse-over interactions to give more information, such as the exact value of the underlying data point.

One final issue with Bubble Charts is the weighted average illusion: the sizes of the bubbles affect the perception of the x- and y-values of the data point. This distortion must be are taken into account when estimating the mean x- and y-values.

Bubble charts which need to show negative values can be created either using a symbol in the centre of bubbles representing negative values, different colours for positive and negative or even different shapes. With D3.js this level of flexibility is possible, but this is not the case with most data visualizatin libraries.