Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
projection = d3.geoOrthographic()
.translate([0, 0])
.scale(10)
path = d3.geoPath(projection)
hemisphere = d3.geoCircle()()
dayScale = {
const scale = d3.scalePoint()
.domain(d3.range(1, 40))
.range([margin.left, width - margin.right])
.padding(1);
return d => {
const start = d3.timeMonth(d);
const offset = start.getDay() || 7;
return scale(d.getDate() + offset);
};
}
monthScale = {
const scale = d3.scalePoint()
.domain(d3.range(12))
.range([margin.top, height - margin.bottom])
.padding(1);
return d => scale(d.getMonth());
}
days = {
const now = new Date(year, 0, 1);
const start = d3.timeYear(now);
return d3.timeDays(start, d3.timeYear.offset(start, 1));
}
months = {
const now = new Date(year, 0, 1);
const start = d3.timeYear(now);
return d3.timeMonths(start, d3.timeYear.offset(start, 1));
}
width = 975
height = 480
margin = ({top: 0, right: 0, bottom: 0, left: 60})
suncalc = require("suncalc@1")
d3 = require("d3@6")
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.
