2a:null 2b:["$","title",null,{"children":"Variable-color line | D3 | Observable"}] 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:{"id":"c5f25598d656a399","slug":"variable-color-line","title":"Variable-color line","thumbnail":"1a6669d976dbbc9698663735431282c2311aa2e57d55ec356a1b60da45524372","access_level":"public","create_time":"$D2019-12-12T17:32:17.235Z","update_time":"$D2023-08-01T14:28:45.496Z","view_time":null,"first_public_time":"$D2019-12-12T17:54:28.913Z","fork":false,"stars":44,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":209,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[{"id":"1d201eda1da733b6","reply_to_id":null,"content":"Hi there, I have some trouble on using 'x.ticks()' method. It would be the method return xAxis domain value list, but console say 'x.ticks' is not function. (can't find this method)\nIs there any clue on this error?","create_time":"$D2021-10-18T09:22:42.739Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e1a06fbe541d3fbd","login":"boolhwi","name":"","avatar_url":"https://avatars.githubusercontent.com/u/56704659?v=4","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":85,"collection":{"id":"1b0fbc3b1939d7fa","slug":"gallery","title":"Gallery","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":36,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"data = FileAttachment(\"fcm.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":179,"value":"Or, using [Observable Plot](/plot/)’s concise API:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"