chart = { const viz = html`

${continent}

Proportion of seats held by women in national parliaments (%) - 2000 to 2019.

Ordered Highest to Lowest. Hover to explore data for each year.

`; // ************************************* // Generate region average chart // ************************************* const xScaleRegion = d3 .scaleLinear() .domain([2000, 2019]) .range([0, pathWidth * m - margin]); const yScaleRegion = d3 .scaleLinear() .domain([0, 100]) .range([pathWidth * m - margin, 0]); const areaRegion = d3 .area() .defined(d => d.val != null) .curve(curve) .x(d => xScaleRegion(d.year)) .y0(yScaleRegion(0)) .y1(d => yScaleRegion(d.val)); const area1Region = d3 .area() .defined(d => d.val != null) .curve(curve) .x(d => xScaleRegion(d.year)) .y0(yScaleRegion(0)) // area transition starts from y = 0 for all x .y1(d => yScaleRegion(0)); const svg1 = d3.select(viz).select("#chart1"); d3.select(viz) .select("#chart") .append("text") .attr("class", "defaults") .text(filteredCountries[0].data[0].year) .style("font-size", "0.7em") .attr("fill", "#666") .attr("y", pathWidth + 15) .attr("x", 0); d3.select(viz) .select("#chart") .append("text") .attr("class", "defaults") .text("2019") .style("font-size", "0.7em") .attr("fill", "#666") .attr("y", pathWidth + 15) .attr("x", pathWidth - margin) .attr("text-anchor", "end"); const g1 = svg1 .selectAll("g") .data(filteredRegion) .join( enter => { const sEnter = enter.append("g"); // Create base RECT sEnter .append("rect") .attr("width", pathWidth * m - margin) .attr("height", pathWidth * m - margin) .attr("vector-effect", "non-scaling-stroke") .style("opacity", 1) .style("fill", "#fafafa"); // Create top border sEnter .append("rect") .attr("width", pathWidth * m - margin) .attr("height", 2) .attr("y", pathWidth * m - margin) .attr("vector-effect", "non-scaling-stroke") .style("opacity", 1) .style( "fill", d => continentColors.find(({ continent }) => continent === d.region) .color ) .transition() .duration(500) .attr("y", 0); // COUNTRY NAME sEnter .append("text") .text("Regional Average") .attr("text-anchor", "start") .attr("y", margin) .attr("x", 2); // YEAR 2000 VALUE sEnter .append("text") .text(d => `${Math.round(d.data[0].val)}%`) .attr( "fill", d => continentColors.find(({ continent }) => continent === d.region) .color ) .attr("y", d => yScaleRegion(d.data[0].val) - 12) .attr("x", 0) .style("opacity", 0.8); // YEAR 2019 VALUE sEnter .append("text") .text(d => `${Math.round(d.data[19].val)}%`) .attr( "fill", d => continentColors.find(({ continent }) => continent === d.region) .color ) .attr("y", d => yScaleRegion(d.data[19].val) - 12) .attr("text-anchor", "end") .attr("x", pathWidth * m - margin) .style("opacity", 0.8); // YEAR LABELS sEnter .append("text") .text("2000") .attr("fill", "#333") .attr("y", pathWidth * m - 6) .attr("x", 0) .style("opacity", 0.8) .style("font-size", "0.85em"); sEnter .append("text") .text("2019") .attr("fill", "#333") .attr("y", pathWidth * m - 6) .attr("x", pathWidth * m - margin) .style("opacity", 0.8) .style("font-size", "0.85em") .attr("text-anchor", "end"); sEnter .append("text") .text("YEAR") .attr("fill", "#333") .attr("y", pathWidth * m - 6) .attr("x", (pathWidth * m - margin) / 2) .style("opacity", 0.8) .style("font-size", "0.85em") .attr("text-anchor", "middle"); // YEAR 2019 VALUE sEnter .append("text") .text(d => `${Math.round(d.data[19].val)}%`) .attr( "fill", d => continentColors.find(({ continent }) => continent === d.region) .color ) .attr("y", d => yScaleRegion(d.data[19].val) - 12) .attr("text-anchor", "end") .attr("x", pathWidth * m - margin) .style("opacity", 0.8); // AREA CHART sEnter .append("path") .attr( "fill", d => continentColors.find(({ continent }) => continent === d.region) .color ) .attr("d", d => area1Region(d.data)) .transition() .duration(500) .attr("d", d => areaRegion(d.data)); // MEN sEnter .append("text") .text("MEN") .attr("fill", "black") .attr("y", (pathWidth * m) / 2) .attr("x", (pathWidth * m - margin) / 2) .style("opacity", 0.2) .style("font-weight", "bold") .style("font-size", "0.9em") .attr("text-anchor", "middle"); // WOMEN sEnter .append("text") .text(d => (d.region === "Middle East & North Africa" ? "" : "WOMEN")) .attr("fill", "white") .attr("y", pathWidth * m - 40) .attr("x", (pathWidth * m - margin) / 2) .style("opacity", 0.3) .style("font-size", "0.9em") .style("font-weight", "bold") .attr("text-anchor", "middle"); return sEnter; }, update => update, exit => { exit.remove(); } ); // ************************************ // Generate country charts // ************************************ const xScale = d3 .scaleLinear() .domain([2000, 2019]) .range([0, pathWidth - margin]); const yScale = d3 .scaleLinear() .domain([0, 100]) .range([pathWidth - margin, 0]); const area = d3 .area() .defined(d => d.val != null) .curve(curve) .x(d => xScale(d.year)) .y0(yScale(0)) .y1(d => yScale(d.val)); const area1 = d3 .area() .defined(d => d.val != null) .curve(curve) .x(d => xScale(d.year)) .y0(yScale(0)) // area transition starts from y = 0 for all x .y1(d => yScale(0)); const svg = d3.select(viz).select('#chart'); const g = svg .selectAll('g') .data(filteredCountries) .join( enter => { const sEnter = enter .append('g') .attr( 'transform', (d, i) => `translate(${[ (i % perRow) * pathWidth, Math.floor(i / perRow) * pathWidth + margin ]} )` ); // Create base RECT sEnter .append('rect') .attr('width', pathWidth - margin) .attr('height', pathWidth - margin) .attr('vector-effect', 'non-scaling-stroke') .style('opacity', 1) .style('fill', '#fafafa'); // Create top border sEnter .append('rect') .attr('width', pathWidth - margin) .attr('height', 2) .attr('y', pathWidth - margin) .attr('vector-effect', 'non-scaling-stroke') .style('opacity', 1) .style( 'fill', d => continentColors.find(({ continent }) => continent === d.region) .color ) .transition() .duration(500) .attr('y', 0); // COUNTRY NAME sEnter .append('text') .text(d => _.truncate(d.countryName, { length: 17 })) .style('font-size', '0.85em') .attr('text-anchor', 'start') .attr('y', 20) .attr('x', 2); // AREA CHART sEnter .append('path') .attr( "fill", d => continentColors.find(({ continent }) => continent === d.region) .color ) .attr("d", d => area1(d.data)) .transition() .duration(500) .attr("d", d => area(d.data)); // YEAR 2000 VALUE sEnter .append('text') .attr("class", "defaults") .text(d => `${Math.round(d.data[0].val)}%`) .style('font-size', '0.75em') .attr("fill", "none") .attr("stroke", "#fafafa") .attr("stroke-width", 4.5) .style("stroke-linejoin", "round") .attr('y', d => yScale(d.data[0].val) - 8) .attr('x', 0); sEnter .append('text') .attr("class", "defaults") .text(d => `${Math.round(d.data[0].val)}%`) .style('font-size', '0.75em') .attr( "fill", d => continentColors.find(({ continent }) => continent === d.region) .color ) .attr('y', d => yScale(d.data[0].val) - 8) .attr('x', 0); // YEAR 2019 VALUE sEnter .append('text') .attr("class", "defaults") .text(d => `${Math.round(d.data[19].val)}%`) .style('font-size', '0.75em') .attr("fill", "none") .attr("stroke", "#fafafa") .attr("stroke-width", 4.5) .style("stroke-linejoin", "round") .attr('y', d => yScale(d.data[19].val) - 8) .attr('text-anchor', 'end') .attr('x', pathWidth - margin); sEnter .append('text') .attr("class", "defaults") .text(d => `${Math.round(d.data[19].val)}%`) .style('font-size', '0.75em') .attr( "fill", d => continentColors.find(({ continent }) => continent === d.region) .color ) .attr('y', d => yScale(d.data[19].val) - 8) .attr('text-anchor', 'end') .attr('x', pathWidth - margin); // ************************************ // TOOLTIPS // ************************************ let trackerLine1 = sEnter .append("g") .attr("class", "trackerLine") .style("display", "inline") .append("line") .attr("stroke", "#fafafa") .attr("stroke-opacity", 0.3) .attr("stroke-width", 2) .attr("y1", 30) .attr("y2", pathWidth - margin) .attr("x1", 0) .attr("x2", 0); let trackerLine2 = sEnter .append("g") .attr("class", "trackerLine") .style("display", "inline") .append("line") .attr("stroke", "#fafafa") .attr("stroke-opacity", 0.3) .attr("stroke-width", 2) .attr("y1", 30) .attr("y2", pathWidth - margin) .attr("x1", 0) .attr("x2", 0); let trackerYear = sEnter .append("g") .attr("class", "trackerLine") .style("display", "inline") .append("text") .attr("fill", "#666") .attr("class", "yr") .attr("y", pathWidth - margin + 15) .style('font-size', '0.7em'); let trackerValBase = sEnter .append("g") .attr("class", "trackerLine") .style("display", "inline") .append("text") .attr("fill", "none") .attr("stroke", "#fafafa") .attr("stroke-width", 4.5) .style("stroke-linejoin", "round") .attr("class", "val") .attr("y", pathWidth - margin + 12) .style('font-size', '0.75em') .attr("text-anchor", "middle"); let trackerVal = sEnter .append("g") .attr("class", "trackerLine") .style("display", "inline") .append("text") .attr( "fill", d => continentColors.find(({ continent }) => continent === d.region) .color ) .attr("class", "val") .attr("y", pathWidth - margin + 12) .style('font-size', '0.75em') .attr("text-anchor", "middle"); sEnter .append("rect") .attr("class", "overlay") .attr("opacity", 0) .attr("width", pathWidth - margin) .attr("height", pathWidth - margin) .on("mouseover", function() { d3.selectAll(".trackerLine").style("visibility", "visible"); d3.selectAll(".defaults").style("visibility", "hidden"); }) .on("mouseout", function() { d3.selectAll(".trackerLine").style("visibility", "hidden"); d3.selectAll(".defaults").style("visibility", "visible"); }) .on("mousemove", mousemove); let bisect = d3.bisector(d => d.year); function mousemove() { let yr1 = Math.trunc(xScale.invert(d3.mouse(this)[0])); let yr2 = Math.trunc(xScale.invert(d3.mouse(this)[0]) + 1); // console.log(xScale(yr)); trackerLine1.attr("transform", `translate(${xScale(yr1)},0)`); trackerLine2.attr("transform", `translate(${xScale(yr2)},0)`); trackerYear.attr("transform", `translate(${xScale(yr1) + 3},0)`); d3.selectAll(".yr") .text(yr2) .attr("text-anchor", "middle"); let index = bisect.right(filteredCountries[1].data, yr1); d3.selectAll(".val") .text(d => `${Math.round(d.data[index].val)}%`) .attr("x", xScale(yr1) + 3) .attr("y", d => yScale(d.data[index].val) - 8); } return sEnter; }, update => update, exit => { exit.remove(); } ); return viz; }