chart = { const width = 1200; const height = 1000; const margin = { top: 20, right: 100, bottom: 100, left: 60 }; // Filter and augment data 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"]; // Clean and convert to number 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 }; // Add nTube to each record }); // Apply filters const visibleData = cleanedData.filter(d => selectedLevels.includes(d.crimeLevel) && selectedTubes.includes(d.nTube) ); // Scales const yExtent = d3.extent(cleanedData, d => d["median"]); const yBuffer = (yExtent[1] - yExtent[0]) * 0.04; // 5% buffer const yScale = d3.scaleLinear() .domain([yExtent[0] - yBuffer, yExtent[1] + yBuffer]) .range([height - margin.bottom, margin.top]) .clamp(true); const xExtent = d3.extent(cleanedData, d => d["Commute_time"]); const xBuffer = (xExtent[1] - xExtent[0]) * 0.05; // 5% buffer const xScale = d3.scaleLinear() .domain([xExtent[0] - xBuffer, xExtent[1] + xBuffer]) .range([margin.left, width - margin.right]); const radiusScale = d3.scaleSqrt() .domain(d3.extent(cleanedData, d => d.nTube)) .range([2, 40]); const colorScale = d3.scaleDiverging() .domain([maxCount, meanCount, minCount]) .interpolator(d3.interpolateRdYlGn) .clamp(true); const yGrid = d3.axisLeft(yScale) .tickSize(- (width - margin.left - margin.right)) // length of grid line: full width .tickFormat("") // hide tick labels .ticks(4); const xGrid = d3.axisBottom(xScale) .tickSize(- (height - margin.top - margin.bottom)) // length of grid line: full height .tickFormat("") .ticks(4); // Axes const yAxis = d3.axisLeft(yScale).ticks(4); const xAxis = d3.axisBottom(xScale).ticks(4); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("font-family", "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"); svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); // Tooltip const tooltip = d3.select("body") .append("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); // Draw bubbles svg.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-opacity", 0.5) .style("fill", d => colorScale(d["total.count"])) .attr("stroke", "#555") .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); }); // Axis titles svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left / 3}, ${height / 2}) rotate(-90)`) .attr("font-size", 14) .attr("fill", "black") .text("Median Rent of a 2-Bedroom"); svg.append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${width / 2}, ${height - margin.bottom / 3})`) .attr("font-size", 14) .attr("fill", "black") .text("Commute time (minute)"); // Horizontal grid lines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${margin.left},0)`) .call(yGrid) .selectAll("line") .style("stroke-dasharray", ("3,3")) // dotted line: 3px dash, 3px gap .style("stroke", "#999") .style("stroke-opacity", 0.3); // Vertical grid lines svg.append("g") .attr("class", "grid") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xGrid) .selectAll("line") .style("stroke-dasharray", ("3,3")) .style("stroke", "#999") .style("stroke-opacity", 0.3); // Legend const legendWidth = 300; const legendHeight = 15; const legendGroup = svg.append("g") .attr("transform", `translate(${(width - legendWidth * 2 + 150)}, ${margin.top + 35})`) 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", "black") .attr("stroke-width", 0.5); const legendScale = d3.scaleLinear() .domain([minCount, maxCount]) .range([0, legendWidth]); const legendAxis = d3.axisBottom(legendScale) .ticks(5) .tickFormat(d3.format(".0f")); legendGroup.append("g") .attr("transform", `translate(0, ${legendHeight})`) .call(legendAxis); legendGroup.append("text") .attr("x", legendWidth / 2) .attr("y", legendHeight + 35) .attr("text-anchor", "middle") .attr("font-size", 12) .text("Monthly Crime Count (total.count)"); // Postcode labels on large circles svg.selectAll("text.label") .data(visibleData.filter(d => 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", "#000") .text(d => d.postcode); return svg.node(); }