31:T604,chart = { const svg = d3.select(DOM.svg(width,height)) .attr("max-width",954) .attr("viewBox",[0,0,width,height+150]) .style("background-color","#7a66a5") svg.append("image") .attr("xlink:href",img) .attr("width",width) .attr("height",height-margin.bottom) .attr("x",width/2-75) .attr("y",12) svg.append("g") .call(xAxis) .attr("color","#e0eddc") .style("font-weight","bold") .style("font-size","1.1em") svg.append("text") .attr("x",width/2) .attr("y",height-20) .style("text-anchor","middle") .text("Year") .style("fill","white") .style("font-size","1.5em") .style("font-weight","normal"); svg.append("g") .call(yAxis) .attr("color","#e0eddc") .style("font-weight","bold") .style("font-size","1.1em") svg.append("text") .attr("x",-height/2+140) .attr("y",-40) .text("Number of summits") .style("text-anchor","end") .attr("transform","rotate(-90)") .style("font-size","1.1em") .style("fill","white"); svg.append("path") .datum(data) .attr("d",line) .attr("fill","none") .style("stroke","#e0eddc") .style("stroke-width",3) svg.append("text") .attr("x",width/2) .attr("y",50) .style("font-family","Bradley Hand ITC") .text("Mount Everest Summits") .style("fill","white") .style("font-size","2.5em") .style("text-anchor","middle") return svg.node() }32:[{"id":"e0f9b3412faf5fc3ecdd0b170f7f197ed56b14a0da4f4b5ca87f2b5c0ad78eefb7ba4ca5ce9cfc619265f591c331e43f33baf62da0b83a08e35df272971e2364","href":"https://static.observableusercontent.com/files/e0f9b3412faf5fc3ecdd0b170f7f197ed56b14a0da4f4b5ca87f2b5c0ad78eefb7ba4ca5ce9cfc619265f591c331e43f33baf62da0b83a08e35df272971e2364","name":"MountEverest.png","type":"image/png","lastModified":1618945614071.384,"size":747788},{"id":"17ca1f50a9e74756831832389c375f2c4d7548116f64e823dc7cbfeae150edcb54f360eecc1b7c9ac657f19b9427ac7ce038bb36ee6a46834e02994365030220","href":"https://static.observableusercontent.com/files/17ca1f50a9e74756831832389c375f2c4d7548116f64e823dc7cbfeae150edcb54f360eecc1b7c9ac657f19b9427ac7ce038bb36ee6a46834e02994365030220","name":"summits.csv","type":"text/csv","lastModified":1618945670724.19,"size":83}] 2f:{"title":"Mount Everest Summits.","cells":[{"id":0,"value":"html`

Mount Everest Summits.

Week 4:Timeseries. Day 20:Upwards.

#30daychartchallenge

Successful summits made between 1950-2010.

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

Data Credit:\nThe Himalayan Database\n
\nImage Credt:\nPavel Novak

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"annotations = {\n chart\n const annotations = data.map((d,i)=>{\n return {\n x:x(formatYear(d.year)),\n y:y(d.count),\n dx:0,\n dy:-30,\n color:\"white\",\n className: \"show-bg\",\n note:{\n title: d.count + \" successful summits\"\n }\n }\n })\n \n const type = d3.annotationCustomType(\n d3.annotationLabel,\n {\"className\":\"custom\",\n \"connector\":{\"end\":\"dot\"},\n \"note\":{\n \"align\":\"middle\"}})\n \n const makeAnnotations = d3.annotation()\n .type(type)\n .textWrap(10)\n .annotations(annotations)\n \n d3.select(\"svg\").append(\"g\")\n .call(makeAnnotations)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"line = d3.line()\n .x(d=>x(formatYear(d.year)))\n .y(d=>y(d.count))\n .curve(d3.curveCatmullRom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"yAxis = g => g.attr(\"transform\",`translate(${margin.left-35},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.selectAll(\".tick line\")\n .clone()\n .style(\"stroke\",\"#e0eddc\")\n .attr(\"stroke-opacity\",0.4)\n .attr(\"x2\",width-margin.right-80))\n .call(g=>g.select(\".domain\").remove()) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"xAxis = g => g.attr(\"transform\",`translate(0,${height-margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"y = d3.scaleLinear()\n .domain([5,d3.max(data,d=>d.count)])\n .range([height-margin.bottom,margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"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":12,"value":"formatYear = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"margin = ({top: 120, right: 150, bottom: 80, left: 80})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"img = await FileAttachment('MountEverest.png').url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment('summits.csv').csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@6','d3-svg-annotation')","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}