30:Taa5,chart = { const width = 928; const height = 500; const marginTop = 20; const marginRight = 20; const marginBottom = 30; const marginLeft = 40; // Create the scales. const x = d3.scaleUtc() .domain(d3.extent(data, d => d.date)) .rangeRound([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain(d3.extent(data, d => d.temperature)).nice() .rangeRound([height - marginBottom, marginTop]); const color = d3.scaleOrdinal(conditions.keys(), Array.from(conditions.values(), d => d.color)) .unknown("black"); // Create the path generator. const line = d3.line() .curve(d3.curveStep) .x(d => x(d.date)) .y(d => y(d.temperature)); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Append the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").append("tspan").text(data.y)); // Create the grid. svg.append("g") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", marginTop) .attr("y2", height - marginBottom)) .call(g => g.append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", marginLeft) .attr("x2", width - marginRight)); // Create the linear gradient. const colorId = DOM.uid("color"); svg.append("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) .attr("stop-color", d => color(d.condition)); // Create the main path. 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", line); return Object.assign(svg.node(), {scales: {color}}); }31:[{"id":"3c4b6b43821cf64b904be1df83d2b74b2cd9ed28742c50e5dc5c3797d5f305e141c63273a8f259f4fccb0473c924a637550ee8990582492d98ddce7cbee5484e","href":"https://static.observableusercontent.com/files/3c4b6b43821cf64b904be1df83d2b74b2cd9ed28742c50e5dc5c3797d5f305e141c63273a8f259f4fccb0473c924a637550ee8990582492d98ddce7cbee5484e","name":"fcm.csv","type":"text/csv","lastModified":1689523222736.607,"size":24983},{"id":"30babd4f74a226b6b96db05a3137bb13df1d2a3c1ab2353b901508f7f6b64dbd1f60f7511868b7431e6f6fdd1c1b2a9caf2c63bc0d61c5951be7dba62b639aac","href":"https://static.observableusercontent.com/files/30babd4f74a226b6b96db05a3137bb13df1d2a3c1ab2353b901508f7f6b64dbd1f60f7511868b7431e6f6fdd1c1b2a9caf2c63bc0d61c5951be7dba62b639aac","name":"FCM.txt","type":"text/plain","lastModified":1576171941501.666,"size":273355}] 2e:{"title":"Variable-color line","cells":[{"id":0,"value":"

Variable-color line

D3 › Gallery

\n\n# 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":"md"},{"id":77,"value":"legend = {\n const id = DOM.uid().id;\n return html`\n

${chart.scales.color.domain().map((name) => html`\n

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

`)}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"data = FileAttachment(\"fcm.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"conditions = new Map([\n [\"CLR\", {label: \"Clear\", color: \"deepskyblue\"}],\n [\"FEW\", {label: \"Few clouds\", color: \"lightskyblue\"}],\n [\"SCT\", {label: \"Scattered clouds\", color: \"lightblue\"}],\n [\"BKN\", {label: \"Broken clouds\", color: \"#aaaaaa\"}],\n [\"OVC\", {label: \"Overcast\", color: \"#666666\"}],\n [\"VV \", {label: \"Indefinite ceiling (vertical visibility)\", color: \"#666666\"}]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"Or, using [Observable Plot](/plot/)’s concise API:","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"Plot.plot({\n width: 928,\n nice: true,\n grid: true,\n color: {\n domain: [...conditions.keys()],\n range: [...conditions.values()].map((d) => d.color),\n unknown: \"black\",\n legend: true\n },\n y: {label: \"Temperature (°F)\"},\n marks: [\n Plot.line(data, {x: \"date\", y: \"temperature\", z: null, stroke: \"condition\", curve: \"step-before\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}