Social development practitioner. Trying to understand our world.
Published
Edited
May 8, 2019
chart = {
var width = 960,
height = 500,
centered;
var projection = d3.geo.equirectangular()
.scale(1050)
.rotate([-120, 0])
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select(DOM.element('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");
/*
d3.json("indonesia-topojson-city-regency.json", function(error, us) {
if (error) throw error;
g.append("g")
.attr("id", "subunits")
.selectAll("path")
.data(topojson.feature(us, us.objects.IDN_adm_2_kabkota).features)
.enter().append("path")
.attr("d", path)
.on("click", clicked);
g.append("path")
.datum(topojson.mesh(us, us.objects.IDN_adm_2_kabkota, function(a, b) { return a !== b; }))
.attr("id", "state-borders")
.attr("d", path);
});
function regionInfo(region) {
return region.properties.NAME_1.toUpperCase() +" : "+ region.properties.NAME_2.toUpperCase();
}
/*/
d3.json("https://gist.githubusercontent.com/tvalentius/10ef8cbefbacaecada45161b1f3810ce/raw/e5275d5a6ca90b4f0193d2ff151107cbfa0f89bc/indonesia.json", function(error, indonesia) {
if (error) throw error;
g.append("g")
.attr("id", "subunits")
.selectAll("path")
.data(topojson.feature(indonesia, indonesia.objects.states_provinces).features)
.enter().append("path")
.attr("d", path)
.on("click", clicked);
g.append("path")
.datum(topojson.mesh(indonesia, indonesia.objects.states_provinces, function(a, b) { return a !== b; }))
.attr("id", "state-borders")
.attr("d", path);
});
function regionInfo(region) {
return region.properties.name.toUpperCase();
}
//*/
function clicked(d) {
var x, y, k;
if(d) {
console.log(d.properties);
document.getElementById('info').innerHTML = regionInfo(d);
} else {
document.getElementById('info').innerHTML = "INDONESIA";
}
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
g.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });
g.transition()
.duration(750)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1.5 / k + "px");
}
return svg.node();
}
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.
