27:null 28:["$","title",null,{"children":"DATA | Lea | Observable"}] 2d:T25eb,chart = { inputStyles; const chartWidth = Math.min(width, 1000); const chartHeight = Math.max(560, chartWidth * 0.78); const margin = { top: 20, right: chartWidth < 700 ? 24 : 100, bottom: 80, left: chartWidth < 700 ? 48 : 60 }; const query = (postcodeSearch ?? "").trim().toLowerCase(); const totalCounts = data.map(d => +d["total.count"]); const minCount = d3.min(totalCounts); const maxCount = d3.max(totalCounts); const meanCount = d3.mean(totalCounts); const cleanedData = data .filter(d => d["Commute_time"] !== "NA" && d["median"] !== "NA" && d["postcode"] !== "NA" ) .map(d => { const nTube = d["n.tube"] === "NA" ? 0 : +d["n.tube"]; const count = +d["total.count"]; let level = "Medium"; if (count >= meanCount + (maxCount - meanCount) / 2) level = "High"; else if (count <= meanCount - (meanCount - minCount) / 2) level = "Low"; return { ...d, crimeLevel: level, nTube, postcodeText: String(d.postcode).toLowerCase() }; }); const visibleData = cleanedData.filter(d => selectedLevels.includes(d.crimeLevel) && selectedTubes.includes(d.nTube) ); const yExtent = d3.extent(cleanedData, d => +d["median"]); const yBuffer = (yExtent[1] - yExtent[0]) * 0.04; const yScale = d3.scaleLinear() .domain([yExtent[0] - yBuffer, yExtent[1] + yBuffer]) .range([chartHeight - margin.bottom, margin.top]) .clamp(true); const xExtent = d3.extent(cleanedData, d => +d["Commute_time"]); const xBuffer = (xExtent[1] - xExtent[0]) * 0.05; const xScale = d3.scaleLinear() .domain([xExtent[0] - xBuffer, xExtent[1] + xBuffer]) .range([margin.left, chartWidth - margin.right]); const radiusScale = d3.scaleSqrt() .domain(d3.extent(cleanedData, d => d.nTube)) .range(chartWidth < 700 ? [2, 22] : [2, 40]); const colorScale = d3.scaleDiverging() .domain([maxCount, meanCount, minCount]) .interpolator(d3.interpolateRdYlGn) .clamp(true); const yGrid = d3.axisLeft(yScale) .tickSize(-(chartWidth - margin.left - margin.right)) .tickFormat("") .ticks(chartWidth < 700 ? 3 : 4); const xGrid = d3.axisBottom(xScale) .tickSize(-(chartHeight - margin.top - margin.bottom)) .tickFormat("") .ticks(chartWidth < 700 ? 4 : 5); const yAxis = d3.axisLeft(yScale) .ticks(chartWidth < 700 ? 3 : 4) .tickSize(0); const xAxis = d3.axisBottom(xScale) .ticks(chartWidth < 700 ? 4 : 5) .tickSize(0); const svg = d3.create("svg") .attr("viewBox", [0, 0, chartWidth, chartHeight]) .attr("width", chartWidth) .attr("height", chartHeight) .style("width", "100%") .style("height", "auto") .style("display", "block") .style("margin", "0 auto") .style("background", "transparent") .style("font-family", "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"); svg.append("g") .attr("class", "grid") .attr("transform", `translate(${margin.left},0)`) .call(yGrid) .call(g => g.select(".domain").remove()) .selectAll("line") .style("stroke-dasharray", "3,3") .style("stroke", "#999") .style("stroke-opacity", 0.3); svg.append("g") .attr("class", "grid") .attr("transform", `translate(0,${chartHeight - margin.bottom})`) .call(xGrid) .call(g => g.select(".domain").remove()) .selectAll("line") .style("stroke-dasharray", "3,3") .style("stroke", "#999") .style("stroke-opacity", 0.3); svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(0, ${chartHeight - margin.bottom})`) .call(xAxis) .call(g => g.select(".domain").remove()); const tooltip = d3.select("body") .selectAll("div.tooltip") .data([null]) .join("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "#fff") .style("padding", "6px 10px") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("pointer-events", "none") .style("font", "12px sans-serif") .style("opacity", 0); const isMatch = d => !query || d.postcodeText.includes(query); const bubbles = svg.append("g") .selectAll("circle") .data(visibleData) .enter() .append("circle") .attr("cx", d => xScale(+d["Commute_time"])) .attr("cy", d => yScale(+d["median"])) .attr("r", d => radiusScale(d.nTube)) .style("fill", d => colorScale(+d["total.count"])) .style("fill-opacity", d => isMatch(d) ? 0.75 : 0.12) .style("stroke", d => isMatch(d) ? "#222" : "#999") .style("stroke-width", d => isMatch(d) ? 1.3 : 0.8) .style("stroke-opacity", d => isMatch(d) ? 0.9 : 0.25) .on("mouseover", (event, d) => { tooltip .style("opacity", 1) .html( `${d.postcode}: ${d.name}
Monthly Crime Count: ${d["total.count"]}
Number of Tube Stations: ${d.nTube}
Commute Time: ${d["Commute_time"]}` ); }) .on("mousemove", event => { tooltip .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY - 28}px`); }) .on("mouseout", () => { tooltip.style("opacity", 0); }); bubbles.filter(d => isMatch(d)).raise(); svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${chartWidth / 2}, ${chartHeight - 18})`) .attr("font-size", chartWidth < 700 ? 12 : 14) .attr("fill", "black") .text("Commute time (minute)"); svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(18, ${chartHeight / 2}) rotate(-90)`) .attr("font-size", chartWidth < 700 ? 12 : 14) .attr("fill", "black") .text("Median Rent"); if (chartWidth >= 700) { const legendWidth = 240; const legendHeight = 14; const legendGroup = svg.append("g") .attr("transform", `translate(${chartWidth - legendWidth - 30}, ${margin.top + 20})`); const defs = svg.append("defs"); const gradientId = "legend-gradient"; const linearGradient = defs.append("linearGradient") .attr("id", gradientId); linearGradient.selectAll("stop") .data([ { offset: "0%", t: 1 }, { offset: "50%", t: 0.5 }, { offset: "100%", t: 0 } ]) .enter() .append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d3.interpolateRdYlGn(d.t)); legendGroup.append("rect") .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", `url(#${gradientId})`) .attr("stroke", "none"); const legendScale = d3.scaleLinear() .domain([minCount, maxCount]) .range([0, legendWidth]); legendGroup.append("g") .attr("transform", `translate(0, ${legendHeight})`) .call(d3.axisBottom(legendScale).ticks(5).tickFormat(d3.format(".0f"))) .call(g => g.select(".domain").remove()); legendGroup.append("text") .attr("x", legendWidth / 2) .attr("y", legendHeight + 32) .attr("text-anchor", "middle") .attr("font-size", 11) .text("Monthly Crime Count"); const [minTube, maxTube] = d3.extent(cleanedData, d => d.nTube); const sizeLegendValues = Array.from(new Set([ Math.max(1, Math.round(minTube)), Math.round((minTube + maxTube) / 2), Math.round(maxTube) ])).filter(d => d > 0); const sizeLegend = svg.append("g") .attr("transform", `translate(${chartWidth - 120}, ${margin.top + 92})`); sizeLegend.append("text") .attr("x", 0) .attr("y", -10) .attr("font-size", 11) .attr("font-weight", 600) .text("Tube stations"); const maxLegendValue = d3.max(sizeLegendValues); const maxLegendRadius = radiusScale(maxLegendValue); sizeLegend.selectAll("circle") .data(sizeLegendValues.slice().sort(d3.descending)) .enter() .append("circle") .attr("cx", maxLegendRadius) .attr("cy", d => maxLegendRadius * 2 - radiusScale(d)) .attr("r", d => radiusScale(d)) .attr("fill", "none") .attr("stroke", "#666"); sizeLegend.selectAll("line") .data(sizeLegendValues.slice().sort(d3.descending)) .enter() .append("line") .attr("x1", maxLegendRadius * 2 + 8) .attr("x2", maxLegendRadius * 2 + 28) .attr("y1", d => maxLegendRadius * 2 - radiusScale(d) * 2) .attr("y2", d => maxLegendRadius * 2 - radiusScale(d) * 2) .attr("stroke", "#666") .attr("stroke-dasharray", "2,2"); sizeLegend.selectAll("text.size-label") .data(sizeLegendValues.slice().sort(d3.descending)) .enter() .append("text") .attr("class", "size-label") .attr("x", maxLegendRadius * 2 + 32) .attr("y", d => maxLegendRadius * 2 - radiusScale(d) * 2 + 4) .attr("font-size", 10) .attr("fill", "#333") .text(d => d); } svg.append("g") .selectAll("text.label") .data( visibleData.filter(d => chartWidth < 700 ? false : radiusScale(d.nTube) > 11 ) ) .enter() .append("text") .attr("class", "label") .attr("x", d => xScale(+d["Commute_time"])) .attr("y", d => yScale(+d["median"])) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "10px") .attr("fill", d => isMatch(d) ? "#000" : "#888") .attr("opacity", d => isMatch(d) ? 1 : 0.35) .style("pointer-events", "none") .text(d => d.postcode); return svg.node(); } 2e:Tcc0,inputStyles = { const style = document.createElement("style"); style.textContent = ` .observablehq label { font: 600 14px "Inter", "Segoe UI", system-ui, sans-serif; color: #1f2937; } .observablehq form { width: min(100%, 1000px); } .observablehq form:has(input[type="checkbox"]) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; width: 100%; } .observablehq label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; margin: 0; cursor: pointer; } .observablehq label > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .observablehq .level-pill { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; font: 600 13px "Inter", "Segoe UI", system-ui, sans-serif; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } .observablehq .level-low { background: #dcfce7; color: #166534; border-color: #86efac; } .observablehq .level-medium { background: #fef3c7; color: #92400e; border-color: #fcd34d; } .observablehq .level-high { background: #fee2e2; color: #991b1b; border-color: #fca5a5; } .observablehq label:has(> input[type="checkbox"]:checked) .level-low { background: #86efac; color: #14532d; border-color: #4ade80; } .observablehq label:has(> input[type="checkbox"]:checked) .level-medium { background: #fcd34d; color: #78350f; border-color: #f59e0b; } .observablehq label:has(> input[type="checkbox"]:checked) .level-high { background: #fca5a5; color: #7f1d1d; border-color: #ef4444; } .observablehq .tube-pill { display: inline-block; min-width: 30px; padding: 8px 14px; text-align: center; border-radius: 999px; border: 1px solid #d1d5db; background: #e5e7eb; color: #374151; font: 600 13px "Inter", "Segoe UI", system-ui, sans-serif; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } .observablehq label:has(> input[type="checkbox"]:checked) .tube-pill { background: #4b5563; color: #fff; border-color: #374151; } .observablehq input[type="search"], .observablehq input[type="text"] { width: min(100%, 360px); padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; color: #111827; font: 500 14px "Inter", "Segoe UI", system-ui, sans-serif; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .observablehq input[type="search"]:focus, .observablehq input[type="text"]:focus { border-color: #4b5563; box-shadow: 0 0 0 4px rgba(75, 85, 99, 0.12); } .observablehq input[type="search"]::placeholder, .observablehq input[type="text"]::placeholder { color: #9ca3af; } `; document.head.appendChild(style); invalidation.then(() => style.remove()); return null; } 2f:[{"id":"4db303fe4ff22e4b6c77af113fee0d678c56fdd1b5c8fba85178de37f1a74434a40140abfd130b9a11cd07dd9379ca74538785aa0f1454930c62e909312e49cf","href":"https://static.observableusercontent.com/files/4db303fe4ff22e4b6c77af113fee0d678c56fdd1b5c8fba85178de37f1a74434a40140abfd130b9a11cd07dd9379ca74538785aa0f1454930c62e909312e49cf","name":"dataforviz.csv","type":"text/csv","lastModified":1751968082390.207,"size":3707}] 2b:{"id":"cef6ed901686a32d","slug":null,"title":"DATA","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-07-08T09:47:18.466Z","update_time":"$D2026-03-13T17:46:49.158Z","view_time":null,"first_public_time":"$D2025-07-09T14:36:40.989Z","has_unpublished_edits":null,"fork":false,"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":272,"publish_version":null,"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":"DATA","cells":[{"id":0,"value":"# DATA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"viewof selectedLevels = Inputs.checkbox(\n [\"Low\", \"Medium\", \"High\"],\n {\n label: \"Crime Level Filter\",\n value: [\"Low\", \"Medium\", \"High\"],\n format: d => html`${d}`\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof selectedTubes = Inputs.checkbox(\n [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n {\n label: \"Filter by number of tube stations\",\n value: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n format: d => html`${d}`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"viewof postcodeSearch = Inputs.text({\n label: \"Search postcode\",\n placeholder: \"e.g. SW1, E14, NW10\",\n type: \"search\"\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = d3\n .csvParse(\n await FileAttachment(\"dataforviz.csv\").text(),\n d3.autoType\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"html``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"