Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published unlisted
Edited
Sep 9, 2019
1 star
vega = require("@observablehq/vega-lite@0.1")
d3 = require("d3-array@2", "d3-time-format@2", "d3-time@1")
data = fetch("https://gist.githubusercontent.com/gganapat/5f92acc8283e703e34421ac334ecbca4/raw/91b9e6317b5755a943743bab5fe2237eb8765837/powerAug2019").then(response => response.json()).then(object => {
const data = object.series.values.dateValue;
for (const d of data) {
d.date = parseDate(d.date);
d.value = d.value === "null" ? 0 : +d.value;
}
return data;
})
parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S")
vega({
width,
height: 360,
autosize: "fit",
data: {values: data},
mark: 'line',
encoding: {
x: {field: 'date', type: 'temporal'},
y: {field: 'value', type: 'quantitative'}
}
})
vega({
width,
height: 360,
autosize: "fit",
data: {values: data},
mark: 'line',
encoding: {
x: {field: 'date', type: 'temporal', timeUnit: 'yearmonthdate'},
y: {field: 'value', type: 'quantitative', aggregate: 'sum'}
}
})
sumByDate = d3.rollup(data, data => d3.sum(data, d => d.value), d => +d3.timeDay(d.date));
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.
