Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
Published
Edited
Nov 14, 2019
2 stars
viewof raw = file()
raw.text()
parsed = d3.csvParse(await raw.text())
processed = {
const sorted = parsed
.filter(
d =>
d.Artist !== "" &&
d.DateAcquired !== "" &&
!/^(Unkn Graph Art|Unknown |Various |Album-)/.test(d.Artist)
)
.map(({ Artist, Department, DateAcquired }) => ({
name: Artist.split(",")[0],
category: Department,
date: DateAcquired.substr(0, 4) + '-01-01' // year only
}))
.sort((a, b) => (a.date > b.date ? 1 : a.date < b.date ? -1 : 0));
let year = sorted[0].date;
const topArtists = new Set();
const artistMap = new Map();
const recordTop = () => {
const top20 = Array.from(artistMap.entries())
.sort((a, b) => b[1] - a[1])
.slice(0, 20);
top20.forEach(([artist]) => topArtists.add(artist));
};
for (const d of sorted) {
if (d.date !== year) {
recordTop();
year = d.date;
}
artistMap.set(d.name, (artistMap.get(d.name) || 0) + 1);
}
recordTop();
return { topArtists, topItems: sorted.filter(d => topArtists.has(d.name)) };
}
computed = {
const { topArtists, topItems } = processed;
const results = [];
let year = topItems[0].date;
const artistMap = new Map();
const recordValues = () => {
for (const artist of topArtists.values()) {
const list = artistMap.get(artist);
results.push({
name: artist,
category: list && list[0].category,
value: list ? list.length : 0,
date: year
});
}
};
for (const d of topItems) {
if (year !== d.date) {
recordValues();
year = d.date;
}
if (!artistMap.has(d.name)) artistMap.set(d.name, []);
artistMap.get(d.name).push(d);
}
recordValues();
return results;
}
csv = `date,name,value,category
${computed.map(d => "" + [d.date, d.name, d.value, d.category]).join("\n")}`
d3 = require("d3@5")
import { file } from "@jashkenas/inputs"
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.
