Public
Edited
Sep 28, 2019
Importers
1 star
Insert cell
Insert cell
chart = {
const svg = d3.select(DOM.svg(width, height));
var color = d3.scaleOrdinal(d3.schemeCategory10);
var pack = d3.pack()
.size([width, height])
.padding(1.5);
var root = d3.hierarchy({children: data})
.sum(d => d.country_total)
var node = svg.selectAll('.node')
.data(pack(root).leaves())
.enter().append('g')
.attr('class', 'node')
.attr('transform', d => `translate(${d.x},${d.y})`);
node.append('circle')
.attr('r', d => d.r)
.attr('fill', d => {
return color(d.data.genre)
})
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
data = d3.tsv('https://gist.githubusercontent.com/lsei/d078da0a50bef08760f115e7bf24a61b/raw/9f3f1c0ab3bc86552d9ebc1b491b6970a38dbe29/top-countries-by-genre.tsv', ({country, count, genre, country_total}) => ({
country,
genre,
count: +count,
country_total: +country_total
}))
Insert cell
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