2a:null 2b:["$","title",null,{"children":"Threshold encoding | D3 | Observable"}] 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:{"id":"9470740be73a1fec","slug":"threshold-encoding","title":"Threshold encoding","thumbnail":"577f28e8ace46eb27bee398e43c9a00f2fb94a20910b32ede8b8758261d31fac","access_level":"public","create_time":"$D2019-07-14T13:53:45.017Z","update_time":"$D2026-05-27T15:16:47.140Z","view_time":null,"first_public_time":"$D2019-07-14T14:08:25.804Z","fork":true,"stars":25,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":316,"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":"d9c3ff300a778c51","reply_to_id":null,"content":"Is there a particular reason to specify offset:0 and offset:1 or could I drop the first and last line altogether, like so?\n\n .selectAll(\"stop\")\n .data([\n // {offset: 0, color: \"red\"},\n {offset: y(threshold) / height, color: \"red\"},\n {offset: y(threshold) / height, color: \"black\"},\n // {offset: 1, color: \"black\"}\n ])","create_time":"$D2020-10-11T22:23:06.137Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}},{"id":"ad51cfd31800606d","reply_to_id":"d9c3ff300a778c51","content":"Apparently those lines were unnecessary in this example, so, removed. Thanks.","create_time":"$D2020-10-12T16:41:32.244Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":76,"collection":{"id":"1b0fbc3b1939d7fa","slug":"gallery","title":"Gallery","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"temperatures = FileAttachment(\"temperature.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"