Category Archives: visualisation

Visualising with a Chord Diagram

February 13, 2017visualisationchord diagram, d3bhadmin

This chart is an example of a chord diagram, which shows the results of the top 10 ATP players (men’s tennis) against each other during 2015. A chord diagram is a suitable graph for illustrating the size of pair-wise relationships between elements in a set.

This graphic is best viewed on a PC or laptop.

Thanks to Mike Bostock, creator of D3, for sample code. Data sourced from tennis-data.co.uk.

Continue reading Visualising with a Chord Diagram →

D3 – Zoom, Pan, Center

February 9, 2017visualisationd3bhadmin

This article explains how to scale an SVG into a smaller viewbox and then center it and use the mouse to control zoom, pan and centering.

This graphic is best viewed on a PC or laptop.

Continue reading D3 – Zoom, Pan, Center →

Embedding SVG maps in D3

February 9, 2017visualisationd3bhadmin

This article explains how to embed a previously-created SVG file (for example using Adobe Illustrator) into D3 and bind data to its paths.

This graphic is best viewed on a PC or laptop.

Continue reading Embedding SVG maps in D3 →