CTO @Datawrapper & proud @nytgraphics alumni
Published
Edited
Mar 9, 2020
xNoWeekends = scaleTimeNoWeekends(d3.scaleTime())
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
xWithWeekends = d3.scaleTime(d3.scaleTime())
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
scaleTimeNoWeekends = function(timeScale) {
const scale = (d) => {
const t = d.getTime();
const monday = d3.timeMonday.floor(d);
const saturday = d3.timeSaturday.ceil(monday);
const nextMonday = d3.timeMonday.ceil(saturday);
const f = Math.min(1, (t - monday.getTime()) / (saturday.getTime() - monday.getTime()));
const d1 = new Date(monday.getTime() + f * (nextMonday.getTime() - monday.getTime()));
return timeScale(d1);
};
function steal(methods) {
methods.forEach(f => {
scale[f] = function(_) {
if (arguments.length) {
timeScale[f].apply(timeScale, arguments);
return scale;
}
return timeScale[f]();
}
});
}
steal(['domain', 'range', 'round', 'nice', 'tickFormat', 'clamp']);
scale.invert = (_) => {
return timeScale.invert(_);
}
scale.ticks = (_) => {
return timeScale.ticks(_);
}
scale.copy = () => {
timeScale = timeScale.copy();
return scale;
}
return scale;
}
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3
.axisBottom(x)
.ticks(hideWeekends === 'yes' ? timeWeekday : d3.timeDay)
.tickSizeOuter(0)
.tickFormat(d => weekdays[d.getDay()]))
timeWeekday = {
const durationMinute = 6e4;
const durationDay = 864e5;
return d3.timeInterval(
// floor
function(date) {
date.setHours(0, 0, 0, 0);
},
// offset
function(date, step) {
const wd = date.getDay();
// 0..sun,1..monday,5...friday,6..sat
if (step > 0 && wd + step === 6) step += 2;
if (step > 0 && wd + step === 7) step += 1;
if (step < 0 && wd + step === 0) step -= 2;
if (step < 0 && wd + step === -1) step -= 1;
date.setDate(date.getDate() + step);
}
);
}
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
margin = ({top: 20, right: 30, bottom: 30, left: 40})
height = 500
d3 = require("d3@5")
import {checkbox} from "@jashkenas/inputs"
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.
