A ♥ for data visualization + interaction
d3 = require("d3@5");
carData = fetch("https://vega.github.io/editor/data/cars.json")
.then(result => result.json());
aggregatedDimension = "Horsepower"
d3ArrayFunctions = require("d3-array@^2.2") // read more at https://github.com/d3/d3-array
groupedByYears = d3ArrayFunctions.group(carData, d => d.Year);
meanDimensionGroupedByYears = {
const meanDimensionGroupedByYears = {};
for (let [year, cars] of groupedByYears) {
const meanForThatYear = d3ArrayFunctions.mean(cars, d => d[aggregatedDimension]);
meanDimensionGroupedByYears[year] = meanForThatYear;
}
yield meanDimensionGroupedByYears;
}
svg`
<svg id="canvas">
<g class="vis">
<g class="marks"></g>
<g class="axis x"></g>
<g class="axis y"></g>
</g>
</svg>
`
width = 1000
height = 500
margin = 25
canvas = d3.select("#canvas")
// set the size of the canvas to (width x height)
vis = canvas.select(".vis")
// apply margin to the visualization by moving the container <g>, so axis labels do not overflow the canvas
years = {
const yearIterator = groupedByYears.keys();
const years = [];
let hasNext = true;
while (hasNext) {
let nextYear = yearIterator.next();
hasNext = !nextYear.done;
if (hasNext) years.push(nextYear.value);
}
yield years;
}
// scaleX = ...
listOfMeanValues = Object.values(meanDimensionGroupedByYears);
// scaleY = ...
// axisX = ...
// axisY = ...
// canvas.select ...
// canvas.select ...
// marks =
// barMark = ...
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.
