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")
.attr("width", width)
.attr("height", height)
vis = canvas.select(".vis")
.attr("transform", `translate(${margin}, ${margin})`);
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 = ...
scaleX = d3.scaleBand()
.padding(0.1)
.domain(years)
.range([0, width - 2*margin]);
listOfMeanValues = Object.values(meanDimensionGroupedByYears);
// scaleY = ...
scaleY = d3.scaleLinear().domain([0, d3.max(listOfMeanValues)*1.1]).range([height - margin * 2, 0]);
// axisX = ...
axisX = d3.axisBottom(scaleX);
// axisY = ...
axisY = d3.axisLeft(scaleY);
// canvas.select(".axis.x").call(...)
// canvas.select...
canvas.select(".axis.x")
.attr("transform", `translate(0,${height - 2*margin})`)
.call(axisX);
canvas.select(".axis.y")
.call(axisY);
marks = canvas.select(".marks");
barMark = marks.selectAll("rect.bar").data(years)
.join("rect")
.attr("class", "bar")
.attr("x", d => scaleX(d))
.attr("y", d => scaleY(meanDimensionGroupedByYears[d]))
.attr("fill", "steelblue")
.attr("width", scaleX.bandwidth())
.attr("height", d => scaleY(0) - scaleY(meanDimensionGroupedByYears[d]))
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.
