Public
Edited
Oct 2, 2019
md`# Rolling Stones`
{
// All collaborator
// Coloured by category
const svg = d3.select(DOM.svg(width, 200));
const radius = 5;
const artist = svg.selectAll('.artist')
.data(data)
.enter()
.append('circle')
.attr('class', 'artist')
artist.attr('r', sizes.radius)
.attr('cx', ({i}) => {
const tempI = i % perLine;
return sizes.padding + tempI * (sizes.radius * 2 + sizes.gap)
})
.attr('cy', ({i}) => {
const tempI = Math.floor(i / perLine);
return sizes.padding + tempI * (sizes.radius * 2 + sizes.gap)
})
.attr('fill', d => catColorScale(d.categories[0].cat));
return svg.node()
}
{
const svg = d3.select(DOM.svg(width, 120));
const radius = 5;
const artist = svg.selectAll('.artist')
.data(roles)
.enter()
.append('circle')
.attr('class', 'artist')
artist.attr('r', sizes.radius)
.attr('cx', (d, i) => {
const tempI = i % perLine;
return sizes.padding + tempI * (sizes.radius * 2 + sizes.gap)
})
.attr('cy', (d, i) => {
const tempI = Math.floor(i / perLine);
return sizes.padding + tempI * (sizes.radius * 2 + sizes.gap)
})
.attr('fill', d => catColorScale(d.category));
return svg.node()
}
catColorScale = d3.scaleOrdinal(d3.schemeCategory10);
perLine = Math.floor((width - sizes.padding * 2) / (sizes.radius * 2 + sizes.gap))
sizes = {
return {
padding: 50,
gap: 2,
radius: 3,
}
}
height = width/2
topCategories = (roles) => {
return Object.values(roles.reduce((acc, cur) => {
const cat = roleToCat[cur[0]]
if(!acc[cat]) {
acc[cat] = {
cat,
count: 0
}
}
acc[cat].count += parseInt(cur[1]);
return acc;
},{})).sort((a, b) => b.count - a.count);
}
categories = [...new Set(Object.values(roleToCat))];
roleToCat = roles.reduce((acc, cur) => {
acc[cur.role] = cur.category || 'other';
return acc;
},{})
roles = d3.csvParse(roleCategoriesCSV)
roles.map(d => {
return [d.role, d.category].join(',')
}).join("++")
d3 = require("https://d3js.org/d3.v5.min.js")
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.
