28:null 29:["$","title",null,{"children":"Ridgeline plot | Lea | Observable"}] 2e:T132b,chart = { // --- Dimensions --- const width = 800; const height = 500; const margin = { top: 200, right: 40, bottom: 50, left: 120 }; // --- Prepare data --- const data = df_nco.map(d => ({ date: new Date(d.Date), group: d.Group, value: +d.Mean_res })); // --- Unique groups --- const groups = Array.from(new Set(data.map(d => d.group))); // --- Compute group minima and maxima --- const minPerGroup = new Map(); const maxPerGroup = new Map(); groups.forEach(g => { const vals = data.filter(d => d.group === g).map(d => d.value); minPerGroup.set(g, d3.min(vals)); maxPerGroup.set(g, d3.max(vals)); }); // --- Grouped lookup --- const grouped = d3.group(data, d => d.group); // --- Scales --- const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); const fy = d3.scalePoint() .domain(groups) .range([margin.top, height - margin.bottom]) .padding(1); // --- Ridge scale: auto-scale based on each group range --- const maxDiff = d3.max(groups, g => maxPerGroup.get(g) - minPerGroup.get(g)); const ridgeScale = d3.scaleLinear() .domain([0, maxDiff]) .range([0, 100]); // adjust ridge height exaggeration // --- Colour palette --- const color = d3.scaleOrdinal() .domain(groups) .range(d3.schemeBlues[Math.min(groups.length + 2, 9)].slice(1)); // --- SVG container --- const svg = d3.create("svg") .attr("width", width) .attr("height", height); // --- Draw areas + lines --- groups.forEach(group => { const gData = grouped.get(group).sort((a, b) => a.date - b.date); const minVal = minPerGroup.get(group); const area = d3.area() .x(d => x(d.date)) .y0(fy(group)) .y1(d => fy(group) - ridgeScale(d.value - minVal)) .curve(d3.curveBasis); const line = d3.line() .x(d => x(d.date)) .y(d => fy(group) - ridgeScale(d.value - minVal)) .curve(d3.curveBasis); svg.append("path") .datum(gData) .attr("fill", color(group)) .attr("stroke", "black") .attr("stroke-width", 0.7) .attr("opacity", 0.5) .attr("d", area); svg.append("path") .datum(gData) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.2) .attr("d", line); }); // --- Axes --- svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${margin.left - 10},0)`) .call(d3.axisLeft(fy)); // --- Tooltip --- const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("padding", "8px 10px") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "4px") .style("pointer-events", "none") .style("font-size", "15px") .style("font-family", "sans-serif") .style("opacity", 0); // --- Cursor elements --- const cursorLine = svg.append("line") .attr("stroke", "black") .attr("stroke-width", 1) .attr("opacity", 0); const cursorDot = svg.append("circle") .attr("r", 4) .attr("fill", "black") .attr("opacity", 0); // --- Overlay for interaction --- const overlay = svg.append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("fill", "none") .attr("pointer-events", "all"); // --- Mouse interaction --- overlay.on("mousemove", (event) => { const [mx, my] = d3.pointer(event); const date = x.invert(mx); // find nearest group band const nearestGroup = d3.least(groups, g => Math.abs(fy(g) - my)); const gData = grouped.get(nearestGroup).sort((a, b) => a.date - b.date); // nearest point in time const nearest = d3.least(gData, d => Math.abs(d.date - date)); if (!nearest) return; const minVal = minPerGroup.get(nearestGroup); const yVal = fy(nearestGroup) - ridgeScale(nearest.value - minVal); cursorLine .attr("x1", x(nearest.date)) .attr("x2", x(nearest.date)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("opacity", 1); cursorDot .attr("cx", x(nearest.date)) .attr("cy", yVal) .attr("opacity", 1); tooltip .style("opacity", 1) .html(` ${nearestGroup}
Date: ${nearest.date.toISOString().slice(0, 10)}
Restructureing to CRE ratio: ${(nearest.value * 100).toFixed(2)}% `) .style("left", event.pageX + 15 + "px") .style("top", event.pageY - 20 + "px"); }); overlay.on("mouseleave", () => { cursorLine.attr("opacity", 0); cursorDot.attr("opacity", 0); tooltip.style("opacity", 0); }); return svg.node(); }2f:[{"id":"21362dd4c4d3eab5105f7417c2c586f694e814c4f0bde5d5e0616d425b700e90d0e83993aa3a9cfa85d146d63eb3a9fe309b7c1db0184733d47e1c8c500bd182","href":"https://static.observableusercontent.com/files/21362dd4c4d3eab5105f7417c2c586f694e814c4f0bde5d5e0616d425b700e90d0e83993aa3a9cfa85d146d63eb3a9fe309b7c1db0184733d47e1c8c500bd182","name":"df_ncotoassets (1).csv","type":"text/csv","lastModified":1764454964983.22,"size":27677},{"id":"6b0995b8c4f929d689b99ad741b9614693062e813928e8f8d165c90dd3e3e6c508853faf7977aa8ef007fd1b0e3d5296b2d51dd7498f221bd915fd7c1a0a36a8","href":"https://static.observableusercontent.com/files/6b0995b8c4f929d689b99ad741b9614693062e813928e8f8d165c90dd3e3e6c508853faf7977aa8ef007fd1b0e3d5296b2d51dd7498f221bd915fd7c1a0a36a8","name":"df_res.csv","type":"text/csv","lastModified":1764454972817.607,"size":22406}] 2c:{"id":"d671a7846721530a","slug":"ridgeline-plot","title":"Ridgeline plot","thumbnail":"0dd264facbafe1b96481a7e655099dfd678ce094ef3101690953b670f9bf80e1","access_level":"public","create_time":"$D2025-11-29T22:22:44.983Z","update_time":"$D2025-11-29T22:27:21.309Z","view_time":null,"first_public_time":"$D2026-09-24T09:07:11.826Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f51b659e41e58e78","login":"lea4","name":"Lea","avatar_url":"https://avatars-next.observableusercontent.com/5a5fcd12957bebfd1423444e135596b5cc79b895d56d32d8e8f4a7328eb60da6","tier":"starter_2024"},"version":415,"publish_version":415,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ac3d13d3cbd84f5","login":"mok-lea","name":"Mok Lea","avatar_url":"https://avatars-next.observableusercontent.com/b4e150beaab57b1b27b105db6afd76433e7eb542b8f56adfa8501a183c46ac3d","tier":null}],"members":[{"type":"team","id":"f51b659e41e58e78","login":"lea4","name":"Lea","avatar_url":"https://avatars-next.observableusercontent.com/5a5fcd12957bebfd1423444e135596b5cc79b895d56d32d8e8f4a7328eb60da6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"3ac3d13d3cbd84f5","login":"mok-lea","name":"Mok Lea","avatar_url":"https://avatars-next.observableusercontent.com/b4e150beaab57b1b27b105db6afd76433e7eb542b8f56adfa8501a183c46ac3d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Ridgeline plot","cells":[{"id":0,"value":"

Ridgeline plot

D3 › Gallery

\n\n# Restructuring to CRE ratio Ridgeline plot\n- Biggest banks and smallest banks had the highest restructuring to CRE ratio post-2008\n- Bigger banks are seeing signs of increasing restructuring ratio since 2024\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"df_nco = FileAttachment(\"df_res.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"Or, using [Observable Plot](/plot/) (see [this notebook](https://observablehq.com/@observablehq/plot-ridgeline)):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"