31:T861,chart = (data, title) => { const svg = d3.select(DOM.svg(width,height)) .style("background-color","#7b81ad") svg.append("text") .attr("x",width/2) .attr("y",40) .text(title) .style("text-anchor","middle") .style("font-size","1.5em") .style("fill","white") .style("font-family","Times New Roman") .style("font-weight","bold") svg.append("text") .attr("x",width/2) .attr("y",height-10) .style("text-anchor","middle") .style("fill","white") .style("font-family","Times New Roman") .text("Year") svg.append("text") .attr("x",-height/2-105) .attr("y",28) .text("Estimated death rate per 100,000 pop.") .attr("transform","rotate(-90)") .style("font-family","Times New Roman") .style("fill","white"); svg.append("g") .call(xAxis) .attr("color","white") svg.append("g") .call(yAxis) .attr("color","white") svg.append("path") .datum(data) .attr("d",maleArea) .attr("fill","#e3e077") .attr("stroke","none") .style("opacity",0.4) svg.append("path") .datum(data) .attr("d",maleLine) .attr("fill","none") .attr("stroke","#e3e077") .attr("stroke-width",1.5) svg.append("path") .datum(data) .attr("d",femaleArea) .attr("fill","#f19087") .attr("stroke","none") .style("opacity",0.4) svg.append("path") .datum(data) .attr("d",femaleLine) .attr("fill","none") .attr("stroke","#f19087") .attr("stroke-width",1.5) const legend = svg.append("g") .attr("transform",`translate(${width-margin.right-10},50)`) legend .selectAll("rect") .data(["Male","Female"]) .join("rect") .attr("x",-35) .attr("y",(d,i)=>i*15) .attr("width",10) .attr("height",10) .attr("fill",d=>color(d)) legend .selectAll("text") .data(["Male","Female"]) .join("text") .text(d=>d) .attr("x",-20) .attr("y",(d,i)=>i*15+10) .style("fill","white") .style("font-size","0.85em") return svg.node() }32:[{"id":"7add3975a459418b46bec85cf2513ed27f2562b19455bcac103df3a2c27c3ac9b06b8f1471c45f1c9cd2d8fd0c0835a8342356c5721b0736eba1558015fa94fe","href":"https://static.observableusercontent.com/files/7add3975a459418b46bec85cf2513ed27f2562b19455bcac103df3a2c27c3ac9b06b8f1471c45f1c9cd2d8fd0c0835a8342356c5721b0736eba1558015fa94fe","name":"trends.csv","type":"text/csv","lastModified":1619472312019.72,"size":4008}] 2f:{"title":"Road Traffic Deaths by World Bank Income Group","cells":[{"id":0,"value":"html`

Road Traffic Deaths by World Bank Income Group

Week 5 :Uncertainties. Day 26 : Trends.

#30daychartchallenge

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"html`

Data Credit:\nWorld Health Organisation\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"chart(group.get(\"Low-income\"), \"Low Income\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"chart(group.get(\"Lower-middle-income\"),\"Lower Middle Income\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"chart(group.get(\"Upper-middle-income\"),\"Upper Middle Income\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"chart(group.get(\"High-income\"),\"High Income\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"color = d3.scaleOrdinal()\n .range([\"#e3e077\",\"#f19087\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"femaleArea = d3.area()\n .x(d=>x(formatYear(d.Year)))\n .y0(d=>y(d.femaleHigh))\n .y1(d=>y(d.femaleLow))","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"maleArea = d3.area()\n .x(d=>x(formatYear(d.Year)))\n .y0(d=>y(d.maleHigh))\n .y1(d=>y(d.maleLow))","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"femaleLine = d3.line()\n .x(d=>x(formatYear(d.Year)))\n .y(d=>y(d.femaleMedian))","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"maleLine = d3.line()\n .x(d=>x(formatYear(d.Year)))\n .y(d=>y(d.maleMedian))","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"yAxis = g => g.attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"y = d3.scaleLinear()\n .domain([0,50])\n .range([height-margin.bottom,margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"xAxis = g => g.attr(\"transform\",`translate(0,${height-margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"x = d3.scaleTime()\n .domain(d3.extent(data,d=>formatYear(d.Year)))\n .range([margin.left,width-margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"formatYear = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"margin = ({left:65,right:50,top:80,bottom:50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"group = d3.group(data,d=>d[\"World Bank income group\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = FileAttachment('trends.csv').csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}