Exploring the politics of a digitally networked world.
spark(cumulative_sum(data))
spark(data, { low: 1, high: 5 })
spark = (data, range = { low: 0, high: 0 }) => {
const xScale = x
.range([margin.left, width - margin.right])
.domain(d3.extent(data, d => dateParse(d.date)));
const yScale = y
.range([height - margin.bottom, margin.top])
.domain(d3.extent(data, d => d.count));
const last = {
x: xScale(dateParse(data[data.length - 1].date)),
y: yScale(data[data.length - 1].count)
};
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g");
const line = d3
.line()
.curve(d3.curveMonotoneX)
.x(d => xScale(dateParse(d.date)))
.y(d => yScale(d.count));
const band = g
.append("rect")
.attr("x", margin.left)
.attr("y", yScale(range.high))
.attr("width", width - margin.right)
.attr("fill", style.line.stroke)
.attr("opacity", 0.3)
.attr("height", yScale(range.low) - yScale(range.high));
const path = g
.append("path")
.datum(data)
.attr("d", line)
.style("fill", "none")
.style("stroke", style.line.stroke)
.style("stroke-width", style.line.strokeWidth);
const current = g
.append("g")
.attr("transform", d => `translate(${last.x},${last.y})`);
const curr_circle = current
.append("circle")
.attr("r", 1.5)
.style("fill", style.circle.fill)
.style("stroke", style.circle.stroke);
const curr_label_n = current
.append("text")
.attr("text-anchor", "right")
.attr("dy", ".35em")
.attr("pointer-events", "none")
.attr("x", 5)
.style("fill", style.circle.fill)
.style("font", ".5em sans-serif")
.text(`${data[data.length - 1].count}`);
return svg.node();
}
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.
