31:[{"id":"de259092d525c13bd10926eaf7add45b15f2771a8b39bc541a5bba1e0206add4880eb1d876be8df469328a85243b7d813a91feb8cc4966de582dc02e5f8609b7","href":"https://static.observableusercontent.com/files/de259092d525c13bd10926eaf7add45b15f2771a8b39bc541a5bba1e0206add4880eb1d876be8df469328a85243b7d813a91feb8cc4966de582dc02e5f8609b7","name":"aapl.csv","type":"application/octet-stream","lastModified":1591211851576.653,"size":22707}] 2f:{"title":"Area Chart with gradient","cells":[{"id":1,"value":"md`# Area Chart with gradient\n\nThis static time series area chart shows the daily close of Apple stock *with horizontal color gradient*. Compare to a [line chart](/@d3/line-chart) and a [horizon chart](/@d3/horizon-chart-ii).\n\nData: [Yahoo Finance](https://finance.yahoo.com/lookup)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n // Gradient definition (not ideal, using HTML). TODO: refactor\n svg.append('defs')\n .html(`\n \n \n \n \n `)\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"url(#Gradient2)\")\n .attr(\"d\", area);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"html`\n \n \n \n \n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"area = d3.area()\n .curve(curve)\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"curve = d3.curveLinear","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"data = Object.assign((d3.csvParse(await FileAttachment(\"aapl.csv\").text(), d3.autoType)).map(({date, close}) => ({date, value: close})), {y: \"$ Close\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@^5.9\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}