2c:null 2d:["$","title",null,{"children":"Road Traffic Deaths by World Bank Income Group | Urmila | Observable"}] 32: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() }33:[{"id":"7add3975a459418b46bec85cf2513ed27f2562b19455bcac103df3a2c27c3ac9b06b8f1471c45f1c9cd2d8fd0c0835a8342356c5721b0736eba1558015fa94fe","href":"https://static.observableusercontent.com/files/7add3975a459418b46bec85cf2513ed27f2562b19455bcac103df3a2c27c3ac9b06b8f1471c45f1c9cd2d8fd0c0835a8342356c5721b0736eba1558015fa94fe","name":"trends.csv","type":"text/csv","lastModified":1619472312019.72,"size":4008}] 30:{"id":"0addda9235f6a0ef","slug":"road-traffic-deaths-by-world-bank-income-group","title":"Road Traffic Deaths by World Bank Income Group","thumbnail":"440c47f5d6d705f00bb5935040fb70cf65d5d56959b04c0c6c2772c53be1182b","access_level":"public","create_time":"$D2021-04-26T14:45:23.998Z","update_time":"$D2021-04-27T06:57:11.503Z","view_time":null,"first_public_time":"$D2021-04-26T22:00:11.003Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"700e8d2a68a68d16","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":"starter_2024","bio":"Data visualizer here to learn, share, collaborate."},"version":220,"publish_version":220,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8b59130ff113103","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":null,"bio":"Data visualizer here to learn, share, collaborate."}],"members":[{"type":"individual","id":"a8b59130ff113103","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":null,"role":"editor"}],"comments":[{"id":"0cf39308317e8691","reply_to_id":null,"content":"You may want to add a legend explaining that yellow = men, red = women","create_time":"$D2021-04-27T01:37:20.995Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"043e5f95e13c0b1e","slug":"30daychartchallenge","title":"#30DayChartChallenge","owner":{"id":"700e8d2a68a68d16","login":"urmilaj","name":"Urmila"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html`

Data Credit:\nWorld Health Organisation\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"chart(group.get(\"Low-income\"), \"Low Income\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"chart(group.get(\"Lower-middle-income\"),\"Lower Middle Income\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"chart(group.get(\"Upper-middle-income\"),\"Upper Middle Income\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"chart(group.get(\"High-income\"),\"High Income\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"color = d3.scaleOrdinal()\n .range([\"#e3e077\",\"#f19087\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"yAxis = g => g.attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"y = d3.scaleLinear()\n .domain([0,50])\n .range([height-margin.bottom,margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"xAxis = g => g.attr(\"transform\",`translate(0,${height-margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"formatYear = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"margin = ({left:65,right:50,top:80,bottom:50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"group = d3.group(data,d=>d[\"World Bank income group\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = FileAttachment('trends.csv').csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"