xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>"
<style>
.background {
fill: none;
pointer-events: all;
}
#cities {
fill: #ccc;
}
#cities .active {
display:none;
}
#city-borders {
fill: none;
stroke: #fff;
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
.town-boundary {
fill: #ccc;
stroke: #fff;
stroke-width: .2px;
}
.town-boundary:hover, .city:hover {
fill: orange;
}
</style>
</head>
<body>
<script>
var width = 960;
var height = 700;
var centered;
var active = d3.select(null);
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", clicked);
var g = svg.append('g');
var projection = d3.geoMercator()
var path = d3.geoPath().projection(projection);
var color = d3.scaleQuantile()
.range(['rgba(247,251,255,0.8)', 'rgb(222,235,247)', 'rgb(198,219,239)', 'rgb(158,202,225)', 'rgb(107,174,214)', 'rgb(66,146,198)', 'rgb(33,113,181)', 'rgb(8,81,156)', 'rgb(8,48,107)']);
d3.queue(3)
.defer(d3.json, 'tr_quantized_topo.json')
.defer(d3.csv, 'pivot.csv')
.awaitAll(draw)
function draw(err, results) {
const tr = results[0];
const data = results[1];
var cities = topojson.feature(tr, tr.objects.cities);
var towns = topojson.feature(tr, tr.objects.towns)
console.log(cities);
console.log(towns);
color.domain([
d3.min(data, function(d) {
return d.population;
}),
d3.max(data, function(d) {
return d.population;
})
]);
projection.fitExtent([
[0, 0],
[width, height]
], cities);
cities.features.forEach(function(city, i) {
city.properties.population = data[i].population
})
g.append('g')
.attr('id', 'towns')
.selectAll("path")
.data(towns.features)
.enter()
.append('path')
.attr('d', path)
.attr('class', 'town-boundary')
/* .style('stroke', 'white')
.style('stroke-width', '0.1')
*/
g.append('g')
.attr('id', 'cities')
.selectAll("path")
.data(cities.features)
.enter()
.append('path')
.attr('d', path)
.attr('class', 'city')
/* .style('stroke', 'white')
.style("fill", function(d) {
var value = d.properties.population;
if (value) {
return color(value);
} else {
return "#ccc";
}
})
*/
.on("click", clicked)
g.append("path")
.datum(topojson.mesh(tr, tr.objects.cities, function(a, b) {
return a !== b;
}))
.attr("id", "city-borders")
.attr("d", path);
}
function clicked(d) {
if (active.node() === this) return reset();
active.classed("active", false);
active = d3.select(this).classed("active", true);
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
g.transition()
.duration(750)
.style("stroke-width", 1.5 / scale + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}
function reset() {
active.classed("active", false);
active = d3.select(null);
g.transition()
.duration(750)
.style("stroke-width", "1.5px")
.attr("transform", "");
}
</script>
</body>
Modified http://d3js.org/topojson.v2.min.js to a secure url
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js