CHART = { var svg = d3 .create('svg') .attr('width', width) .attr('height', height); yield svg.node(); var presidentsContainer = svg.append('g'); var presidents = presidentsContainer .selectAll('g') .data(dataIndividual) .enter() .append('g') .attr('class', function(d, i) { return 'president' + d.number; }) .attr('transform', function(d, i) { return 'translate(0, ' + (i * rowHeight + headerHeight + margin) + ')'; }); var lifespans = presidents .append('rect') .attr('x', function(d) { return x(d.born); }) .attr('y', rowMargin) .attr('width', function(d) { return x(d.died) - x(d.born); }) .attr('height', rowHeight - rowMargin) .attr('fill', colorLifespan) .attr('class', 'lifespan') .attr('id', function(d, i) { return 'lifespan' + d.number; }); var terms = presidents .append('rect') .attr('x', function(d) { return x(d.pres_start); }) .attr('y', rowMargin) .attr('width', function(d) { return x(d.pres_end) - x(d.pres_start); }) .attr('height', rowHeight - rowMargin) .attr('fill', colorTerm) .attr('class', 'term') .attr('id', function(d, i) { return 'term' + d.number; }); for (var i = 0; i < dataDuplicates.length; i++) { var d = dataDuplicates[i]; d3.select('.president' + d.number) .append('rect') .attr('x', x(d.pres_start)) .attr('y', rowMargin) .attr('width', x(d.pres_end) - x(d.pres_start)) .attr('height', rowHeight - rowMargin) .attr('fill', colorTerm) .attr('class', 'term') .attr('id', 'termD' + d.number); } var labels = presidents .append('text') .text(function(d) { let died = d.died === false ? '' : d.died === 2020 ? '' : Math.floor(d.died); return d.name + ' (' + d.born + ' - ' + died + ')'; }) .attr('x', function(d) { if (d.died <= d3.mean(x.domain())) return x(d.died) + 5; else return x(d.born) - 5; }) .attr('y', rowHeight - 6) .attr('dominant-baseline', 'middle') // .attr('font-size', fontSize) .attr('text-anchor', d => (d.died <= d3.mean(x.domain()) ? 'start' : 'end')) .attr('fill', colorText) .attr('class', 'nameLabel') .attr('id', function(d, i) { return 'label' + d.number; }); // LINE GRAPH var graphBg = svg .append('g') .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', width) .attr('height', headerHeight + margin) .attr('fill', '#fff'); var xAxisElem = svg .append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + y(0) + ')') .call(xAxis); var yAxisElem = svg .append('g') .attr('class', 'y axis') .attr('transform', 'translate(' + x(minYear) + ',0)') .call(yAxis); var yAxisLabel = svg .append('g') .append('text') .text('# of Presidents') .attr('x', 0) .attr('y', y(maxNum) - 6) .attr('text-anchor', 'start') .attr('dominant-baseline', 'baseline') .style('font-size', '12px'); var yearLine = svg .append('g') .append('rect') .attr('x', x(minYear)) .attr('y', y(1)) .attr('width', 1) .attr('height', rowHeight + headerHeight - y(1) + margin) .attr('fill', 'black') .attr('opacity', 0.3) .attr('class', 'yearLine'); var graphTotal = svg .append('g') .append('svg:path') .attr('d', lineTotal(counts)) .attr('stroke', colorLine) .attr('fill', 'none') .attr('stroke-width', '2px'); var circleTotal = svg .append('g') .append('circle') .attr('cx', x(minYear)) .attr('cy', y(1)) .attr('r', 4) .attr('fill', '#fff') .attr('stroke', colorCircle) .attr('stroke-width', '2px'); var countLabel = svg .append('g') .append('text') .text('') .attr('x', x(minYear)) .attr('y', y(1) - 10) .attr('text-anchor', 'middle') .attr('fill', '#000') .style('font-size', '14px'); svg.on('pointermove', function(e) { // d3.event.preventDefault(); var xval = d3.pointer(e)[0]; mutable xPos = xval; if (xval < x(minYear)) xval = x(minYear); if (xval > x(maxYear)) xval = x(maxYear); var year = x.invert(xval); if (year === Math.floor(year) && year < 2013) year += 0.1; var previous = 0, total = 0; for (var j = 0; j < data.length; j++) { if (data[j].died >= year && !data[j].duplicate) { if (data[j].pres_start <= year) previous++; if (data[j].born <= year) total++; } } var yprevious = y(previous); var ytotal = y(total); d3.selectAll('.lifespan').attr('fill', colorLifespan); d3.selectAll('.term').attr('fill', colorTerm); d3.selectAll('.nameLabel') .attr('fill', colorText) .style('font-weight', 'normal'); d3.selectAll('.diedLabel').style('opacity', 0); d3.selectAll('.legendGuide').attr('opacity', function() { if (year < 1840) return 1; if (year > 1860) return 0; return 1 - (year - 1840) / 10; }); var minFound = 0; var maxFound = 0; for (var i = 0; i < dataIndividual.length; i++) { var p = dataIndividual[i]; if (x(p.born) <= xval && x(p.died) >= xval) { d3.select('#lifespan' + p.number).attr('fill', colorLifespanHighlight); d3.select('#term' + p.number).attr('fill', colorTermHighlight); d3.select('#termD' + p.number).attr('fill', colorTermHighlight); d3.select('#label' + p.number) .attr('fill', colorTextHighlight) .style('font-weight', 'bold'); d3.select('#died' + p.number).style('opacity', 1); if (p.number < minFound || !minFound) minFound = p.number; if (p.number > maxFound) maxFound = p.number; } } circleTotal.attr('cx', xval + 1).attr('cy', ytotal); countLabel .attr('x', xval + 1) .attr('y', ytotal - 10) .text(~~y.invert(ytotal)); var diff = maxFound - minFound + 2; if (minFound === 1) diff = maxFound; minFound = 0 - (minFound - 2) * rowHeight; if (minFound > 0) minFound = 0; d3.select('.yearLine') .attr('x', xval) .attr('y', ytotal) .attr('height', diff * rowHeight + headerHeight - ytotal + margin); presidentsContainer .transition() .duration(500) .ease(d3.easeLinear) .attr('transform', 'translate(0, ' + minFound + ')'); }); }