chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const color = d3
.scaleLinear()
.domain([3, 0, -1])
.range(d3.schemeRdYlBu[3]),
gradient = DOM.uid();
svg
.append("linearGradient")
.attr("id", gradient.id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0)
.attr("y1", y(color.domain()[0]))
.attr("x2", 0)
.attr("y2", y(color.domain()[2]))
.selectAll("stop")
.data(d3.range(5))
.join("stop")
.attr("offset", i => i / 4)
.attr("stop-color", i => color(3 - i));
svg
.append("path")
.attr("fill", gradient)
.attr("d", area(values));
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
if (compareWithMM)
svg
.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", .5)
.attr("d", line(mm));
return svg.node();
}
precision = 1e-6
function applyKernel(points, w) {
const values = new Float64Array(points.length).fill(0),
total = new Float64Array(points.length).fill(0);
let p = 1;
for (let d = 0; p > precision; d++) {
p = w(d);
for (let i = 0; i < points.length; i++) {
if (i + d < points.length) {
values[i + d] += p * points[i];
total[i + d] += p;
}
if (d != 0 && i - d >= 0) {
values[i - d] += p * points[i];
total[i - d] += p;
}
}
}
for (let i = 0; i < values.length; i++) {
values[i] /= total[i];
}
return values;
}
function gaussianSmoothing(values, N) {
const r = 2 / N;
return applyKernel(values, d => Math.exp(-((r * d) ** 2)));
}
function movingAverage(values, N) {
let i = 0;
let sum = 0;
const means = new Float64Array(values.length).fill(NaN);
for (let n = Math.min(N - 1, values.length); i < n; ++i) {
sum += values[i];
}
for (let n = values.length; i < n; ++i) {
sum += values[i];
means[i] = sum / N;
sum -= values[i - N + 1];
}
return means;
}
values = gaussianSmoothing(data.map(d => d.usage), N)
mm = movingAverage(data.map(d => d.usage), N)
import { data } from "@mbostock/electric-usage-2019"
area = d3
.area()
.defined(d => !isNaN(d))
.x((d, i) => x(data[i].date))
.y0(y(0))
.y1(y)
line = d3
.line()
.defined(d => !isNaN(d))
.x((d, i) => x(data[i].date - (N / 2) * (3600 * 1000)))
.y(y)
x = d3
.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain(d3.extent(mm))
.nice()
.rangeRound([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width)
.attr("stroke-opacity", 0.1))
height = 500
margin = ({top: 20, right: 12, bottom: 30, left: 30})
d3 = require("d3@5")
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.
