2f:T697,data = { const raw = await FileAttachment("medianAskingRent_All.csv").csv({typed: true}); const dateColumns = raw.columns.slice(3); const getMA = (values, N) => values.map((d, i) => { const window = values.slice(Math.max(0, i - N + 1), i + 1); return { ...d, value: d3.mean(window, w => w.value) }; }); // 1. Boroughs const boroughs = raw.filter(d => d.areaType === 'borough').map(d => { const series = dateColumns.map(date => ({ date: d3.timeParse("%Y-%m")(date), value: d[date], name: d.areaName })).filter(v => v.value > 0); return { name: d.areaName, type: 'borough', actual: series, ma3: getMA(series, 3), ma6: getMA(series, 6), lastValue: series[series.length - 1]?.value || 0 }; }); // 2. Neighborhoods const neighborhoods = raw.filter(d => d.areaType === 'neighborhood').map(d => { const series = dateColumns.map(date => ({ date: d3.timeParse("%Y-%m")(date), value: d[date], name: d.areaName })).filter(v => v.value > 0); return { name: d.areaName, borough: d.Borough, type: 'neighborhood', actual: series, ma3: getMA(series, 3), ma6: getMA(series, 6), lastValue: series.length > 0 ? series[series.length - 1].value : 0, count: series.length }; }).filter(d => d.count > 50); // 3. Mark Outliers (Top/Bottom 5%) const prices = neighborhoods.map(d => d.lastValue).sort(d3.ascending); const q05 = d3.quantile(prices, 0.05); const q95 = d3.quantile(prices, 0.95); const finalNeighborhoods = neighborhoods.map(d => ({ ...d, isOutlier: d.lastValue < q05 || d.lastValue > q95 })); return { boroughs, neighborhoods: finalNeighborhoods }; }30:T240d,chart = { const width = 928; const height = 750; const margin = {top: 150, right: 180, bottom: 60, left: 60}; // --- INTERNAL STATE --- let currentView = search.length === 1 ? "neighborhood" : "borough"; let activeBorough = search.length === 1 ? search[0].borough : null; let lockedLine = search.length === 1 ? search[0].name : null; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; background: #fff1e5; cursor: crosshair; overflow: visible;"); // Load Styles & Fonts svg.append("style").text(` @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Roboto:wght@300;400;700;900&display=swap'); .xkcd { font-family: 'Indie Flower', cursive; } .roboto { font-family: 'Roboto', sans-serif; } .tooltip-container { background: white; border: 1px solid #333; padding: 10px; font-family: 'Roboto', sans-serif; box-shadow: 4px 4px 0px rgba(0,0,0,0.1); pointer-events: none; } `); // --- UI LAYERS --- const gGrid = svg.append("g").attr("class", "grid"); const gLines = svg.append("g").attr("fill", "none"); const gAxes = svg.append("g"); const gLabels = svg.append("g").attr("class", "xkcd"); // Scrubber Elements const scrubberLine = svg.append("line") .attr("stroke", "#003366") .attr("stroke-width", 1) .attr("stroke-dasharray", "4,4") .style("opacity", 0); const focusCircle = svg.append("circle") .attr("r", 5) .attr("fill", "#003366") .attr("stroke", "white") .attr("stroke-width", 2) .style("opacity", 0); // Header / HUD const hud = svg.append("g").attr("transform", `translate(${margin.left}, 60)`); hud.append("text").attr("class", "xkcd").attr("font-size", "36px").attr("font-weight", "900").text("The Rent Is Too Damn High"); const hudInfo = hud.append("text").attr("class", "xkcd").attr("y", 35).attr("font-size", "20px").attr("fill", "#555"); // "Go Back" Button const backBtn = svg.append("g") .attr("transform", `translate(${margin.left}, 115)`) .attr("cursor", "pointer") .on("click", (event) => { event.stopPropagation(); currentView = "borough"; activeBorough = null; lockedLine = null; render(); }); backBtn.append("text").attr("class", "xkcd").attr("fill", "#003366").attr("font-size", "18px").text("← Back to All Boroughs"); // Tooltip const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .attr("class", "tooltip-container"); const x = d3.scaleTime().domain(d3.extent(data.boroughs[0].actual, d => d.date)).range([margin.left, width - margin.right]); const y = d3.scaleLinear().range([height - margin.bottom, margin.top]); const colorScale = d3.scaleLinear().range(["#ccc", "#333"]); function render() { let visibleData = currentView === "borough" ? data.boroughs : data.neighborhoods.filter(d => d.borough === activeBorough); if (currentView === "neighborhood" && hideOutliers) { visibleData = visibleData.filter(d => !d.isOutlier); } y.domain([0, d3.max(visibleData, d => d3.max(d[smoothing], v => v.value))]).nice(); colorScale.domain([d3.min(visibleData, d => d.lastValue), d3.max(visibleData, d => d.lastValue)]); backBtn.style("display", currentView === "borough" ? "none" : "block"); hudInfo.text(lockedLine ? `Locked: ${lockedLine}` : (currentView === "borough" ? "Select a borough" : `Neighborhoods in ${activeBorough}`)); // Axes & Grid gAxes.selectAll("*").remove(); gGrid.selectAll("*").remove(); gGrid.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y).ticks(6).tickSize(-width + margin.left + margin.right)) .call(g => g.select(".domain").remove()).call(g => g.selectAll("line").attr("stroke", "#e6d9ce").attr("stroke-dasharray", "2,2")).call(g => g.selectAll("text").remove()); gAxes.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x)).selectAll("text").attr("class", "roboto"); gAxes.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y).ticks(6, "$.0f")).call(g => g.select(".domain").remove()).selectAll("text").attr("class", "roboto"); const lineGen = d3.line().x(d => x(d.date)).y(d => y(d.value)).curve(d3.curveMonotoneX); const paths = gLines.selectAll("path").data(visibleData, d => d.name).join( enter => enter.append("path") .attr("d", d => lineGen(d[smoothing])) .attr("stroke", d => colorScale(d.lastValue)) .attr("stroke-width", 2.5).attr("opacity", 0.6).attr("cursor", "pointer"), update => update.transition().duration(500).attr("d", d => lineGen(d[smoothing])).attr("stroke", d => colorScale(d.lastValue)), exit => exit.remove() ); const updateLabels = (highlightedName = null) => { const activeName = lockedLine || highlightedName; const sorted = [...visibleData].sort((a,b) => b.lastValue - a.lastValue); const labelsToShow = visibleData.filter(d => d.name === sorted[0].name || d.name === sorted[sorted.length-1].name || d.name === activeName); gLabels.selectAll("text").data(labelsToShow, d => d.name).join( enter => enter.append("text").attr("x", width - margin.right + 10).attr("y", d => y(d.lastValue)).attr("dy", "0.35em") .attr("font-size", d => d.name === activeName ? "16px" : "13px").attr("fill", d => d.name === activeName ? "#003366" : "#333") .attr("font-weight", d => d.name === activeName ? "bold" : "normal").text(d => `${d.name}: $${Math.round(d.lastValue)}`), update => update.transition().duration(200).attr("y", d => y(d.lastValue)) .attr("font-size", d => d.name === activeName ? "16px" : "13px").attr("fill", d => d.name === activeName ? "#003366" : "#333").text(d => `${d.name}: $${Math.round(d.lastValue)}`), exit => exit.remove() ); }; updateLabels(); const bisect = d3.bisector(d => d.date).left; svg.on("mousemove", (event) => { const [xm, ym] = d3.pointer(event); if (xm < margin.left || xm > width - margin.right) return; const date = x.invert(xm); let target; if (lockedLine) { const d = visibleData.find(v => v.name === lockedLine); if (d) { const idx = bisect(d[smoothing], date); target = d[smoothing][idx] || d[smoothing][d[smoothing].length-1]; } } else { const currentPoints = visibleData.map(d => { const idx = bisect(d[smoothing], date); return d[smoothing][idx] || d[smoothing][d[smoothing].length-1]; }); target = d3.least(currentPoints, p => Math.hypot(y(p.value) - ym)); } if (target) { scrubberLine.attr("x1", x(target.date)).attr("x2", x(target.date)).attr("y1", margin.top).attr("y2", height - margin.bottom).style("opacity", 1); focusCircle.attr("cx", x(target.date)).attr("cy", y(target.value)).style("opacity", 1); paths.attr("stroke", d => d.name === target.name ? "#003366" : colorScale(d.lastValue)) .attr("opacity", d => d.name === target.name ? 1 : 0.1).filter(d => d.name === target.name).raise(); updateLabels(target.name); hudInfo.text(`${target.name.toUpperCase()} — ${d3.timeFormat("%B %Y")(target.date)}: $${Math.round(target.value).toLocaleString()}`); tooltip.style("visibility", "visible") .html(`

${target.name}

${d3.timeFormat("%B %Y")(target.date)}

$${Math.round(target.value).toLocaleString()}

`) .style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 20) + "px"); } }); svg.on("mouseleave", () => { if (!lockedLine) { scrubberLine.style("opacity", 0); focusCircle.style("opacity", 0); paths.attr("stroke", d => colorScale(d.lastValue)).attr("opacity", 0.6); updateLabels(null); tooltip.style("visibility", "hidden"); } }); svg.on("click", (event) => { const [xm, ym] = d3.pointer(event); const date = x.invert(xm); const currentPoints = visibleData.map(d => { const idx = bisect(d[smoothing], date); return d[smoothing][idx] || d[smoothing][d[smoothing].length-1]; }); const closest = d3.least(currentPoints, p => Math.hypot(y(p.value) - ym)); if (closest) { if (currentView === "borough") { currentView = "neighborhood"; activeBorough = closest.name; lockedLine = null; render(); } else { lockedLine = (lockedLine === closest.name) ? null : closest.name; if (!lockedLine) { scrubberLine.style("opacity", 0); focusCircle.style("opacity", 0); } render(); } } }); } render(); return svg.node(); }31:[{"id":"3b37874d51fa6f5ed367c497a3a9bea70c59e733c0b24c7fd0cab1ae55445daf96fc144a468f55e99598256c9d93f38c770be2483fc8f0bad4a16b6e86bf6e1f","href":"https://static.observableusercontent.com/files/3b37874d51fa6f5ed367c497a3a9bea70c59e733c0b24c7fd0cab1ae55445daf96fc144a468f55e99598256c9d93f38c770be2483fc8f0bad4a16b6e86bf6e1f","name":"medianAskingRent_All.csv","type":"text/csv","lastModified":1767464426512.39,"size":193638}] 2d:{"title":"\n The Rent Is Too Damn High — NYC\n ","cells":[{"id":0,"value":"title = html`\n

\n The Rent Is Too Damn High — NYC\n

\n An interactive investigation into the median monthly asking rents across the city's most populated neighborhoods from 2010 to 2025. \n Scrub through the timeline to compare specific growth trajectories.\n

`","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof search = Inputs.search(data.neighborhoods, {\n label: \"Find Neighborhood\",\n placeholder: \"Search e.g. Chelsea...\",\n format: d => d.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof smoothing = Inputs.radio(\n new Map([[\"Raw\", \"actual\"], [\"3-Mo\", \"ma3\"], [\"6-Mo\", \"ma6\"]]), \n {label: \"Smoothness\", value: \"ma3\"}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"viewof hideOutliers = Inputs.toggle({label: \"Hide Outliers (Top/Bottom 5%)\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"// Toggle for Actual vs Average lines\nviewof showMode = Inputs.checkbox(\n [\"Show Actual Neighborhoods\", \"Show Borough Average\"], \n {label: \"View Mode\", value: [\"Show Actual Neighborhoods\", \"Show Borough Average\"]}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}