45:["$","title",null,{"children":"SLIDER AREA COLOR GRADIENT | Sandraviz | Observable"}] 4d: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(); }4e:T84c,style = html``4f:[{"id":"c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","href":"https://static.observableusercontent.com/files/c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","name":"aapl.csv","type":"text/csv","lastModified":1637576513092.15,"size":22707}] 49:{"id":"679b82f3ddbba689","slug":"slider_area_color_gradient","title":"SLIDER AREA COLOR GRADIENT","thumbnail":"4fb3e10dd7b88bf53a1628e82d9bc97b68b27f65623b7804bead6acfdb6af909","access_level":"public","create_time":"$D2021-11-22T10:19:18.738Z","update_time":"$D2024-06-10T10:25:10.673Z","view_time":null,"first_public_time":"$D2021-11-22T16:12:03.789Z","has_unpublished_edits":null,"fork":{"id":"483d4b18008c397a","slug":"line_chart","title":"d3.line( )","owner":{"id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz"}},"stars":3,"starred":false,"owner":{"type":"team","id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/e6a2480f89a40dcfbe75f19d5081ae2296848971c4b934ed0499fd3b7f1973eb","tier":"starter_2024","bio":"Data Visualisation/UI Engineer \nI'm building interactive, data-driven interfaces that help people explore, understand, and communicate complex information.","following":false},"version":618,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null,"bio":"Data Visualisation/UI Engineer \nI'm building interactive, data-driven interfaces that help people explore, understand, and communicate complex information.","following":false}],"members":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md` ### Scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"d3.extent(data, d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md` ### Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md` ### Generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"line(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md` ### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"parseDate = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"formatDate = d3.timeFormat(\"%Y\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md` \n---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"margin = ({top: 20, right: 20, bottom: 60, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null