data = d3.csvParse(await FileAttachment("cmpco2019@2.csv").text(), parseData)
parseData = d => ({date: parseDate(`${d["DateTime"]}`), usage: +d["Value"]})
parseDate = d3.timeParse("%_m/%_d/%Y %H:%M")
dateExtent = d3.extent(data, d => d.date)
x = d3.scaleBand(d3.range(24), [margin.left, width - margin.right]).round(true)
y = d3.scaleBand(d3.timeDays(...dateExtent), [margin.top, height - margin.bottom]).round(true)
color = {
let [min, max] = d3.extent(data, d => d.usage);
if (min < 0) {
max = Math.max(-min, max);
return d3.scaleDiverging([-max, 0, max], t => d3.interpolateRdBu(1 - t));
}
return d3.scaleSequential([0, max], d3.interpolateReds);
}
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).tickFormat(formatHour))
.call(g => g.select(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickFormat(formatDay))
.call(g => g.select(".domain").remove())
formatUsage = d3.format(".2f")
formatDate = d3.timeFormat("%B %-d, %-I %p")
formatDay = {
const formatMonth = d3.timeFormat("%b %-d");
const formatDate = d3.timeFormat("%-d");
return d => (d.getDate() === 1 ? formatMonth : formatDate)(d);
}
formatHour = {
return d => d === 0 ? "12 AM" : d === 12 ? "12 PM" : (d % 12) + "";
}
width = 954
height = margin.top + margin.bottom + (d3.timeDay.count(...dateExtent) + 1) * 10
margin = ({top: 70, right: 0, bottom: 0, left: 40})
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
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.
