Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
chart = {
const cx = width / 2;
const cy = height / 2;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "middle")
.attr("fill", "currentColor")
.style("margin", "0 -14px")
.style("display", "block");
svg.append("path")
.attr("d", path(graticule))
.attr("fill", "none")
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.2);
svg.append("path")
.attr("d", path(outline))
.attr("fill", "none")
.attr("stroke", "currentColor");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const hour = svg.append("g")
.selectAll("g")
.data(d3.range(24))
.join("g");
hour.append("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2)
.attr("d", hour => path({
type: "LineString",
coordinates: d3.utcDays(start, end).map(day => {
return solar.position(d3.utcHour.offset(day, hour));
})
}));
hour.append("text")
.datum(hour => d3.utcHour.offset(mid, hour))
.attr("dy", "-1em")
.attr("transform", date => `translate(${projection(solar.position(date))})`)
.text(formatHour);
return svg.node();
}
start = d3.utcYear()
end = d3.utcYear.offset(start)
mid = d3.utcMonth.offset(start, 6)
tz = start.getTimezoneOffset()
xAxis = g => g
.call(g => g.append("g")
.attr("stroke", "currentColor")
.selectAll("line")
.data(d3.range(360))
.join("line")
.datum(d => [
projection([d, 0]),
projection([d, d % 10 ? -1 : -2])
])
.attr("x1", ([[x1]]) => x1)
.attr("x2", ([, [x2]]) => x2)
.attr("y1", ([[, y1]]) => y1)
.attr("y2", ([, [, y2]]) => y2))
.call(g => g.append("g")
.selectAll("text")
.data(d3.range(0, 360, 10))
.join("text")
.attr("dy", "0.35em")
.text(d => d === 0 ? "N" : d === 90 ? "E" : d === 180 ? "S" : d === 270 ? "W" : `${d}°`)
.attr("font-size", d => d % 90 ? null : 14)
.attr("font-weight", d => d % 90 ? null : "bold")
.datum(d => projection([d, -4]))
.attr("x", ([x]) => x)
.attr("y", ([, y]) => y))
yAxis = g => g
.call(g => g.append("g")
.selectAll("text")
.data(d3.range(10, 91, 10)) // every 10°
.join("text")
.attr("dy", "0.35em")
.text(d => `${d}°`)
.datum(d => projection([0, d]))
.attr("x", ([x]) => x)
.attr("y", ([, y]) => y))
path = d3.geoPath(projection)
projection = d3.geoStereographic()
.reflectY(true)
.scale((width - 120) * 0.5)
.clipExtent([[0, 0], [width, height]])
.rotate([0, -90])
.translate([width / 2, height / 2])
.precision(0.1)
outline = d3.geoCircle().radius(90).center([0, 90])()
graticule = d3.geoGraticule().stepMinor([15, 10])()
width = 960 + 28
height = width
formatHour = d => (new Date(+d - tz * 1000 * 60).toLocaleString("en", {hour: "numeric", timeZone: "UTC"}))
solar = (await require("solar-calculator@0.2"))(location)
d3 = require("d3@6")
import {Scrubber} from "@mbostock/scrubber"
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.
