width = 960
height = 500
projection = d3.geoOrthographic()
.scale(250)
.translate([width / 2, height / 2])
.clipAngle(90)
path = d3.geoPath()
.projection(projection)
λ = d3.scaleLinear()
.domain([0, width])
.range([-180, 180])
φ = d3.scaleLinear()
.domain([0, height])
.range([90, -90])
world = d3.json("https://unpkg.com/world-atlas@1/world/110m.json")
el = d3.select(svg)
{
el.on("mouseover", function() {
var p = d3.mouse(this);
projection.rotate([λ(p[0]), φ(p[1])]);
el.selectAll("path").attr("d", path);
})
el.append("circle")
.attr('cx', width/2)
.attr('cy', height/2)
.attr('r', Math.min(width, height)/2)
.attr('fill', '#ccc')
el.append("path")
.datum(topojson.feature(world, world.objects.countries))
.attr("stroke", "#f00")
.attr("d", path);
}
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.
