Plot.plot({
width: 1200, // Adjust width
height: 800, // Adjust height
marginLeft: 10,
marginRight: 10,
projection: customProjection,
fx: {
interval: d3.utcYear.every(10),
tickFormat: (d) => `${d.getUTCFullYear()}’s`,
label: null
},
marks: [
Plot.geo(statemesh, {strokeOpacity: 0.1}),
Plot.geo(nation),
Plot.dot(walmarts, {fx: "date", x: "longitude", y: "latitude", r: 1, fill: "currentColor"})
]
})
customProjection = d3.geoAlbers()
.scale(300) // Adjust this value
// You might also need to adjust the .translate([x, y]) if your map isn't centered
.translate([width / 2, innerHeight / 2]);
walmarts = FileAttachment("walmarts.tsv").tsv({typed: true})
us = FileAttachment("us-counties-10m.json").json()
statemesh = topojson.mesh(us, us.objects.states)
nation = topojson.feature(us, us.objects.nation)
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.
