{
const path = d3.geoPath()
const svg = d3.create("svg")
.attr("width", "100%")
.attr("height", 600)
const states = svg.append("g")
.attr("fill", "#ddd")
.selectAll("g")
.data(topojson.feature(map_data, map_data.objects.states).features) // d is defined here
.enter().append("g")
// I use groups here beacause ultimately
// I want a shape (path) + a centroid (circle for instance)
states.each( function(d){ // d refers to the datum of each state, i.e. a geographical object
let state = d3.select(this)
let state_path = path(d)
let state_centroid = path.centroid(d) // computes the centroid of this specific
console.log(state)
state.append("path").attr("d", state_path)
state.append("circle")
.attr("cx", state_centroid[0]).attr("cy", state_centroid[1])
.attr("r", 20)
.attr("fill", "black")
state.append("circle")
.attr("cx", state_centroid[0]+20).attr("cy", state_centroid[1])
.attr("r", 20)
.attr("fill", "red")
})
// states.append("circle").attr("cx", path)
svg.append("path")
.datum(topojson.mesh(map_data, map_data.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none")
.attr("d", path)
return svg.node()
}
data = FileAttachment("eclipse-data.csv").csv()
map_data = {
const us = await d3.json("https://unpkg.com/us-atlas@1/us/10m.json");
us.objects.lower48 = {
type: "GeometryCollection",
geometries: us.objects.states.geometries.filter(d => d.id !== "02" && d.id !== "15")
};
return us;
}
d3 = require("d3@5")
topojson = require("topojson-client@3")
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.
