31:T46b,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); let areaGradient = svg.append("defs") .append("linearGradient") .attr("id","areaGradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); areaGradient.append("stop") .attr("offset", offset1) .attr("stop-color", "#f20666") .attr("stop-opacity", 0.3); areaGradient.append("stop") .attr("offset", offset2) .attr("stop-color", "#022859") .attr("stop-opacity", 0); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line); svg.append("path") .datum(data) .attr("class", "area") .style("fill", "url(#areaGradient)") .attr("d", area); svg.append("g") .call(yAxis); svg.append("g") .call(xAxis); return svg.node(); }32:T84c,style = html``33:[{"id":"c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","href":"https://static.observableusercontent.com/files/c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","name":"aapl.csv","type":"text/csv","lastModified":1637576513092.15,"size":22707}] 2f:{"title":"SLIDER AREA COLOR GRADIENT","cells":[{"id":167,"value":"# SLIDER AREA COLOR GRADIENT\n**SDI | FINLAND** The chart shows the development of the SDI by country form 1990 - 2019. SDI is an efficiency metric, designed to assess the ecological efficiency of nations in delivering human development. \n\nData source: [Gapminder](https://www.gapminder.org/data/) and [SDI](https://www.sustainabledevelopmentindex.org/)","pinned":false,"hidden":false,"mode":"md"},{"id":529,"value":"viewof offset1 = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}% color 1`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"viewof offset2 = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}% color 2`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md` ### Scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"x = d3.scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"d3.extent(data, d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"Checking on the minimum value. As the colour usage creates an effect of area chart, I choose to start at 0. ","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"md` ### Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\",\"y-axis\")\n .call(d3.axisLeft(y)\n .tickSize(-width)\n .tickValues([20, 60]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"class\",\"x-axis\")\n .call(d3.axisBottom(x)\n .tickFormat(formatDate)\n .tickPadding(0)\n .tickValues([parseDate(1990), parseDate(2019)]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md` ### Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"line = d3.line()\n .defined(d => d.value > 0)\n .x(d => x(d.date))\n .y(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"area = d3.area()\n .defined(d => d.value > 0)\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"line(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md` ### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"data = d3.tsv( \"https://gist.githubusercontent.com/sandravizz/1b93837c96e1476943e0994ef8f8b5ea/raw/0fda1dd83d8614d41e824ac1ef5afb6720075c38/SDI%2520Finland\", ({Year, SDI}) => ({date: parseDate(Year), value: +SDI})\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"parseDate = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"formatDate = d3.timeFormat(\"%Y\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md` \n---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"margin = ({top: 20, right: 20, bottom: 60, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}