forked from jasondavies's block: Counties of the United Kingdom
xxxxxxxxxx
<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="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.csv.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/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="https://mbostock.github.com/d3/talk/20111018/#23">a slide</a> by <a href="https://bost.ocks.org/mike">Mike Bostock</a>.
<p class="source">Data source: <a href="https://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>
Modified http://mbostock.github.com/d3/d3.js to a secure url
Modified http://mbostock.github.com/d3/d3.csv.js to a secure url
Modified http://mbostock.github.com/d3/d3.layout.js to a secure url
https://mbostock.github.com/d3/d3.js
https://mbostock.github.com/d3/d3.csv.js
https://mbostock.github.com/d3/d3.layout.js