30:T850,chart = { const width = 928; const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; const x = d3.scaleUtc() .domain(d3.extent(temperatures, d => d.date)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain(d3.extent(temperatures, d => d.temperature)).nice() .range([height - marginBottom, marginTop]); const line = d3.line() .curve(d3.curveStep) .defined(d => !isNaN(d.temperature)) .x(d => x(d.date)) .y(d => y(d.temperature)); const threshold = d3.median(temperatures, d => d.temperature); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); const gradient = DOM.uid(); 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").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("°F")); svg.append("linearGradient") .attr("id", gradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", height) .selectAll("stop") .data([ {offset: y(threshold) / height, color: "red"}, {offset: y(threshold) / height, color: "black"} ]) .join("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); svg.append("path") .datum(temperatures) .attr("fill", "none") .attr("stroke", gradient) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); return svg.node(); }31:[{"id":"9a14470ba5e0af46cf088ab46c9668850837be8d09b914f2a50977cc2a8d110a695b1337825641fa0d75242d88f803b75805eee2ef2e7878fc74a1cb1ce4b606","href":"https://static.observableusercontent.com/files/9a14470ba5e0af46cf088ab46c9668850837be8d09b914f2a50977cc2a8d110a695b1337825641fa0d75242d88f803b75805eee2ef2e7878fc74a1cb1ce4b606","name":"temperature.csv","type":"application/octet-stream","lastModified":1572394093432.456,"size":5873}] 2e:{"title":"Threshold encoding","cells":[{"id":1,"value":"

Threshold encoding

D3 › Gallery

\n\n# Threshold encoding\n\nThis variation of a [line chart](/@d3/line-chart) demonstrates how to use a gradient to change the color of a line based on a *y*-threshold. When the line is above the median value, it is red; when the line is below the median value, it is black.","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"temperatures = FileAttachment(\"temperature.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"Or, with [Observable Plot](/plot/) and the [mixBlendMode](/plot/features/marks#mark-options) option on a white background:","pinned":false,"hidden":false,"mode":"md"},{"id":255,"value":"Plot.plot({\n width,\n nice: true,\n style: \"background: white;\",\n marks: [\n Plot.lineY(temperatures, { x: \"date\", y: \"temperature\", curve: \"step\" }),\n Plot.rectY(\n temperatures,\n Plot.groupZ(\n { y2: \"median\" },\n {\n y1: 68, // higher than max.\n y2: \"temperature\",\n fill: \"red\",\n mixBlendMode: \"screen\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}