Published
Edited
Jun 21, 2020
1 star
Insert cell
Insert cell
maxCirclesInLine = 4
Insert cell
chart = {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
const g = svg.selectAll('g')
.data(nested2)
.join('g')
.attr('class', (d) => `family-${d.key}`)
.attr('fill', (d) => color(d.key))
.attr('transform', (d, i) => `translate(0, ${i * (fontSize + spacing) + i * d.nLines * 2 * radius})`)
g.append('text')
.text((d) => `Family ${d.key}`)
.attr('alignment-baseline', 'hanging')
.attr('fill', 'black')
.style('font-size', fontSize);
g.selectAll('circle')
.data((d) => d.values)
.join('circle')
.attr('cx', (d, i) => familyWidth + i % maxCirclesInLine * (radius * 2 + spacing / 4))
.attr('cy', (d, i) => radius + (radius * 2 + spacing / 4) * Math.floor(i / maxCirclesInLine))
.attr('r', radius);
return svg.node();
}
Insert cell
color = d3.scaleOrdinal()
.domain(nested2)
.range(d3.schemePastel1)
Insert cell
nested2 = {
const tmp = d3.pairs(nested).map(pair => {
pair[1].nLines = Math.ceil(pair[0].values.length / maxCirclesInLine)
return pair[1];
});
nested[0].nLines = 0
tmp.unshift(nested[0]);
return tmp;
}
Insert cell
nested = d3.nest()
.key((d) => d.family)
.sortKeys(d3.ascending)
.entries(data);
Insert cell
data = parties.map(party => ({party: party, family: families[Math.floor(Math.random() * Math.floor(3))]}))
Insert cell
families = '123'.split('')
Insert cell
parties = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
Insert cell
familyWidth = 100
Insert cell
spacing = 10
Insert cell
fontSize = 18
Insert cell
radius = fontSize / 2
Insert cell
height = 300
Insert cell
d3 = require('d3@5')
Insert cell

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.
Learn more