map = {
let w = width < 900 ? width : 900;
let h = 0.625 * w;
let div = d3.create("div").style("width", `${w}px`).style("height", `${h}px`);
let svg = div.append("svg").attr("width", w).attr("height", h);
let map = svg.append("g");
let projection = d3.geoAlbersUsa().fitSize([w - 10, h], stateShapes);
let path = d3.geoPath().projection(projection);
const bg = "#ddd"
map
.append("path")
.attr("d", path(stateShapes))
.attr("fill", bg)
.attr("stroke", "white")
.attr("stroke-width", 1);
const radius = 10
const scale = d3.scaleLinear().domain([0, 1]).range([radius*2, 0])
map
.selectAll("circle.sun")
.data(eclipse)
.join("circle")
.classed("sun", true)
.attr("cx", (o) => projection([o.lon, o.lat])[0])
.attr("cy", (o) => projection([o.lon, o.lat])[1])
.attr("r", radius)
.attr("fill", "orange")
.attr("stroke", "white")
.attr("stroke-width", 1)
.attr("stroke-opacity", 1)
.attr("fill-opacity", 1)
map
.selectAll("circle.blocked")
.data(eclipse)
.join("circle")
.classed("blocked", true)
.attr("cx", (o) => projection([o.lon, o.lat])[0]+ scale(o.magnitude))
.attr("cy", (o) => projection([o.lon, o.lat])[1])
.attr("r", radius)
.attr("fill", bg)
.attr("stroke", bg)
.attr("stroke-width", 0.5)
return div.node();
}
eclipse = FileAttachment("eclipse-data.csv").csv()
tippy_style = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}">`
tippy = require("tippy.js@6")
import { stateShapes } from "@observablehq/us-county-datasets"
import { interval } from "@mootari/range-slider@1781"
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.
