29:null 2a:["$","title",null,{"children":"Threshold encoding | Demo workspace | Observable"}] 2f:T8d8,chart = { const width = 928; const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 100; const x = d3 .scaleUtc() .domain(d3.extent(mta, (d) => d.Date)) .range([marginLeft, width - marginRight]); const y = d3 .scaleLinear() .domain(d3.extent(mta, (d) => d["Subways: Total Estimated Ridership"])) .nice() .range([height - marginBottom, marginTop]); const line = d3 .line() .curve(d3.curveStep) .defined((d) => !isNaN(d["Subways: Total Estimated Ridership"])) .x((d) => x(d.Date)) .y((d) => y(d["Subways: Total Estimated Ridership"])); const threshold = d3.median( mta, (d) => d["Subways: Total Estimated Ridership"] ); 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(mta) .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(); }30:[{"id":"9a14470ba5e0af46cf088ab46c9668850837be8d09b914f2a50977cc2a8d110a695b1337825641fa0d75242d88f803b75805eee2ef2e7878fc74a1cb1ce4b606","href":"https://static.observableusercontent.com/files/9a14470ba5e0af46cf088ab46c9668850837be8d09b914f2a50977cc2a8d110a695b1337825641fa0d75242d88f803b75805eee2ef2e7878fc74a1cb1ce4b606","name":"temperature.csv","type":"application/octet-stream","lastModified":1692733583592.488,"size":5873},{"id":"c7c73534f38381648a192aecca80875f7479a10a2129f87fd32fc8466b962aa0b461bbc1112eb7655b6625684b7a9ec7cb3136bb99f292a43aef9ffb45bac51b","href":"https://static.observableusercontent.com/files/c7c73534f38381648a192aecca80875f7479a10a2129f87fd32fc8466b962aa0b461bbc1112eb7655b6625684b7a9ec7cb3136bb99f292a43aef9ffb45bac51b","name":"mta.csv","type":"text/csv","lastModified":1692733597506.121,"size":82526}] 2d:{"id":"a7daf9ec54f0640b","slug":null,"title":"Threshold encoding","thumbnail":"c7e6d4fe11c0379763cd7e3db54320e8f5582b37eb134d21fa2e29517b93a7d2","access_level":"public","create_time":"$D2023-08-22T19:46:23.592Z","update_time":"$D2023-08-22T19:47:41.289Z","view_time":null,"first_public_time":"$D2023-08-22T19:46:23.592Z","fork":{"id":"9470740be73a1fec","slug":"threshold-encoding","title":"Threshold encoding","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e17611cc14a3dd8f","login":"observabledemo","name":"Demo workspace","avatar_url":"https://avatars-next.observableusercontent.com/c74bb91885bc5b01fada18b1430928de33428dc048341e06a74ebded51c9b677","tier":"starter_2024"},"version":319,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"47b2791378b7456d","login":"observabledemo","name":"Data analyst","avatar_url":"https://avatars-next.observableusercontent.com/4c9a5e7accec781c5e2b11b48e24f67ce9b7e09e2d5aa333c2c10e36f2d2eee6","tier":null}],"members":[{"type":"individual","id":"47b2791378b7456d","login":"observabledemo","name":"Data analyst","avatar_url":"https://avatars-next.observableusercontent.com/4c9a5e7accec781c5e2b11b48e24f67ce9b7e09e2d5aa333c2c10e36f2d2eee6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"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":315,"value":"mta = FileAttachment(\"mta.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$2f","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:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":255,"value":"Plot.plot({\n width,\n nice: true,\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":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"