chart = {
const svg = d3.select(DOM.svg(width, height));
const chart = svg.append('g')
.attr('transform', 'translate(' + [width/2, height/2] + ')');
angle.domain([0,data.length]);
let golden = chart.append('g')
.attr('class', 'golden-years');
let outR = y(40), inR = y(20);
golden.append('path')
.attr('d', "M0,0 m-"+outR+",0a"+outR+","+outR+",0 1,0 "+(outR*2)
+",0a "+outR+","+outR+" 0 1,0 -"+(outR*2)+",0z"
+"M0,0m-"+inR+",0a"+inR+","+inR+",0 0,1 "+(inR*2)
+",0a "+inR+","+inR+" 0 0,1 -"+(inR*2)+",0z")
.style('fill', '#fffde4');
let tickCircles = chart.append('g')
.attr('class', 'ticks-circle');
tickCircles.selectAll('circle')
.data(ticks)
.enter().append('circle')
.attr("r", function(d) {return y(d);})
.style("fill", "none")
.style("stroke", "#d7d7d7")
.style("stroke-width", function(d,i) { return i%2==1 ? 1.5 : 0.75; });
let lifesG = chart.append('g');
let dataSorted = data.sort((a,b) => (a.birth - b.birth));
let lifes = lifesG.selectAll(".life")
.data(dataSorted)
.enter().append("g")
.attr("class", "life");
lifes.append("path")
.style("stroke-dasharray", "2,2")
.style("stroke-width", 1.5)
.style("stroke", '#d7d7d7')
.attr("d", pathDash);
lifes.append("path")
.style("stroke-width",2.5)
.style('stroke', function(d){return color[d['category']]})
.style('stroke-linecap', 'round')
.attr('d', path);
lifes.append('text')
.attr('x',function(d,i){return (d['life']<90?0:(y(d['life'])-y(90))*(i>data.length/2?-1:1));})
.attr('y',3)
.text(function(d){return d['name'].toUpperCase()})
.style('fill', function(d){return color[d['category']]})
.attr('transform',function(d,i){return'rotate('+(angle(i)*180/Math.PI)
+')translate('+(maxRadius+10)+')'+(i>data.length/2?'rotate(180)':'');})
.style('font-size','8px')
.style('font-family','Open Sans')
.style('font-weight','bold')
.style('text-anchor',function(d,i){return i>data.length/2?'end':'start'});
lifes.append('path')
.style('fill', function(d){return color[d['category']]})
.attr('transform',function(d,i){
return'rotate('+(angle(i)*180/Math.PI)+')translate('+y(d['life'])+')';
})
.attr('d',function(d){return(d['death']===today)?'M0,0l0,4l3,-4l-3,-4z':''});
lifesG.selectAll('.work')
.data(dataSorted)
.enter().append('circle')
.attr('class', 'work')
.attr('cx',function(d,i){return Math.cos(angle(i))*y(d['work']);})
.attr('cy',function(d,i){return Math.sin(angle(i))*y(d['work']);})
.attr('r', 2)
.style('fill', '#1e1e1e');
var birthL = chart.append('g').attr('class', 'birth-label');
birthL.append('circle')
.attr('r', y(7))
.attr('fill', '#fff')
.attr('stroke', 'none');
birthL.append('text')
.attr('y',4)
.style('fill','#333')
.style('text-anchor', 'middle')
.text('Birth');
var yAxisG = chart.append("g")
.attr('transform', 'rotate(180)')
.attr("class", "y axis")
.call(yAxis);
yAxisG.selectAll("text")
.attr('transform', 'rotate(-180)')
.attr('dx', 6)
.attr('dy', '-0.6em')
.style('font-family','sans-serif')
.style('fill', '#777')
.style('font-size', '9px')
.style('font-weight', 700)
.style("text-anchor","middle");
yAxisG.selectAll("path,line").style('display','none');
return svg.node();
}
d3.interpolateGreys(0.9)
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.
