Public
Edited
Apr 13
VegaLite= require ("vega-embed@6")
//combine all
allData = {
const datasets = await Promise.all([
FileAttachment("dataset-of-60s.csv").csv({ typed: true }),
FileAttachment("dataset-of-70s.csv").csv({ typed: true }),
FileAttachment("dataset-of-80s.csv").csv({ typed: true }),
FileAttachment("dataset-of-90s.csv").csv({ typed: true }),
FileAttachment("dataset-of-00s.csv").csv({ typed: true }),
FileAttachment("dataset-of-10s.csv").csv({ typed: true })
]);
const decades = ["60s", "70s", "80s", "90s", "00s", "10s"];
return datasets.flatMap((data, i) =>
data.map(d => ({ ...d, decade: decades[i] }))
);
}
// reduce the sample size from 41k to max 3000 to allow notebook to load data properly
viewof sampleSize = Inputs.range([100, 3000], {
step: 100,
value: 1000,
label: "Sample Size"
})
//randomize sampled data
sampledData = d3.shuffle(allData.slice()).slice(0, sampleSize)
// normalized the data for the parallel plots
normalizedActiveData = {
const keys = ["tempo", "chorus_hit", "duration_ms", "danceability", "energy", "valence"];
return sampledData.map(d => {
const norm = {};
keys.forEach(key => {
const values = sampledData.map(row => +row[key]).filter(v => !isNaN(v));
const min = Math.min(...values);
const max = Math.max(...values);
norm[key + "_norm"] = (+d[key] - min) / (max - min);
});
return { ...d, ...norm };
});
}
mutable brushedData = []
songsPerDecade = {
const source = (brushedData && brushedData.length > 0)
? brushedData
: normalizedActiveData;
const counts = d3.rollups(
source,
v => v.length,
d => d.decade
);
const decadeOrder = ["60s", "70s", "80s", "90s", "00s", "10s"];
return decadeOrder.map(decade => {
const match = counts.find(([d]) => d === decade);
return {
decade,
count: match ? match[1] : 0
};
});
}
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.
