chart = {
const svg = d3.select(DOM.svg(width, height))
svg.attr('width', width + margin + margin)
.attr('height', height + margin + margin)
const color = d3.scaleOrdinal()
.domain(dataset)
.range(['#DA3C78', '#8E44AD', '#0287D0', '#0EAC51', '#F39C12'])
// Inner Donut
////////////////////
const g = svg.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
const pie = d3.pie()
.value((d) => d.value)
const arc = d3.arc()
.innerRadius(150/2)
.outerRadius(200/2)
const part = g.selectAll('.part')
.data(pie(d3.entries(dataset)))
.enter()
.append('g')
part.append('title')
.text(function(d){
return 'something!';
})
part.append('path')
.attr('d', arc)
.attr('fill', (d, i) => color(i))
.on('click', d => console.log(d.data.key))
part.append("text")
.attr('transform', d => {
var centroid = arc.centroid(d)
var text_x = centroid[0] - 5
var text_y = centroid[1] + 5
// console.log(centroid)
console.log('translate(' + arc.centroid(d) + ')')
// return 'translate(' + arc.centroid(d) + ')'
return 'translate(' + text_x + ',' + text_y + ')'
})
.text((d) => d.data.key)
.attr('fill', 'white')
// // Outer Donut
// ////////////////////
// const g = svg.append('g')
// .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
// const pie = d3.pie()
// .value((d) => d.value)
// const arc = d3.arc()
// .innerRadius(150)
// .outerRadius(200)
// const part = g.selectAll('.part')
// .data(pie(d3.entries(dataset)))
// .enter()
// .append('g')
// part.append('title')
// .text(function(d){
// return 'something!';
// })
// part.append('path')
// .attr('d', arc)
// .attr('fill', (d, i) => color(i))
// .on('click', d => console.log(d.data.key))
// part.append("text")
// .attr('transform', (d) => 'translate(' + arc.centroid(d) + ')')
// .text((d) => d.data.key)
// .attr('fill', 'white')
return svg.node()
}
dataset = ({ 'A': 100, 'B': 20, 'C':35, 'D': 10, 'E': 20})
margin = 10
height = 500
width = 500
d3 = require("d3@5")
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.
