30:T889,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('La vida de les presidentes...') .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('Presidencia') .attr('x', legendRectSize * 5) .attr('y', legendRectSize * 2 + 10) .attr('text-anchor', 'middle') .attr('class', 'legendLabel'); var legendLifespanLabel = legend .append('text') .text('Vida') .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:T1ded,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", (d) => (d.alive ? colorLifespanAlive : 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", (d) => coloreaPartidos(d.partido == "peronismo" ? 1 : 0)) .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 === maxYear ? "" : 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", (d) => (d.alive ? colorTextAlive : 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("Presidentes vivos") .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("opacity", 0.7) .attr("stroke-width", "1px"); var graphPrevious = svg .append("g") .append("svg:path") .attr("d", linePrevious(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", 3) .attr("fill", "#fff") .attr("stroke", colorCircle) .attr("opacity", 0.7) .attr("stroke-width", "1px"); var circlePrevious = 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") .attr("opacity", 0.7) .style("font-size", "14px"); var countLabelPrevious = 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", (d) => d.alive ? colorLifespanAlive : colorLifespan ); d3.selectAll(".term").attr("fill", (d) => coloreaPartidos(d.partido == "peronismo" ? 1 : 0) ); d3.selectAll(".nameLabel") .attr("fill", (d) => (d.alive ? colorTextAlive : 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)); circlePrevious.attr("cx", xval + 1).attr("cy", yprevious); countLabelPrevious .attr("x", xval + 1) .attr("y", yprevious - 10) .text(~~y.invert(yprevious)); 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:[{"id":"ab76e863fcb748be1eeda75c2f47523dcd0c140ca70472882c9506faba27417013db3d986e10bf91f448d50c3e505e0807f1ffb5be82d07c3c12dec51a044008","href":"https://static.observableusercontent.com/files/ab76e863fcb748be1eeda75c2f47523dcd0c140ca70472882c9506faba27417013db3d986e10bf91f448d50c3e505e0807f1ffb5be82d07c3c12dec51a044008","name":"Presidentes Historicos - Argentina.csv","type":"text/csv","lastModified":1759181364399.76,"size":5831},{"id":"ab76e863fcb748be1eeda75c2f47523dcd0c140ca70472882c9506faba27417013db3d986e10bf91f448d50c3e505e0807f1ffb5be82d07c3c12dec51a044008","href":"https://static.observableusercontent.com/files/ab76e863fcb748be1eeda75c2f47523dcd0c140ca70472882c9506faba27417013db3d986e10bf91f448d50c3e505e0807f1ffb5be82d07c3c12dec51a044008","name":"Presidentes Historicos - Argentina@1.csv","type":"text/csv","lastModified":1759181371630.9,"size":5831},{"id":"8140f0461e2080476ded9317a03e3f09dbc3206a3ca6c1b51f7ebb15b024fea9bd9428a64f722fb40ee49d73491a311adbff6fcdc984edb7ca9fcaaacbae2738","href":"https://static.observableusercontent.com/files/8140f0461e2080476ded9317a03e3f09dbc3206a3ca6c1b51f7ebb15b024fea9bd9428a64f722fb40ee49d73491a311adbff6fcdc984edb7ca9fcaaacbae2738","name":"presidentes@2.csv","type":"text/csv","lastModified":1613314739389.766,"size":5724}] 2e:{"title":"Presidentes vivos.","cells":[{"id":0,"value":"md`# Presidentes vivos.\n[sourced from Ravi.io](http://www.ravi.io/living-us-presidents-2)\n\nInspirado al escuchar el podcast La Banda Presidencial, que recomiendo mucho y esta visualización sirve para tener a mano mientras lo escuchan.\n\n[La Banda Presidencial de Camila Perochena, Santiago Rodriguez Rey et al](https://podcasts.google.com/feed/aHR0cHM6Ly9hdWRpb2Jvb20uY29tL2NoYW5uZWxzLzQ5OTUwMDIucnNz)\n\nEn el grafico de linea se ven los presidentes vivos totales en cada año (celeste) y los presidentes con al menos 1 mandato cumplido vivos (Azul)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"mutable xPos = null","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+5])\n .range([margin, width - margin])","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"y = d3\n .scaleLinear()\n .domain([0, maxNum])\n .range([headerHeight, margin])","pinned":false,"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.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"coloreaPartidos = d3.scaleOrdinal().range([\"#e9806e\", colorTerm]).domain([1, 0])","pinned":false,"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":834,"value":"uniqueNames = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"data = d3\n .csvParse(\n await FileAttachment(\"Presidentes Historicos - Argentina@1.csv\").text()\n )\n .slice(-41)\n .map((d, i) => {\n return {\n number: i,\n name: d.Nombre,\n pres_start: +d.start.slice(0, 4),\n pres_end: +d.end.slice(0, 4),\n born: +d.dateOfBirth.slice(0, 4),\n died: +d.dateOfDeath.slice(0, 4) ? +d.dateOfDeath.slice(0, 4) : maxYear,\n partido: d.partidoGral,\n duplicate: false,\n alive: d.dateOfDeath ? 0 : 1\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"Plot.plot({\n color: {\n range: [\"red\", \"orange\", \"purple\", \"red\", \"gray\", \"blue\"],\n legend: true\n },\n width: width,\n height: 600,\n marks: [\n Plot.rect(\n data.filter((d) => d.pres_start > 1959),\n { x1: \"pres_start\", x2: \"pres_end\", fill: \"partido\", y1: 0, y2: 3 }\n ),\n Plot.ruleX(\n data.filter((d) => d.pres_start > 1959),\n { x: \"pres_start\", stroke: \"partido\", y1: 0, y2: 50 }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"data.forEach(d=>{\n uniqueNames.push(d.name);\n console.log(uniqueNames,uniqueNames.filter(r=>r.name == d.name))\n d.duplicate = uniqueNames.filter(r=>r.name == d.name).length>1?true:false\n}\n)","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 = new Date().getFullYear()","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.25) {\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 = 50","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 = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof colorLifespan = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"viewof colorLifespanAlive = 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":848,"value":"viewof colorTextAlive = 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":55,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}