{
var svg = d3.select(DOM.svg('svg'))
.attr("width", width)
.attr("height", height);
svg.selectAll(".subunit")
.data(subunits.features)
.enter()
.append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("d", path);
return svg.node();
// return context.canvas;
// return container
}
map = html`<div id="map"></div>`
width = 1000
height = 590;
projection = d3.geoPatterson()
.center([58,54])
.scale(520)
.translate([0,0])
.precision(.1);
path = d3.geoPath()
.projection(projection);
subunits = topojson.feature(asia, asia.objects.subunits);
asia = fetch("https://gist.githubusercontent.com/dhoboy/ff8448ace9d5d567390a/raw/f98a7b12ec0005f72641696752a96d1ccd73ed22/asia.json").then(response => response.json())
world = fetch("https://cdn.jsdelivr.net/npm/world-atlas@1/world/50m.json").then(response => response.json())
topojson = require('topojson')
d3 = require('d3', 'd3-geo', 'd3-geo-projection')
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.
