31:T562,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(grid); const colorId = DOM.uid("color"); // https://github.com/observablehq/stdlib#DOM_uid svg.append("linearGradient") // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient .attr("id", colorId.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("x2", width) .selectAll("stop") .data(data) .join("stop") .attr("offset", d => x(d.date) / width) // divide width is for offset ratio .attr("stop-color", d => color(d.condition)); // use condition to map different color svg.append("path") .datum(data) .attr("fill", "none") // if fill with "red", there will be a area of redness .attr("stroke", colorId ) // https://github.com/observablehq/stdlib#DOM_uid .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); // svg.append("path") // .datum(data) // .attr("fill", "none") // .attr("stroke", colorId) // .attr("stroke-width", 2) // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") // .attr("d", line2); return svg.node(); }32:[{"id":"30babd4f74a226b6b96db05a3137bb13df1d2a3c1ab2353b901508f7f6b64dbd1f60f7511868b7431e6f6fdd1c1b2a9caf2c63bc0d61c5951be7dba62b639aac","href":"https://static.observableusercontent.com/files/30babd4f74a226b6b96db05a3137bb13df1d2a3c1ab2353b901508f7f6b64dbd1f60f7511868b7431e6f6fdd1c1b2a9caf2c63bc0d61c5951be7dba62b639aac","name":"FCM.txt","type":"text/plain","lastModified":1576943991213.058,"size":273355}] 2f:{"title":"Variable-Color Line","cells":[{"id":0,"value":"md`# Variable-Color Line\n\nThis line chart applies a gradient to color the line based on the *condition* field. For a related technique along the *y*-axis, see [gradient encoding](/@d3/gradient-encoding).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"DOM.uid().id; // create a unique id (keep running it to see the effect)","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"data.labels","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"(data.labels[0] + \"\").replace(/\"/g, \""\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"legend = {\n const id = DOM.uid().id;\n return html`\n

${color.domain().map((name, i) => html`\n

\n ${document.createTextNode(name)}\n

`)}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"color = d3.scaleOrdinal(\n data.conditions === undefined ? data.map(d => d.condition) : data.conditions, \n data.colors === undefined ? d3.schemeCategory10 : data.colors\n).unknown(\"red\") // there is no unknown data, that's why we don't see redness","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))// tickSizeInner(0)) can shrink inner tize size to nothing\n// https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_tickSizeOuter \n .call(g => g.select(\".domain\").remove()) // remove the xAxis horizontal line\n // .call(g => g.select(\".tick:last-of-type text\").append(\"tspan\").text(data.y)) // this works too","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"colorId = DOM.uid(\"color\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"// see how to use stop offset\nhtml`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"FileAttachment(\"FCM.txt\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"data = {\n const parseDate = d3.utcParse(\"%Y-%m-%d %H:%M\");\n return Object.assign(d3.csvParse(await FileAttachment(\"FCM.txt\").text(), ({valid, tmpf, skyc1}) => {\n return tmpf === \"M\" ? null : { // if null, it won't be included into data\n date: parseDate(valid),\n value: +tmpf,\n condition: skyc1\n };\n }), {\n y: \" °F\",\n conditions: [\"CLR\", \"FEW\", \"SCT\", \"BKN\", \"OVC\", \"VV \"],\n labels: [\"Clear\", \"Few clouds\", \"Scattered clouds\", \"Broken clouds\", \"Overcast\", \"Indefinite ceiling (vertical visibility)\"],\n colors: [\"deepskyblue\", \"lightskyblue\", \"lightblue\", \"#aaaaaa\", \"#666666\", \"#666666\"]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"line = d3.line()\n .curve(d3.curveStep) // without it, it is just normal smooth line; with it, it seems to be steps\n .x(d => x(d.date))\n .y(d => y(d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"line2 = d3.line()\n .curve(d3.curveStep)\n .x(d => x(d.date))\n .y(d => y(d.value * 2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.value)).nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"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\").append(\"tspan\").text(data.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"x.ticks()","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"y.ticks()","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}