30:T890,LEGEND = { let styles = html``, headerHeight = 180, legendWidth = 210, legendRectSize = 20, legendOffset = 6, height = 95; let view = DOM.svg(width, height); yield view; d3.select(view) .attr('viewBox', [0, legendWidth / 3, width, height]) .append('style') .text(styles); // LEGEND var legend = d3 .select(view) .selectAll('.legend-group') .data(['legend-group']) .join('g') .attr('class', d => d) .attr('transform', 'translate(' + 0 + ',' + headerHeight / 2 + ')'); var legendTitle = legend .append('text') .text('The Life of a President...') .attr('x', 0) .attr('y', 0) .attr('class', 'legendTitle'); var squareLifespan = legend .append('rect') .attr('x', 0) .attr('y', legendOffset) .attr('width', legendRectSize * 8) .attr('height', legendRectSize) .attr('fill', colorLifespan); var squareTerm = legend .append('rect') .attr('x', legendRectSize * 4) .attr('y', legendOffset) .attr('width', legendRectSize * 2) .attr('height', legendRectSize) .attr('fill', colorTerm); var legendTermLabel = legend .append('text') .text('Presidential Term') .attr('x', legendRectSize * 5) .attr('y', legendRectSize * 2 + 10) .attr('text-anchor', 'middle') .attr('class', 'legendLabel'); var legendLifespanLabel = legend .append('text') .text('Lifespan') .attr('x', legendRectSize * 2) .attr('y', legendRectSize * 3 + 10) .attr('text-anchor', 'middle') .attr('class', 'legendLabel'); legend .append("line") .attr('x1', legendRectSize * 5) .attr('y1', legendRectSize + legendOffset) .attr('x2', legendRectSize * 5) .attr('y2', legendRectSize * 2) .attr('stroke-width', '1px') .attr('stroke', 'black'); legend .append("line") .attr('x1', legendRectSize * 2) .attr('y1', legendRectSize + legendOffset) .attr('x2', legendRectSize * 2) .attr('y2', legendRectSize * 3) .attr('stroke-width', '1px') .attr('stroke', 'black'); yield view; }31:T1930,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 + ')'); }); }32:T1b65,data = [ { number: 1, name: 'George Washington', pres_start: 1789, pres_end: 1797, born: 1732, died: 1799, duplicate: false }, { number: 2, name: 'John Adams', pres_start: 1797, pres_end: 1801, born: 1735, died: 1826, duplicate: false }, { number: 3, name: 'Thomas Jefferson', pres_start: 1801, pres_end: 1809, born: 1743, died: 1826, duplicate: false }, { number: 4, name: 'James Madison', pres_start: 1809, pres_end: 1817, born: 1751, died: 1836, duplicate: false }, { number: 5, name: 'James Monroe', pres_start: 1817, pres_end: 1825, born: 1758, died: 1831, duplicate: false }, { number: 6, name: 'John Quincy Adams', pres_start: 1825, pres_end: 1829, born: 1767, died: 1848, duplicate: false }, { number: 7, name: 'Andrew Jackson', pres_start: 1829, pres_end: 1837, born: 1767, died: 1845, duplicate: false }, { number: 8, name: 'Martin Van Buren', pres_start: 1837, pres_end: 1841, born: 1782, died: 1862, duplicate: false }, { number: 9, name: 'William H. Harrison', pres_start: 1841, pres_end: 1841.5, born: 1773, died: 1841.5, duplicate: false }, { number: 10, name: 'John Tyler', pres_start: 1841.5, pres_end: 1845, born: 1790, died: 1862, duplicate: false }, { number: 11, name: 'James K. Polk', pres_start: 1845, pres_end: 1849, born: 1795, died: 1849.1, duplicate: false }, { number: 12, name: 'Zachary Taylor', pres_start: 1849, pres_end: 1850, born: 1784, died: 1850, duplicate: false }, { number: 13, name: 'Millard Fillmore', pres_start: 1850, pres_end: 1853, born: 1800, died: 1874, duplicate: false }, { number: 14, name: 'Franklin Pierce', pres_start: 1853, pres_end: 1857, born: 1804, died: 1869, duplicate: false }, { number: 15, name: 'James Buchanan', pres_start: 1857, pres_end: 1861, born: 1791, died: 1868, duplicate: false }, { number: 16, name: 'Abraham Lincoln', pres_start: 1861, pres_end: 1865, born: 1809, died: 1865, duplicate: false }, { number: 17, name: 'Andrew Johnson', pres_start: 1865, pres_end: 1869, born: 1808, died: 1875, duplicate: false }, { number: 18, name: 'Ulysses S. Grant', pres_start: 1869, pres_end: 1877, born: 1822, died: 1885, duplicate: false }, { number: 19, name: 'Rutherford B. Hayes', pres_start: 1877, pres_end: 1881, born: 1822, died: 1893, duplicate: false }, { number: 20, name: 'James A. Garfield', pres_start: 1881, pres_end: 1881.5, born: 1831, died: 1881.5, duplicate: false }, { number: 21, name: 'Chester A. Arthur', pres_start: 1881.5, pres_end: 1885, born: 1829, died: 1886, duplicate: false }, { number: 22, name: 'Grover Cleveland', pres_start: 1885, pres_end: 1889, born: 1837, died: 1908, duplicate: false, phrase: 'president from 1885 - 1889 and 1893 - 1897, died in 1908' }, { number: 23, name: 'Benjamin Harrison', pres_start: 1889, pres_end: 1893, born: 1833, died: 1901, duplicate: false }, { number: 22, name: 'Grover Cleveland', pres_start: 1893, pres_end: 1897, born: 1837, died: 1908, duplicate: true }, { number: 24, name: 'William McKinley', pres_start: 1897, pres_end: 1901, born: 1843, died: 1901, duplicate: false }, { number: 25, name: 'Theodore Roosevelt', pres_start: 1901, pres_end: 1909, born: 1858, died: 1919, duplicate: false }, { number: 26, name: 'William H. Taft', pres_start: 1909, pres_end: 1913, born: 1857, died: 1930, duplicate: false }, { number: 27, name: 'Woodrow Wilson', pres_start: 1913, pres_end: 1921, born: 1856, died: 1924, duplicate: false }, { number: 28, name: 'Warren G. Harding', pres_start: 1921, pres_end: 1923, born: 1865, died: 1923, duplicate: false }, { number: 29, name: 'Calvin Coolidge', pres_start: 1923, pres_end: 1929, born: 1872, died: 1933, duplicate: false }, { number: 30, name: 'Herbert Hoover', pres_start: 1929, pres_end: 1933, born: 1874, died: 1964, duplicate: false }, { number: 31, name: 'Franklin D. Roosevelt', pres_start: 1933, pres_end: 1945, born: 1882, died: 1945, duplicate: false }, { number: 32, name: 'Harry S. Truman', pres_start: 1945, pres_end: 1953, born: 1884, died: 1972, duplicate: false }, { number: 33, name: 'Dwight D. Eisenhower', pres_start: 1953, pres_end: 1961, born: 1890, died: 1969, duplicate: false }, { number: 34, name: 'John F. Kennedy', pres_start: 1961, pres_end: 1963, born: 1917, died: 1963, duplicate: false }, { number: 35, name: 'Lyndon B. Johnson', pres_start: 1963, pres_end: 1969, born: 1908, died: 1973, duplicate: false }, { number: 36, name: 'Richard M. Nixon', pres_start: 1969, pres_end: 1974, born: 1913, died: 1994, duplicate: false }, { number: 37, name: 'Gerald R. Ford', pres_start: 1974, pres_end: 1977, born: 1913, died: 2006, duplicate: false }, { number: 38, name: 'Jimmy Carter', pres_start: 1977, pres_end: 1981, born: 1924, died: false, duplicate: false }, { number: 39, name: 'Ronald Reagan', pres_start: 1981, pres_end: 1989, born: 1911, died: 2004, duplicate: false }, { number: 40, name: 'George H. W. Bush', pres_start: 1989, pres_end: 1993, born: 1924, died: 2018, duplicate: false }, { number: 41, name: 'Bill Clinton', pres_start: 1993, pres_end: 2001, born: 1946, died: false, duplicate: false }, { number: 42, name: 'George W. Bush', pres_start: 2001, pres_end: 2009, born: 1946, died: false, duplicate: false }, { number: 43, name: 'Barack Obama', pres_start: 2009, pres_end: 2016, born: 1961, died: false, duplicate: false }, { number: 44, name: 'Donald J. Trump', pres_start: 2016, pres_end: 2020, born: 1946, died: false, duplicate: false }, { number: 45, name: 'Joe Biden', pres_start: 2020, pres_end: 2024, born: 1942, died: false, duplicate: false } ].map((x, i) => { if (!x.died) x.died = maxYear; return x; })33:[] 2e:{"title":"Living Presidents","cells":[{"id":0,"value":"md`# Living Presidents\n

[sourced from Ravi.io](http://www.ravi.io/living-us-presidents-2)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"mutable xPos = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"x = d3\n .scaleLinear()\n .domain([minYear, maxYear])\n .range([margin, width - margin])","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"y = d3\n .scaleLinear()\n .domain([0, maxNum])\n .range([headerHeight, margin])","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"unitScale = d3\n .scaleBand()\n .domain(data.map(x => x.name))\n .range([margin, height - margin])\n .paddingOuter(1)\n .paddingInner(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"md`### Axis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"xAxis = d3\n .axisBottom()\n .tickFormat(d3.format('d'))\n .scale(x)\n .ticks(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"yAxis = d3\n .axisLeft()\n .tickFormat(d3.format('d'))\n .scale(y)\n .ticks(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"md`### Lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"linePrevious = d3\n .line()\n .x(d => x(d.year))\n .y(d => y(d.previous))","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"lineTotal = d3\n .line()\n .x(d => x(d.year))\n .y(d => y(d.total))","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"minYear = d3.min(\n data.map(function(d) {\n return d.born;\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"maxYear = 2020","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"dataIndividual = data.filter(d => !d.duplicate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"dataDuplicates = data.filter(d => d.duplicate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"counts = {\n let counts = [];\n for (var i = minYear; i <= maxYear; i += 0.2) {\n var previous = 0;\n var total = 0;\n var future = 0;\n for (var j = 0; j < data.length; j++) {\n if (data[j].died >= i && !data[j].duplicate) {\n if (data[j].pres_start <= i) previous++;\n if (data[j].born <= i) {\n total++;\n if (data[j].pres_start > i) future++;\n }\n }\n }\n counts.push({ year: i, previous: previous, total: total, future: future });\n }\n return counts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"md`## Configs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"margin = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"rowMargin = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"rowHeight = unitScale.bandwidth()","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"labelWidth = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"headerHeight = 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"maxNum = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof colorLifespan = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"viewof colorLifespanHighlight = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof colorTerm = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof colorTermHighlight = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof colorText = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"colorTextHighlight = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof colorLine = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof colorCircle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}