Master's student, developer, designer. :)
Published
Edited
Jul 26, 2019
3 forks
6 stars
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'])
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(120)
.outerRadius(200)
const part = g.selectAll('.part')
.data(pie(d3.entries(dataset)))
.enter()
.append('g')
part.append('path')
.attr('d', arc)
.attr('fill', (d, i) => color(i))
part.append("text")
.attr('transform', (d) => 'translate(' + arc.centroid(d) + ')')
.text((d) => d.data.key)
.attr('fill', 'white')
return svg.node()
}
dataset = ({ 'A': 15, 'B': 20, 'C':35, 'D': 10, 'E': 20})
margin=50
height = 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.
