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 + ')'); }); }