-
-
Save aaronkyle/20fa8bbedbbf4efba4249856180651d2 to your computer and use it in GitHub Desktop.
Counties of the United Kingdom
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <link type="text/css" rel="stylesheet" href="style.css"/> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script> | |
| <style type="text/css"> | |
| body { text-align: center; } | |
| p.source { font-style: italic; } | |
| a { color: blue; } | |
| svg { | |
| display: block; | |
| margin: auto; | |
| } | |
| text { | |
| font-size: 11px; | |
| } | |
| rect { | |
| fill: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Counties of the United Kingdom</h1> | |
| <p>A demonstration of using CSV data for treemaps, at the request of <a href="https://github.com/blackbird25">blackbird25</a>. Click to zoom! | |
| <div id="body"></div> | |
| <p>Treemap zooming based on <a href="http://mbostock.github.com/d3/talk/20111018/#23">a slide</a> by <a href="http://bost.ocks.org/mike">Mike Bostock</a>. | |
| <p class="source">Data source: <a href="http://blog.acmultimedia.co.uk/2007/09/list-of-uk-counties-in-sql-csv-format/">acmultimedia</a>. | |
| <script type="text/javascript"> | |
| var w = 960 - 80, | |
| h = 500 - 180, | |
| x = d3.scale.linear().range([0, w]), | |
| y = d3.scale.linear().range([0, h]), | |
| color = d3.scale.category20c(), | |
| root, | |
| node; | |
| var treemap = d3.layout.treemap() | |
| .round(false) | |
| .size([w, h]) | |
| .sticky(true) | |
| .children(function(d) { return d.values; }) | |
| .value(function(d) { return 1; }); | |
| var svg = d3.select("#body").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .append("svg:g") | |
| .attr("transform", "translate(.5,.5)"); | |
| d3.csv("uk-counties.csv", function(data) { | |
| node = root = {values: d3.nest() | |
| .key(function(d) { return d.Country; }) | |
| .rollup(function(d) { | |
| return d.map(function(d) { | |
| return {key: d.County}; | |
| }); | |
| }) | |
| .entries(data)}; | |
| var nodes = treemap.nodes(root) | |
| .filter(function(d) { return !d.values; }); | |
| var cell = svg.selectAll("g") | |
| .data(nodes) | |
| .enter().append("svg:g") | |
| .attr("class", "cell") | |
| .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) | |
| .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); }); | |
| cell.append("svg:rect") | |
| .attr("width", function(d) { return d.dx - 1; }) | |
| .attr("height", function(d) { return d.dy - 1; }) | |
| .style("fill", function(d) { return color(d.parent.key); }); | |
| cell.append("svg:text") | |
| .attr("x", function(d) { return d.dx / 2; }) | |
| .attr("y", function(d) { return d.dy / 2; }) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "middle") | |
| .text(function(d) { return d.key; }) | |
| .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; }); | |
| d3.select(window).on("click", function() { zoom(root); }); | |
| }); | |
| function zoom(d) { | |
| var kx = w / d.dx, ky = h / d.dy; | |
| x.domain([d.x, d.x + d.dx]); | |
| y.domain([d.y, d.y + d.dy]); | |
| var t = svg.selectAll("g.cell").transition() | |
| .duration(d3.event.altKey ? 7500 : 750) | |
| .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); | |
| t.select("rect") | |
| .attr("width", function(d) { return kx * d.dx - 1; }) | |
| .attr("height", function(d) { return ky * d.dy - 1; }) | |
| t.select("text") | |
| .attr("x", function(d) { return kx * d.dx / 2; }) | |
| .attr("y", function(d) { return ky * d.dy / 2; }) | |
| .style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; }); | |
| node = d; | |
| d3.event.stopPropagation(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| overflow: hidden; | |
| margin: 0; | |
| font-size: 14px; | |
| font-family: "Helvetica Neue", Helvetica; | |
| } | |
| rect { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| pre { | |
| font-size: 18px; | |
| } | |
| line { | |
| stroke: #000; | |
| stroke-width: 1.5px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Country | County | |
|---|---|---|
| England | London | |
| England | Bedfordshire | |
| England | Buckinghamshire | |
| England | Cambridgeshire | |
| England | Cheshire | |
| England | Cornwall and Isles of Scilly | |
| England | Cumbria | |
| England | Derbyshire | |
| England | Devon | |
| England | Dorset | |
| England | Durham | |
| England | East Sussex | |
| England | Essex | |
| England | Gloucestershire | |
| England | Greater London | |
| England | Greater Manchester | |
| England | Hampshire | |
| England | Hertfordshire | |
| England | Kent | |
| England | Lancashire | |
| England | Leicestershire | |
| England | Lincolnshire | |
| England | Merseyside | |
| England | Norfolk | |
| England | North Yorkshire | |
| England | Northamptonshire | |
| England | Northumberland | |
| England | Nottinghamshire | |
| England | Oxfordshire | |
| England | Shropshire | |
| England | Somerset | |
| England | South Yorkshire | |
| England | Staffordshire | |
| England | Suffolk | |
| England | Surrey | |
| England | Tyne and Wear | |
| England | Warwickshire | |
| England | West Midlands | |
| England | West Sussex | |
| England | West Yorkshire | |
| England | Wiltshire | |
| England | Worcestershire | |
| Wales | Flintshire | |
| Wales | Glamorgan | |
| Wales | Merionethshire | |
| Wales | Monmouthshire | |
| Wales | Montgomeryshire | |
| Wales | Pembrokeshire | |
| Wales | Radnorshire | |
| Wales | Anglesey | |
| Wales | Breconshire | |
| Wales | Caernarvonshire | |
| Wales | Cardiganshire | |
| Wales | Carmarthenshire | |
| Wales | Denbighshire | |
| Scotland | Kirkcudbrightshire | |
| Scotland | Lanarkshire | |
| Scotland | Midlothian | |
| Scotland | Moray | |
| Scotland | Nairnshire | |
| Scotland | Orkney | |
| Scotland | Peebleshire | |
| Scotland | Perthshire | |
| Scotland | Renfrewshire | |
| Scotland | Ross & Cromarty | |
| Scotland | Roxburghshire | |
| Scotland | Selkirkshire | |
| Scotland | Shetland | |
| Scotland | Stirlingshire | |
| Scotland | Sutherland | |
| Scotland | West Lothian | |
| Scotland | Wigtownshire | |
| Scotland | Aberdeenshire | |
| Scotland | Angus | |
| Scotland | Argyll | |
| Scotland | Ayrshire | |
| Scotland | Banffshire | |
| Scotland | Berwickshire | |
| Scotland | Bute | |
| Scotland | Caithness | |
| Scotland | Clackmannanshire | |
| Scotland | Dumfriesshire | |
| Scotland | Dumbartonshire | |
| Scotland | East Lothian | |
| Scotland | Fife | |
| Scotland | Inverness | |
| Scotland | Kincardineshire | |
| Scotland | Kinross-shire |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment