Published
Edited
May 8, 2019
Insert cell
md`# Map Test`
Insert cell
d3 = require("d3@5")
Insert cell
topojson = require("topojson-client@3")
Insert cell
//geoPath = d3.geoPath()
// .projection( projection );
Insert cell
plane_path = d3.geoPath()
.projection(projection);
Insert cell
projection = d3.geoEquirectangular()
.scale(120)
.translate([width / 2, height / 2])
.precision(.1);
Insert cell
width = window.innerWidth
Insert cell
height = window.innerHeight;//, centered, clicked_point;
Insert cell
chart = {
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "map");
var g = svg.append("g");
var path = d3.geoPath()
.projection(projection);
// load and display the World
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, topology) {
g.selectAll("path")
.data(topojson.feature(topology, topology.objects.countries)
.features)
.enter()
.append("path")
.attr("d", path)
;
});
}
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