Published
Edited
Apr 29, 2019
Fork of Hexbin map
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", "0 0 960 600")
.attr("width", width)
.attr("height", height)
.style("width", "100%")
.style("height", "auto");

svg.append("path")
.datum(topojson.mesh(italy, italy.objects.sub))
.attr("fill", "none")
.attr("stroke", "#777")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("d", d3.geoPath());

return svg.node();
}
Insert cell
Insert cell
width = 975
Insert cell
height = 600
Insert cell
map_url = "https://gist.githubusercontent.com/riccardoscalco/6029355/raw/132c402327eb141b90ea9568653852ca5e9e973b/itx.json"
Insert cell
italy0 = d3.json(map_url)
Insert cell
italy = d3.json(map_url, function(error, it) {
var projection = d3.geo.albers()
.center([0, 41])
.rotate([347, 0])
.parallels([35, 45])
.scale(2000)
.translate([width / 2, height / 2]);
var subunits = topojson.feature(it, it.objects.sub);
var path = d3.geo.path()
.projection(projection);
// draw border with sea
svg.append("path")
.datum(topojson.mesh(it, it.objects.sub, function(a, b) { return a === b ; }))
.attr("class", "border_map")
.attr("d", path);
// draw all the features together (no different styles)
svg.append("path")
.datum(subunits)
.attr("class", "map")
.attr("d", path);
// draw and style any feature at time
/*svg.selectAll("path")
.data(topojson.feature(it, it.objects.sub).features)
.enter().append("path")
.attr("class",function(d) { return d.id; })
.attr("d",path);*/
// draw TORINO border (i.e. the border of a given feature)
svg.append("path")
.datum(topojson.mesh(it, it.objects.sub, function(a, b) { return b.id === 'TORINO' || a.id === 'TORINO'; }))
.attr("class", "torino_map")
.attr("d", path);
});
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5", "d3-hexbin@0.2")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more