Zoom, pan, click to center
- Use the mouse wheel to zoom in/out
- Use mouse drag to pan canvas
- Click on circle to enlarge and center in box
With this example, I wanted to solve a three-fold problem:
- Scale SVG to fit into smaller window size.
The chart indicates the results of the top 10 ATP players against each other during 2015, using a D3 Chord Diagram. Hover over the circle rim to see number of matches for that player. Hover over an arc to see the results between two players. The thickness of links between players encodes the relative frequency of matches between the players: thicker links represent more matches. Links are directed: for example, Djokovic beat Murray 6 times, but Murray only beat Djokovic once. Links are given the colour of the player who wins most often. Thanks to Mike Bostock for sample code. Data sourced from tennis-data.co.uk.
This example uses a map that was created in Adobe Illustrator and exported as an SVG file. Although it might be preferable to use GeoJSON files for geographical maps, they are not always available in the detail that is required. In any case, we could be using any irregular shaped SVG graphic created by an application like Illustrator - this example shows how to embed the SVG into D3 and bind data to the paths.
The SVG file is quite simple. Each county is identified by a path and an id. Some paths are grouped together to denote Northern Ireland and the Republic. The path titles are dynamically created in the program.
The data in this case comes from the Irish Central Statistics Office and gives the average rental prices for houses/apartments in each county in the Republic of Ireland in 2015. The map is a chloropleth using a quantize scale. Another useful feature of this example is the zoom and center feature which centers the county's bounding box in the