Published
Edited
Oct 13, 2021
1 fork
rawData = FileAttachment("CEIP Citations_Titles_RBhargava - Programming Basics Course.csv").csv()
approvedData = rawData.filter((e) => e['Primary Approval Option'] === 'Entry Approved')
I then use a map to count the number of occurrences for each distinct Index Term
data = {
// imageine this holds a bunch of mini objects
/*
{
key: name
value: number
}
*/
const termMap = new Map();
approvedData.forEach((element) => {
const term = element['Index Term'];
// when the value already exists add one to the sum, otherwise start tracking a new value
if (termMap.has(term)) {
termMap.set(term, termMap.get(term) + 1);
} else {
termMap.set(term, 1);
}
});
// the map is no longer needed, transform it into an array of objects
return mapToObjectArray(termMap);
}
mapToObjectArray = (map) => {
const data = [];
for (const [key, value] of map) {
data.push({
name: key,
occurrences: value
});
}
return data;
}
textSizeScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.occurrences))
.range([10, 200])
.nice()
{
const div = d3.create('div')
.style('height', `${height}px`)
.style('width', `${width}px`);
div.selectAll('div')
.data(data)
.join('div')
.style('position', 'fixed')
.style('width', `${width}px`)
.style('margin-top', '-250px')
.style('display', 'none')
.style('font-size', d => `${textSizeScale(d.occurrences)}px`)
.style('text-align', 'center')
.text(d => d.name);
const move = () => {
div.selectAll('div')
.transition()
.duration(2000)
.style('marigin-top', '750px')
.style('display', 'initial')
.delay((i) => i * 10);
}
return div.node();
}
textSizeScale(data[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.
