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:{"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":315,"value":"mta = FileAttachment(\"mta.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"$2f","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:","pinned":false,"hidden":false,"mode":"md"},{"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"}],"files":"$W30","stdlib":"1","titling":"auto"}