30:T40e,chart = { const svg = d3.select(DOM.svg(width,height)) .attr("viewBox",[0,0,width,height]) .style("background-color","#7471a1") svg.append("g") .call(xAxis) .attr("color","#58b56b") .style("font-size","0.9em") .style("font-weight","bold"); svg.append("g") .call(yAxis) .attr("color","#58b56b") .style("font-size","0.8em") .style("font-weight","bold"); svg.append("text") .attr("x",width/2) .attr("y",height-30) .style("text-anchor","middle") .text("Year") .style("fill","#6ef32b") .style("font-weight","normal"); svg.append("text") .attr("x",-height/2+140) .attr("y",45) .text("Forest area (% of land area) in sq. km") .style("text-anchor","end") .attr("transform","rotate(-90)") .style("fill","#6ef32b"); svg.append("path") .datum(data) .attr("fill","none") .attr("stroke","#6ef32b") .attr("stroke-width",3.5) .attr("d",line) return svg.node() }31:[{"id":"b95060af511502662e296940283881cfd5ff4b727a2b1f6392dca7a1a27775ec1fc0841fc4a3bbebc9c2565e03d1153b54f32fb93a6e751f4e5a190d2df98de7","href":"https://static.observableusercontent.com/files/b95060af511502662e296940283881cfd5ff4b727a2b1f6392dca7a1a27775ec1fc0841fc4a3bbebc9c2565e03d1153b54f32fb93a6e751f4e5a190d2df98de7","name":"forestArea.csv","type":"text/csv","lastModified":1618851561705.668,"size":497}] 2e:{"title":"World Forest Area","cells":[{"id":0,"value":"html`

World Forest Area

Week 4:Timeseries. Day 19:Global Change.

#30daychartchallenge

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

Data Credit:\nThe World Bank

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"line = d3.line()\n .x(d=>x(formatYear(d.year)))\n .y(d=>y(d.area))\n .curve(d3.curveCatmullRom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"yAxis = g => g.attr(\"transform\",`translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"xAxis = g => g.attr(\"transform\",`translate(0,${height-margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data,d=>d.area))\n .range([height-margin.bottom,margin.top+50])","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"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":16,"value":"formatYear = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"margin = ({top: 20, right: 50, bottom: 80, left: 100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment(\"forestArea.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}