DynamicD3: Data Visualization using D3.js

DynamicD3

Pie Charts

As noted above, the benefit of a Donut Chart is that there is an area in the middle which can be used to display data. Because of the flexibility of D3.js, this space can show modified data or text labels. For example, in this case, the percentage values are shown as labels on the sections of the Donut Chart, but the centre display shows the absolute values.

D3.js also allows us to use colour creatively in a Pie Chart. This Pie Chart uses a palette of random colours. However, the colours could also be shades which are proportional to the underlying values, as is the case with this Sunburst diagram.

Another use of colour in a Pie Chart would be to group sets of data points which are related in some way. For example, a more detailed Pie Chart might show different types of operations grouped in some meaningful way, with sections of the pie representing operations in the same group having the same colour. This is more common in Sunburst diagrams, which are typically used to display much larger data sets.

Pie Charts and Donut Charts are easy to produce using D3.js, so they are relatively inexpensive. Add-ons such as tool-tips, custom animations and so on will add a bit to the cost but greatly enhance the user experience. The Prices page will give you a general idea. However, please contact us for a free discussion with a developer to work out what’s best for you.

Piecharts and donut charts are useful for showing the break-down of a data-set into different values: the only difference is that the donut chart has a non-zero inner radius. The area in the centre can be used to display data. In this case, mousing over a segment of the graph causes that segment to move out slightly. More information about that data point (in this case, the absolute value, rather than the percentage) is shown in the centre of the diagram.