Add-Ons

Tooltips

We can add tooltips to any chart or graph. These are particularly helpful when there are a lot of data points (for example, in a Scatter Plot). Even with smaller data sets, they help to de-clutter the chart, allowing users to focus on overall patterns.

They are also useful in complex charts, where different parts of the chart convey different aspects of the data set, and this might not be obvious to users who are not familiar with this type of diagram. For example in this Sunburst diagram users can mouse over segments to see both the underlying data point and the context of that data point. In this case, the Sunburst diagram breaks down medical treatments into type, the organ which is affected and the insurance status of the patient. This information is displayed at the bottom of the display and changes as the user mouses over each segment.

One of the huge strengths of D3 is that it offers a lot of flexibility. A tool-tip can include any data which is present in the data set, contextual text, or even values from a completely different data set. For example this Sankey shows users that the nodes represent the total numbers of refugees, whereas the lines represent the number of refugees moving between each origin (in this case a country) and destination (in this case, a US state). This text can be in any language, which helps enormously with localization.

When two or more data sets are used in the display tool-tips can show comparisons between these. For example they could show both this year’s value and last year’s, or data-sets for different regions. Conversely, with a single data-set, they can be used to display confidence intervals, percentage values, or other statistical information related to data points, helping users assess the reliability of the data.

Another benefit of tool-tips is that they are fun! They enhance interactivity by allowing users to engage with the chart, exploring the data on their own terms.

Zooms

Zooms allow users to zoom in on specific areas of a graph or chart to examine data points and trends more closely. This is especially helpful with large data-sets. It’s also useful where users are interested in different aspects of the data-set: for example, some users might want to focus on a particular time period.

Zooms also allow users to make detailed comparisons between different parts of the data-set. They can explore the data interactively by zooming in on one area and then moving to a different area. This helps them see correlations, outliers and patterns more clearly.

Another benefit of zooms is that they allow users to use smaller devices, such as smartphones, to see the complete data-set, yet still be able to see the detail they need. Smartphone users are used to zooming into the display using the ‘pinch gesture’.

Zooming also helps to improve accessibility for people with visual defects.

Brushes

Brushing works similarly to zooming, in that it offers a way for users to interact with part of the data set. However, instead of enlarging part of the chart, this area doesn’t change size. The brushed area may be indicated in some other way, such as a change of colour.

A brush can be used to filter the data – for example, users could brush along the x-axis of an area graph by moving their mouse. The area which has been brushed could then show up on another part of the display. Another way of using a brush is to add a separate chart showing the same data at a different scale. In this situation, the brush works similarly to zoom. However, it can be easier to use, because the original graph doesn’t change its dimensions.

Animations

Animations help in a number of ways. In the case of a simple Bar Chart, for example, the bars can slide up slowly rather than appearing instantly. This adds very little to the information content of the chart, but makes it more interesting for users.

Animations play a more serious role when they are used for transitions. For example, this Sankey Diagram shows data for several years. As the user moves from one year to another, using the slider, the relative sizes of the nodes change. They move around, because they are arranged in order of size. Without the animation the change would be jarring, and it would be hard to maintain ‘object constancy’. For example, a user might be interested in how flow (in this case, of refugees) coming from a particular country changes from year to year. If that node jumped about without a smooth transition it would be hard to do this.

Another example of a transition is shown in this Pie Chart. When a segment is moused over it moves out slightly. By using a smooth transition this movement seems natural, and helps to maintain the metaphor of the pie. Without it, this section of the pie chart would jump from one position to another. For this same reason, animations work particularly well when displaying time-series data, such as values on a stock-ticker. Again, the benefit is that it’s easier for the eye to keep track of a particular value as it changes.

When animation is used to transition between data-sets, and these transitions are controlled by a user interface, such as this slider the user can explore the values almost like a video display.

Colours

Because D3 graphs and charts are created using JavaScript, it’s possible to set the colours using a function. This means that colour can be used in ways which aren’t possible in other data visualization libraries.

