chart3 = { const svg = d3 .select(DOM.svg(width, height)) .style("font", "10px sans-serif"); const infoBox = html`

Hover over an area plot to see details for this country

`; // Function to update the input box (data for new country, mouse position) const updateInfoBox = (datum, mouseX, mouseY) => { return `

Population (in Million): ${( datum.Population / 1000000 ).toFixed(0)}
Below poverty line: approx. ${datum.ppp_2011.filter( ventile => ventile < povertyThreshold ).length * 5}%
Income quantiles:
2.5%: ${datum.ppp_2011[0].toFixed(0)}$
50%: ${datum.ppp_2011[10].toFixed(0)}$
97.5%: ${datum.ppp_2011[19].toFixed(0)}$

`; }; // The main data join that sets up the groups for each country and distributes them on the y axis const g = svg .append("g") .selectAll("g") .data(grouped2) .enter() .append("g") .attr( "transform", (d, i) => `translate(0,${i * (step * (1 - overlap)) + margin.top})` ); // Clip paths for each country. Probably don't neet this anymore, this is from the horizon plot example g.append("clipPath") .attr("id", d => (d.clip = DOM.uid("clip")).id) .append("rect") .attr("width", width) .attr("height", step * heightMultiplier); // Area plots for each country g.append("defs") .append("path") .attr("id", d => (d.path = DOM.uid("path")).id) .attr("d", d => { const heightRatios = calculateHeightRatios(d.ppp_2011); const countryData = _.zipWith( d.ppp_2011, heightRatios, (ppp, heightRatio) => ({ ventileHeight: heightRatio, ppp_2011: ppp }) ); return area(countryData); }); // Partly attribute setting, partly leftover code from the horizon plot that can mirror the plot along the x axis g.append("g") .attr("clip-path", d => d.clip) .selectAll("use") .data(d => Array.from({ length: 1 }, (_, i) => Object.assign({ index: i < 1 ? -i - 1 : i - 1 }, d) ) ) .enter() .append("use") .attr("fill", d => "steelblue") .attr("opacity", 0.8) .attr("stroke", d => "white") .on("mouseover", function(d) { // Get the data associated with this rect and update the infobox const element = d3.select(this); const datum = element.datum(); mutable highlightedCountry = datum.contcod; console.log(d.offsetX, d.offsetY); console.log(element.clientLeft, element.clientTop); infoBox.innerHTML = updateInfoBox(datum, d.offsetX, d.offsetY); }) //.attr("transform", d => `translate(0,${d.index * step})`) .attr("xlink:href", d => d.path.href); // Country name labels g.append("text") .attr("x", 4) .attr("y", step * heightMultiplier) .text(d => d["Country Name"].substring(0, Math.min(d["Country Name"].length, 15)) ); // Add the x axis label svg .append('text') .attr('x', (width - margin.right - margin.left) / 2 + margin.left) .attr('y', height - 5) .attr('text-anchor', 'middle') .style('font-family', 'sans-serif') .text("Per capita income in USD at PPP"); // Add y-axis label // Red poverty line indicator marker svg .append("rect") .datum(povertyThreshold) .attr("class", "marker") .attr("x", d => x(d)) .attr("width", 1) .attr("y", margin.top) .attr("height", height - margin.bottom) .attr("fill", "red"); svg.append("g").call(xAxis); return html`

${svg.node()} ${infoBox}

`; }

${datum["Country Name"]}