html`<div id="map" style="width: 100%;"></div>`
world_json = FileAttachment("world.json")
{
let width = d3.select("#map").node().getBoundingClientRect().width
let height = 500
const sensitivity = 75
let projection = d3.geoOrthographic()
.scale(250)
.center([0, 0])
.rotate([0,-30])
.translate([width / 2, height / 2])
const initialScale = projection.scale()
let path = d3.geoPath().projection(projection)
let svg = d3.select("#map")
.append("svg")
.attr("width", width)
.attr("height", height)
let globe = svg.append("circle")
.attr("fill", "#EEE")
.attr("stroke", "#000")
.attr("stroke-width", "0.2")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", initialScale)
let map = svg.append("g")
let data = await world_json.json()
map.append("g")
.attr("class", "countries" )
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("class", d => "country_" + d.properties.name.replace(" ","_"))
.attr("d", path)
.attr("fill", "white")
.style('stroke', 'black')
.style('stroke-width', 0.3)
.style("opacity",0.8)
//Optional rotate
d3.timer(function(elapsed) {
const rotate = projection.rotate()
const k = sensitivity / projection.scale()
projection.rotate([
rotate[0] - 1 * k,
rotate[1]
])
path = d3.geoPath().projection(projection)
svg.selectAll("path").attr("d", path)
},200)
}
d3 = require("https://d3js.org/d3.v4.min.js")
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.