The most obvious use of colour is to distinguish different data sets – for example, this Bar Chart has data for multiple sets of similar data. By using different colours for each data set, and explaining the meaning of these colours in a legend, it’s possible to combine them together in the same chart.

Colour can also be used to group similar sets of values. For example, this Sunburst diagram shows a hierarchy of data. Each ring represents a different level in the hierarchy. By using colour, we can group values which belong to the same level and explain them in a legend.

Another benefit of D3 is that it’s possible to vary the saturation of the colour as well as its hue. For example, in this Sunburst diagram (the top example) the saturation of colour in each section is varied, while all the sections in the same ring have the same colour. In this case the intensity is simply randomized, in order to distinguish individual sectors more clearly (compare this with the example in which each sector in a ring has both the same hue and the same saturation). However, saturation could also be related to the underlying data point. In this case, it’s better if the sections aren’t arranged in order of size, otherwise smaller sectors will be too hard to distinguish.

Another example of where colour has been used to make the diagram clearer is this Sankey diagram. In the top two examples, one colour is used to represent the origin nodes and another colour represents the destination nodes. In addition, the density of the colour represents the size of each node. These same colours are used in the connecting lines. There is therefore an obvious link between the values represented by the nodes and the values represented by the connecting lines. In the last two examples, two colours are used, and the underlying data values are represented by the relative values of these two colours. This can sometimes be clearer, especially when differences between data values are subtle.

Finally, colour can sometimes be used simply to separate out parts of the diagram, with no underlying meaning. This is the case in the third example of a Sunburst diagram. The colours are specifically chosen in such a way that the boundaries between sectors in the Sunburst diagram are clearly visible. This is especially useful when values are small and the sectors are very narrow.

Another way in which colour can be used is to distinguish a particular set of data points. This might be combined with a Brush (see above). By brushing over the graph, users can filter filter data points. Filtered values can be shown as a different colour, which can be linked to a separate legend.

Even without a brush, colours can be useful for highlighting specific values. For example, with D3.js we can make outliers a specific colour or use different colours for negative and positive values. Data visualizations become much clearer when colours are used intelligently, especially when there are a lot of data points. Colour coding can also be used to show the overall structure of a data visualization.

Colours can also help with interactions. The colour of a data point, bar or line can change on mouse-over, emphasizing that it has been selected.

Data Grid

Data for a D3js chart or graph will typically come from one of three sources. If the data is unlikely to change very often it can be stored in a JSON or CSV file on the server. If the data comes from a local database that database will need to be updated directly, either with a custom interface or with a database tool, such as DBeaver. We can set this up for you.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

A variation of a data-grid is a form: this functions much like the contact form on a website. This might be more appropriate when data has to be inputted by staff who are not familiar with a data grid.

UI Elements

While D3.js does offer a limited set of UI tools, it’s better to code these using either a component library, such as MUI, or as plain HTML.

The most useful UI elements are radio buttons and check-boxes. These are sometimes confused. Radio buttons, such as the ones shown in this Stacked Bar Chart allow users to choose between a set of mutually-exclusive choices: in this case, they can choose a single data set, shown as a simple Bar Chart, or multiple data sets, shown as a Stacked Bar Chart. However, they may also be used to change the way in which the data is displayed. In this Sunburst data visualization radio buttons affect the way colour is used to bring out different aspects of the data set.

Check-boxes, on the other hand, allow users to choose any permutation of options: in this case, the choices are not mutually exclusive. In the check-box example, the Line Chart data visualization can show just one data set, any two data sets, or all three. This is extremely helpful when users need to make specific comparisons between pairs of data sets: for example, they might want to compare values for heart operations vs liver operations, and remove the values for spleen operations to improve clarity.

Another UI element which is useful for enhancing D3.js data visualizations is a toggle switch. This is used when the diagram can be in one of two states, or when you want to give users the option to switch out part of the data visualization to improve clarity. In this example a toggle switch is used to switch between a Line Chart and an Area Chart.

Finally, sliders can be used. These work especially well when a data visualization contains data sets from different time periods. They allow users to intuitively move back and forth along the time line, as in this Sankey data visualization