2b:null 2c:["$","title",null,{"children":"Krish - 1 NYC Crime Patterns: A Spatio-Temporal Analysis of Public Safety (2015-2024) - Milestone #4: Second Draft | New York University | Observable"}] 31:Ted4,## Introduction ### The Challenge of Urban Safety New York City, home to over 8 million residents and millions more visitors annually, faces the complex challenge of maintaining public safety across 302 square miles of diverse neighborhoods. Understanding crime patterns is not merely an academic exercise—it directly impacts the lives of residents, shapes urban policy, and influences resource allocation for one of the world's largest police departments. ### Why This Matters Crime data tells a story that extends far beyond statistics. For **law enforcement**, understanding when and where crimes occur enables optimal patrol scheduling and resource deployment. For **city planners**, these insights inform infrastructure decisions, from street lighting to urban development projects. For **community organizations**, crime patterns help target intervention programs where they're needed most. And for **residents**—particularly newcomers to NYC—this information is essential for making informed decisions about where to live, work, and travel. As international students ourselves, we recognize firsthand how challenging it can be to understand NYC's safety landscape when relocating to the city. Traditional crime reports, while informative, often fail to reveal the complex relationships between time, location, and crime type. Interactive visualization can bridge this gap, transforming raw data into actionable insights. ### The COVID-19 Context New York City's crime landscape has undergone significant transformation over the past decade. While overall crime declined substantially since the 1990s, recent years present a more complex picture. The COVID-19 pandemic created unprecedented disruptions: crime rates initially plummeted during lockdowns, then rebounded sharply in the following years. By 2024, crime levels remained approximately 30% higher than pre-pandemic baselines, though showing signs of stabilization. Interestingly, different crime categories show divergent trends. While murders and shootings have declined from their pandemic peaks, other categories like grand larceny and felony assault have increased significantly. Transit crime has emerged as a particular concern, even as subway ridership remains below pre-pandemic levels. These shifting patterns make spatial and temporal analysis particularly valuable right now. ### Our Approach This analysis explores eight interconnected questions about NYC crime patterns from 2015-2024, progressing from broad temporal and spatial overviews to detailed multi-dimensional analysis. Using interactive D3 visualizations, we reveal patterns that static reports cannot convey, enabling readers to understand not just *what* is happening with crime in NYC, but *where*, *when*, and *why* these patterns emerge. ### Key Findings Preview Our analysis reveals several critical insights: - **Dramatic COVID impact**: Crime dropped 40% during 2020 lockdowns before rebounding to decade-high levels in 2023-2024 - **Geographic concentration**: Brooklyn leads in total crime volume, but patterns vary significantly by borough and precinct - **Property crime dominance**: Petit larceny accounts for the largest share of incidents, with distinct spatial patterns - **Temporal predictability**: Crime shows consistent hourly patterns, peaking during afternoon hours (12-6 PM) - **Location-specific risks**: Streets account for the majority of crimes, followed by residences and transit locations - **Persistent hotspots**: Certain precincts (notably Precinct 75 in East New York, Brooklyn) consistently show elevated crime levels These findings carry important implications for policy, resource allocation, and public awareness—all of which we'll explore in detail through interactive visualizations and analysis.32:Ta62,## Data Description ### Primary Dataset: NYPD Complaint Data **Source**: NYC Open Data Portal ([NYPD Complaint Data Historic](https://data.cityofnewyork.us/Public-Safety/NYPD-Complaint-Data-Historic/qgea-i56i)) **Collection Method**: The New York Police Department collects this data from criminal complaints filed by victims, witnesses, or discovered by officers. Each record represents an official complaint and includes details extracted from NYPD complaint reports. The data is updated quarterly and represents one of the most comprehensive urban crime datasets publicly available. **Dataset Scope**: - **Time Period**: 2006-present (our analysis focuses on 2015-2024) - **Total Records**: Approximately 7+ million complaints - **Geographic Coverage**: All five boroughs of New York City (Manhattan, Brooklyn, Queens, Bronx, Staten Island) **Key Attributes Used**: *Temporal Attributes*: - \`cmplnt_fr_dt\`: Complaint date (when the crime occurred) - \`cmplnt_fr_tm\`: Complaint time (hour and minute) - Derived fields: year, month, day of week, hour bins *Spatial Attributes*: - \`boro_nm\`: Borough name (5 boroughs) - \`latitude\` / \`longitude\`: Geographic coordinates - \`addr_pct_cd\`: Police precinct code (77 precincts citywide) *Categorical Attributes*: - \`ofns_desc\`: Detailed offense description (e.g., "PETIT LARCENY", "ROBBERY") - \`law_cat_cd\`: Offense level (Felony, Misdemeanor, Violation) - \`prem_typ_desc\`: Premises type (Street, Residence, Transit, Commercial, etc.) ### Data Processing & Quality **Preprocessing Steps**: 1. **Time Range Selection**: Focused on 2015-2024 data for computational efficiency and relevance 2. **Missing Value Handling**: Filtered out records with missing critical fields (borough, coordinates for spatial analysis) 3. **Data Aggregation**: Created hourly, daily, monthly, and yearly aggregations for temporal analysis 4. **Geographic Validation**: Ensured coordinates fall within NYC boundaries **Data Quality Considerations**: - Approximately 5% of records lack geographic coordinates - Some offense descriptions show minor inconsistencies in naming conventions - Complaint dates reflect when crimes were reported, not necessarily when they occurred (though most are reported promptly) - Data represents reported crimes; actual crime rates may differ due to underreporting **Ethical Considerations**: This analysis uses aggregated data only. We do not examine or display victim or suspect demographic information to protect privacy and avoid perpetuating biases. Our focus remains on temporal and spatial patterns that can inform evidence-based policy without stigmatizing communities.33:T182d,{ const width = 960; const height = 450; const marginTop = 50; const marginRight = 40; const marginBottom = 60; const marginLeft = 70; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const x = d3.scaleTime() .domain(d3.extent(q1_filtered, d => d.date)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([0, d3.max(q1_filtered, d => d.count)]) .nice() .range([height - marginBottom, marginTop]); // Gridlines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickSize(-(width - marginLeft - marginRight)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // Gradient const gradient = svg.append("defs") .append("linearGradient") .attr("id", "area-gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#3b82f6") .attr("stop-opacity", 0.3); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#3b82f6") .attr("stop-opacity", 0.05); // Area const area = d3.area() .x(d => x(d.date)) .y0(height - marginBottom) .y1(d => y(d.count)) .curve(d3.curveMonotoneX); svg.append("path") .datum(q1_filtered) .attr("fill", "url(#area-gradient)") .attr("d", area); // Line const line = d3.line() .x(d => x(d.date)) .y(d => y(d.count)) .curve(d3.curveMonotoneX); svg.append("path") .datum(q1_filtered) .attr("fill", "none") .attr("stroke", "#2563eb") .attr("stroke-width", 2.5) .attr("d", line); // COVID annotation (only if 2020 in range) if (q1_timeRange[0] <= 2020 && q1_timeRange[1] >= 2020) { const covidDate = new Date(2020, 2); svg.append("line") .attr("x1", x(covidDate)) .attr("x2", x(covidDate)) .attr("y1", marginTop) .attr("y2", height - marginBottom) .attr("stroke", "#dc2626") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5") .attr("opacity", 0.6); svg.append("text") .attr("x", x(covidDate) + 5) .attr("y", marginTop + 20) .attr("fill", "#dc2626") .attr("font-size", "11px") .attr("font-weight", "600") .text("COVID-19 Lockdown"); } // Tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1) .attr("rx", 4) .attr("ry", 4) .attr("opacity", 0.95); tooltip.append("text") .attr("class", "tooltip-text") .attr("font-size", "12px") .attr("font-weight", "500"); // Interactive dots svg.append("g") .selectAll("circle") .data(q1_filtered) .join("circle") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.count)) .attr("r", 4) .attr("fill", "#2563eb") .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .attr("r", 6) .attr("fill", "#1d4ed8"); const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const text = `${monthNames[d.month-1]} ${d.year}: ${d.count.toLocaleString()} crimes`; tooltip.style("display", null); tooltip.select("text") .text(text) .attr("x", 10) .attr("y", 18); const bbox = tooltip.select("text").node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 5) .attr("y", bbox.y - 3) .attr("width", bbox.width + 10) .attr("height", bbox.height + 6); const xPos = x(d.date); const yPos = y(d.count) - 15; tooltip.attr("transform", `translate(${xPos},${yPos})`); }) .on("mouseout", function() { d3.select(this) .transition() .duration(200) .attr("r", 4) .attr("fill", "#2563eb"); tooltip.style("display", "none"); }); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .tickFormat(d3.timeFormat("%Y")) .ticks(d3.timeYear.every(1))) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickFormat(d => d.toLocaleString()) .ticks(8)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); // Labels svg.append("text") .attr("x", width / 2) .attr("y", height - 20) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Year"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Monthly Crime Count"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("NYC Crime Trends Over Time (2015-2024)"); return svg.node(); }34:T79d,#### Analysis and Interpretation The temporal trend reveals three distinct phases in NYC's recent crime history: **Phase 1: Pre-Pandemic Stability (2015-2019)** Crime levels remained remarkably consistent during this period, fluctuating between 30,000-40,000 monthly incidents. Regular seasonal patterns are evident, with slight increases during warmer months (summer peaks) and decreases in winter—a well-documented criminological phenomenon linked to weather, tourism, and social activity patterns. **Phase 2: COVID-19 Disruption (2020)** The pandemic's impact is unmistakable. Starting in March 2020, crime plummeted dramatically, reaching its lowest point in April 2020 with approximately 25,000 monthly incidents—a 35-40% decrease from pre-pandemic levels. This sharp decline reflects the unprecedented citywide lockdowns, reduced street activity, business closures, and population exodus from NYC. **Phase 3: Post-Pandemic Surge (2021-2024)** The recovery proved steeper than the decline. Crime began climbing in late 2020 and accelerated through 2021-2022, ultimately surpassing pre-pandemic levels. By 2023-2024, monthly crime counts reached 45,000-50,000 incidents—the highest levels in our entire dataset and approximately 25-30% above 2019 baselines. #### Key Insights and Implications **For Policy Makers**: The post-pandemic surge suggests that simply returning to pre-pandemic policing strategies may be insufficient. The 30% increase over 2019 levels demands policy innovation and potentially increased resource allocation. **For Residents**: Current crime levels represent the highest in a decade. This context is important for newcomers comparing NYC to other cities or making residential decisions. **Seasonal Predictability**: The consistency of seasonal patterns across all years suggests that temporal crime prevention strategies remain viable—increased patrols during summer months continue to make sense.35:T14e4,{ const width = 800; const height = 500; const marginTop = 60; const marginRight = 40; const marginBottom = 80; const marginLeft = 80; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const x = d3.scaleBand() .domain(q2_data.map(d => d.borough)) .range([marginLeft, width - marginRight]) .padding(0.3); const y = d3.scaleLinear() .domain([0, d3.max(q2_data, d => d.count)]) .nice() .range([height - marginBottom, marginTop]); const colorScale = d3.scaleOrdinal() .domain(q2_data.map(d => d.borough)) .range(["#1e40af", "#3b82f6", "#60a5fa", "#93c5fd", "#bfdbfe"]); // Gridlines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickSize(-(width - marginLeft - marginRight)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // Bars const bars = svg.append("g") .selectAll("rect") .data(q2_data) .join("rect") .attr("x", d => x(d.borough)) .attr("y", height - marginBottom) .attr("width", x.bandwidth()) .attr("height", 0) .attr("fill", d => colorScale(d.borough)) .attr("rx", 4) .style("cursor", "pointer"); bars.transition() .duration(800) .delay((d, i) => i * 100) .attr("y", d => y(d.count)) .attr("height", d => y(0) - y(d.count)); // Tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1.5) .attr("rx", 6) .attr("opacity", 0.95); const tooltipText = tooltip.append("text") .attr("font-size", "13px") .attr("font-weight", "600"); bars.on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .attr("opacity", 0.8) .attr("stroke", "#1e3a8a") .attr("stroke-width", 2); const text = `${d.borough}\n${d.count.toLocaleString()} crimes`; const lines = text.split('\n'); tooltip.style("display", null); tooltip.selectAll("text").remove(); lines.forEach((line, i) => { tooltip.append("text") .attr("x", 15) .attr("y", 20 + i * 18) .attr("font-size", i === 0 ? "14px" : "13px") .attr("font-weight", i === 0 ? "700" : "600") .attr("fill", i === 0 ? "#1e3a8a" : "#333") .text(line); }); const bbox = tooltip.node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 8) .attr("y", bbox.y - 5) .attr("width", bbox.width + 16) .attr("height", bbox.height + 10); tooltip.attr("transform", `translate(${x(d.borough) + x.bandwidth()/2 - bbox.width/2},${y(d.count) - bbox.height - 15})`); }) .on("mouseout", function() { d3.select(this) .transition() .duration(200) .attr("opacity", 1) .attr("stroke", "none"); tooltip.style("display", "none"); }); // Value labels svg.append("g") .selectAll("text") .data(q2_data) .join("text") .attr("x", d => x(d.borough) + x.bandwidth() / 2) .attr("y", d => y(d.count) - 8) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "600") .attr("fill", "#1e3a8a") .text(d => d.count.toLocaleString()); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "12px") .attr("font-weight", "500") .attr("color", "#333")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickFormat(d => (d / 1000) + "K") .ticks(8)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); // Labels svg.append("text") .attr("x", width / 2) .attr("y", height - 25) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Borough"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Total Crime Count"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Crime Distribution by Borough (2023-2024)"); return svg.node(); }36:T116a,{ const width = 800; const height = 600; const marginTop = 60; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f0f9ff"); // Create projection const projection = d3.geoMercator() .fitSize([width - 100, height - 100], nycBoroughsGeo); const path = d3.geoPath().projection(projection); // Create color scale const colorScale = d3.scaleSequential() .domain([0, d3.max(q2_data, d => d.count)]) .interpolator(d3.interpolateBlues); // Join crime data with geo data const boroughMap = new Map(q2_data.map(d => [d.borough.toUpperCase(), d.count])); // Tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 2) .attr("rx", 6) .attr("opacity", 0.95); // Draw boroughs svg.append("g") .selectAll("path") .data(nycBoroughsGeo.features) .join("path") .attr("d", path) .attr("fill", d => { const boroName = d.properties.boro_name.toUpperCase(); const count = boroughMap.get(boroName) || 0; return colorScale(count); }) .attr("stroke", "#333") .attr("stroke-width", 1.5) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", "#991b1b") .attr("stroke-width", 3) .attr("opacity", 0.8); const boroName = d.properties.boro_name.toUpperCase(); const count = boroughMap.get(boroName) || 0; tooltip.style("display", null); tooltip.selectAll("text").remove(); tooltip.append("text") .attr("x", 15) .attr("y", 22) .attr("font-size", "14px") .attr("font-weight", "700") .attr("fill", "#1e3a8a") .text(d.properties.boro_name); tooltip.append("text") .attr("x", 15) .attr("y", 42) .attr("font-size", "13px") .attr("font-weight", "600") .text(`${count.toLocaleString()} crimes`); const bbox = tooltip.node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 8) .attr("y", bbox.y - 5) .attr("width", bbox.width + 16) .attr("height", bbox.height + 10); const [mouseX, mouseY] = d3.pointer(event, svg.node()); tooltip.attr("transform", `translate(${mouseX + 10},${mouseY - 30})`); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "#333") .attr("stroke-width", 1.5) .attr("opacity", 1); tooltip.style("display", "none"); }); // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Crime Hotspot Map by Borough (2023-2024)"); // Legend const legendWidth = 300; const legendHeight = 20; const legendX = width / 2 - legendWidth / 2; const legendY = height - 40; const legendScale = d3.scaleLinear() .domain([0, d3.max(q2_data, d => d.count)]) .range([0, legendWidth]); const legendAxis = d3.axisBottom(legendScale) .ticks(5) .tickFormat(d => (d / 1000) + "K"); // Legend gradient const legendGradient = svg.append("defs") .append("linearGradient") .attr("id", "legend-gradient") .attr("x1", "0%") .attr("x2", "100%"); for (let i = 0; i <= 10; i++) { legendGradient.append("stop") .attr("offset", `${i * 10}%`) .attr("stop-color", colorScale((i / 10) * d3.max(q2_data, d => d.count))); } svg.append("rect") .attr("x", legendX) .attr("y", legendY) .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", "url(#legend-gradient)") .attr("stroke", "#333"); svg.append("g") .attr("transform", `translate(${legendX},${legendY + legendHeight})`) .call(legendAxis) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); return svg.node(); }37:T43d,#### Analysis and Interpretation The geographic distribution reveals significant disparities: **Brooklyn: The Highest Crime Burden** Brooklyn leads with approximately 230,000+ crimes, representing roughly 30% of all NYC crime. This reflects Brooklyn's status as NYC's most populous borough (2.7 million residents) and its diverse mix of high-density neighborhoods. **Manhattan: Second Despite Smaller Population** Manhattan records the second-highest crime volume (~200,000 crimes) despite having a smaller residential population. This reflects Manhattan's role as NYC's commercial and tourist center. **Queens and Bronx: Moderate Levels** Queens (~180,000 crimes) and the Bronx (~170,000 crimes) show moderate crime levels relative to their populations. **Staten Island: Lowest Burden** Staten Island shows dramatically lower crime volumes (~50,000 crimes), reflecting both its smaller population and more suburban character. **Map Insights**: The choropleth map provides spatial context, showing the geographic distribution of crime concentration across NYC's boroughs.38:T14bd,{ const width = 900; const height = 600; const marginTop = 60; const marginRight = 40; const marginBottom = 60; const marginLeft = 280; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const x = d3.scaleLinear() .domain([0, d3.max(q3_data, d => d.count)]) .nice() .range([marginLeft, width - marginRight]); const y = d3.scaleBand() .domain(q3_data.map(d => d.offense)) .range([marginTop, height - marginBottom]) .padding(0.25); const colorScale = d3.scaleSequential() .domain([0, d3.max(q3_data, d => d.count)]) .interpolator(d3.interpolateReds); // Gridlines svg.append("g") .attr("class", "grid") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x) .tickSize(-(height - marginTop - marginBottom)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // Bars const bars = svg.append("g") .selectAll("rect") .data(q3_data) .join("rect") .attr("x", marginLeft) .attr("y", d => y(d.offense)) .attr("width", 0) .attr("height", y.bandwidth()) .attr("fill", d => colorScale(d.count)) .attr("rx", 4) .style("cursor", "pointer"); bars.transition() .duration(800) .delay((d, i) => i * 50) .attr("width", d => x(d.count) - marginLeft); // Tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1.5) .attr("rx", 6) .attr("opacity", 0.95); bars.on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .attr("opacity", 0.7) .attr("stroke", "#991b1b") .attr("stroke-width", 2); tooltip.style("display", null); tooltip.selectAll("text").remove(); tooltip.append("text") .attr("x", 15) .attr("y", 22) .attr("font-size", "14px") .attr("font-weight", "700") .attr("fill", "#991b1b") .text(d.offense); tooltip.append("text") .attr("x", 15) .attr("y", 42) .attr("font-size", "13px") .attr("font-weight", "600") .attr("fill", "#333") .text(`${d.count.toLocaleString()} incidents`); const totalCrimes = q3_data.reduce((sum, item) => sum + item.count, 0); const percentage = ((d.count / totalCrimes) * 100).toFixed(1); tooltip.append("text") .attr("x", 15) .attr("y", 60) .attr("font-size", "12px") .attr("fill", "#666") .text(`${percentage}% of top crimes`); const bbox = tooltip.node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 8) .attr("y", bbox.y - 5) .attr("width", bbox.width + 16) .attr("height", bbox.height + 10); const xPos = x(d.count) + 10; const yPos = y(d.offense) + y.bandwidth() / 2 - bbox.height / 2; tooltip.attr("transform", `translate(${xPos},${yPos})`); }) .on("mouseout", function() { d3.select(this) .transition() .duration(200) .attr("opacity", 1) .attr("stroke", "none"); tooltip.style("display", "none"); }); // Value labels svg.append("g") .selectAll("text") .data(q3_data) .join("text") .attr("x", d => x(d.count) - 8) .attr("y", d => y(d.offense) + y.bandwidth() / 2 + 5) .attr("text-anchor", "end") .attr("font-size", "11px") .attr("font-weight", "600") .attr("fill", "white") .text(d => d.count.toLocaleString()); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .tickFormat(d => (d / 1000) + "K") .ticks(6)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").remove()) .call(g => g.selectAll(".tick text") .attr("font-size", "12px") .attr("font-weight", "500") .attr("color", "#333") .attr("x", -10)); // Labels svg.append("text") .attr("x", width / 2) .attr("y", height - 20) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Number of Incidents"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Top 12 Crime Types in NYC (2023-2024)"); return svg.node(); }39:T1571,{ const width = 900; const height = 500; const marginTop = 80; const marginRight = 150; const marginBottom = 100; const marginLeft = 60; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const offenses = Array.from(new Set(q3_borough_data.map(d => d.offense))); const boroughs = Array.from(new Set(q3_borough_data.map(d => d.borough))); const x0 = d3.scaleBand() .domain(offenses) .range([marginLeft, width - marginRight]) .padding(0.2); const x1 = d3.scaleBand() .domain(boroughs) .range([0, x0.bandwidth()]) .padding(0.05); const y = d3.scaleLinear() .domain([0, d3.max(q3_borough_data, d => d.count)]) .nice() .range([height - marginBottom, marginTop]); const color = d3.scaleOrdinal() .domain(boroughs) .range(["#1e40af", "#dc2626", "#059669", "#d97706", "#7c3aed"]); // Gridlines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickSize(-(width - marginLeft - marginRight)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // Grouped bars const offenseGroups = svg.append("g") .selectAll("g") .data(offenses) .join("g") .attr("transform", d => `translate(${x0(d)},0)`); offenseGroups.selectAll("rect") .data(offense => boroughs.map(borough => { const entry = q3_borough_data.find(d => d.offense === offense && d.borough === borough); return { offense, borough, count: entry ? entry.count : 0 }; })) .join("rect") .attr("x", d => x1(d.borough)) .attr("y", height - marginBottom) .attr("width", x1.bandwidth()) .attr("height", 0) .attr("fill", d => color(d.borough)) .style("cursor", "pointer") .transition() .duration(800) .delay((d, i) => i * 30) .attr("y", d => y(d.count)) .attr("height", d => y(0) - y(d.count)); // Re-select for interactions offenseGroups.selectAll("rect") .on("mouseover", function(event, d) { d3.select(this) .attr("opacity", 0.7) .attr("stroke", "#000") .attr("stroke-width", 1.5); svg.append("text") .attr("class", "value-label") .attr("x", x0(d.offense) + x1(d.borough) + x1.bandwidth() / 2) .attr("y", y(d.count) - 5) .attr("text-anchor", "middle") .attr("font-size", "11px") .attr("font-weight", "600") .attr("fill", "#1a1a1a") .text(d.count.toLocaleString()); }) .on("mouseout", function() { d3.select(this) .attr("opacity", 1) .attr("stroke", "none"); svg.selectAll(".value-label").remove(); }); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x0)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "10px") .attr("color", "#333") .attr("transform", "rotate(-20)") .attr("text-anchor", "end") .attr("dx", "-0.5em") .attr("dy", "0.5em")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickFormat(d => (d / 1000) + "K") .ticks(8)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); // Legend const legend = svg.append("g") .attr("transform", `translate(${width - marginRight + 20},${marginTop})`); boroughs.forEach((borough, i) => { const legendRow = legend.append("g") .attr("transform", `translate(0,${i * 25})`); legendRow.append("rect") .attr("width", 18) .attr("height", 18) .attr("fill", color(borough)) .attr("rx", 3); legendRow.append("text") .attr("x", 25) .attr("y", 13) .attr("font-size", "11px") .attr("font-weight", "500") .text(borough); }); // Labels svg.append("text") .attr("x", width / 2) .attr("y", height - 30) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Crime Type"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Number of Incidents"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Top 5 Crime Types by Borough (2023-2024)"); svg.append("text") .attr("x", width / 2) .attr("y", 52) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("fill", "#666") .text("Comparing geographic distribution of major offense categories"); return svg.node(); }3a:T1b1a,{ const width = 900; const height = 500; const marginTop = 60; const marginRight = 40; const marginBottom = 80; const marginLeft = 70; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const x = d3.scaleLinear() .domain([0, 23]) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([0, d3.max(q4_data, d => d.count)]) .nice() .range([height - marginBottom, marginTop]); // Gridlines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickSize(-(width - marginLeft - marginRight)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // Gradient const gradient = svg.append("defs") .append("linearGradient") .attr("id", "area-gradient-q4") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#2563eb") .attr("stop-opacity", 0.4); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#2563eb") .attr("stop-opacity", 0.05); // Time period highlighting const periods = [ { start: 0, end: 6, label: "Night\n(12AM-6AM)", color: "#1e3a8a", opacity: 0.05 }, { start: 6, end: 12, label: "Morning\n(6AM-12PM)", color: "#fbbf24", opacity: 0.05 }, { start: 12, end: 18, label: "Afternoon\n(12PM-6PM)", color: "#f97316", opacity: 0.08 }, { start: 18, end: 24, label: "Evening\n(6PM-12AM)", color: "#7c3aed", opacity: 0.05 } ]; periods.forEach(period => { svg.append("rect") .attr("x", x(period.start)) .attr("y", marginTop) .attr("width", x(period.end) - x(period.start)) .attr("height", height - marginTop - marginBottom) .attr("fill", period.color) .attr("opacity", period.opacity); svg.append("text") .attr("x", x((period.start + period.end) / 2)) .attr("y", height - marginBottom + 35) .attr("text-anchor", "middle") .attr("font-size", "10px") .attr("font-weight", "600") .attr("fill", period.color) .selectAll("tspan") .data(period.label.split('\n')) .join("tspan") .attr("x", x((period.start + period.end) / 2)) .attr("dy", (d, i) => i * 12) .text(d => d); }); // Area const area = d3.area() .x(d => x(d.hour)) .y0(height - marginBottom) .y1(d => y(d.count)) .curve(d3.curveCatmullRom); svg.append("path") .datum(q4_data) .attr("fill", "url(#area-gradient-q4)") .attr("d", area); // Line const line = d3.line() .x(d => x(d.hour)) .y(d => y(d.count)) .curve(d3.curveCatmullRom); svg.append("path") .datum(q4_data) .attr("fill", "none") .attr("stroke", "#2563eb") .attr("stroke-width", 3) .attr("d", line); // Tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1.5) .attr("rx", 6) .attr("opacity", 0.95); // Interactive dots svg.append("g") .selectAll("circle") .data(q4_data) .join("circle") .attr("cx", d => x(d.hour)) .attr("cy", d => y(d.count)) .attr("r", 5) .attr("fill", "#2563eb") .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .attr("r", 7) .attr("fill", "#1d4ed8"); tooltip.style("display", null); tooltip.selectAll("text").remove(); const timeStr = d.hour === 0 ? "12 AM" : d.hour < 12 ? `${d.hour} AM` : d.hour === 12 ? "12 PM" : `${d.hour - 12} PM`; tooltip.append("text") .attr("x", 15) .attr("y", 20) .attr("font-size", "13px") .attr("font-weight", "700") .attr("fill", "#1e3a8a") .text(timeStr); tooltip.append("text") .attr("x", 15) .attr("y", 38) .attr("font-size", "12px") .attr("font-weight", "600") .text(`${d.count.toLocaleString()} crimes`); const bbox = tooltip.node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 8) .attr("y", bbox.y - 5) .attr("width", bbox.width + 16) .attr("height", bbox.height + 10); tooltip.attr("transform", `translate(${x(d.hour) - bbox.width/2},${y(d.count) - bbox.height - 15})`); }) .on("mouseout", function() { d3.select(this) .transition() .duration(200) .attr("r", 5) .attr("fill", "#2563eb"); tooltip.style("display", "none"); }); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .tickValues(d3.range(0, 24, 2)) .tickFormat(d => { if (d === 0) return "12 AM"; if (d < 12) return `${d} AM`; if (d === 12) return "12 PM"; return `${d - 12} PM`; })) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "10px") .attr("color", "#333")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickFormat(d => d.toLocaleString()) .ticks(8)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); // Labels svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Hour of Day"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 22) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Crime Count"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Crime Distribution by Hour of Day (2024)"); return svg.node(); }3b:T257e,{ const width = 960; const height = 550; const marginTop = 80; const marginRight = 180; const marginBottom = 70; const marginLeft = 80; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const boroughs = Array.from(new Set(q5_data.map(d => d.borough))).sort(); const x = d3.scaleLinear() .domain(d3.extent(q5_data, d => d.year)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([0, d3.max(q5_data, d => d.count)]) .nice() .range([height - marginBottom, marginTop]); const color = d3.scaleOrdinal() .domain(boroughs) .range(["#1e40af", "#dc2626", "#059669", "#d97706", "#7c3aed"]); // Gridlines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickSize(-(width - marginLeft - marginRight)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // COVID annotation const covidX = x(2020); svg.append("line") .attr("x1", covidX) .attr("x2", covidX) .attr("y1", marginTop) .attr("y2", height - marginBottom) .attr("stroke", "#991b1b") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5") .attr("opacity", 0.5); svg.append("text") .attr("x", covidX + 5) .attr("y", marginTop + 20) .attr("font-size", "11px") .attr("font-weight", "600") .attr("fill", "#991b1b") .text("COVID-19"); // Lines const line = d3.line() .x(d => x(d.year)) .y(d => y(d.count)) .curve(d3.curveMonotoneX); const boroughGroups = svg.append("g"); boroughs.forEach(borough => { const boroughData = q5_data.filter(d => d.borough === borough).sort((a, b) => a.year - b.year); boroughGroups.append("path") .datum(boroughData) .attr("fill", "none") .attr("stroke", color(borough)) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("class", `line-${borough.replace(/\s+/g, '-')}`) .style("cursor", "pointer") .on("mouseover", function() { d3.select(this).attr("stroke-width", 5).raise(); svg.selectAll("path[class^='line-']") .filter(function() { return this !== event.target; }) .attr("opacity", 0.2); svg.selectAll("circle") .attr("opacity", function(d) { return d.borough === borough ? 1 : 0.2; }); }) .on("mouseout", function() { d3.select(this).attr("stroke-width", 3); svg.selectAll("path[class^='line-']").attr("opacity", 1); svg.selectAll("circle").attr("opacity", 1); }) .attr("d", line); }); // Tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1.5) .attr("rx", 6) .attr("opacity", 0.95); // Points boroughGroups.selectAll("g.point-group") .data(boroughs) .join("g") .attr("class", "point-group") .selectAll("circle") .data(borough => q5_data.filter(d => d.borough === borough)) .join("circle") .attr("cx", d => x(d.year)) .attr("cy", d => y(d.count)) .attr("r", 5) .attr("fill", d => color(d.borough)) .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .attr("r", 7); tooltip.style("display", null); tooltip.selectAll("text").remove(); tooltip.append("text") .attr("x", 15) .attr("y", 20) .attr("font-size", "13px") .attr("font-weight", "700") .attr("fill", color(d.borough)) .text(d.borough); tooltip.append("text") .attr("x", 15) .attr("y", 38) .attr("font-size", "12px") .attr("font-weight", "600") .text(`${d.year}: ${d.count.toLocaleString()} crimes`); const prevYear = q5_data.find(item => item.borough === d.borough && item.year === d.year - 1); if (prevYear) { const change = ((d.count - prevYear.count) / prevYear.count * 100).toFixed(1); const changeText = change > 0 ? `+${change}%` : `${change}%`; const changeColor = change > 0 ? "#dc2626" : "#059669"; tooltip.append("text") .attr("x", 15) .attr("y", 56) .attr("font-size", "11px") .attr("fill", changeColor) .attr("font-weight", "600") .text(`${changeText} from ${d.year - 1}`); } const bbox = tooltip.node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 8) .attr("y", bbox.y - 5) .attr("width", bbox.width + 16) .attr("height", bbox.height + 10); tooltip.attr("transform", `translate(${x(d.year) + 10},${y(d.count) - bbox.height/2})`); }) .on("mouseout", function() { d3.select(this) .transition() .duration(200) .attr("r", 5); tooltip.style("display", "none"); }); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickFormat(d3.format("d")).ticks(6)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "12px") .attr("color", "#333")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickFormat(d => (d / 1000) + "K") .ticks(8)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); // Legend (interactive) const legend = svg.append("g") .attr("transform", `translate(${width - marginRight + 20},${marginTop})`); legend.append("text") .attr("x", 0) .attr("y", -10) .attr("font-size", "13px") .attr("font-weight", "600") .attr("fill", "#333") .text("Borough"); boroughs.forEach((borough, i) => { const legendRow = legend.append("g") .attr("transform", `translate(0,${i * 28 + 5})`) .style("cursor", "pointer") .on("click", function() { const isActive = d3.select(this).classed("active"); if (!isActive) { legend.selectAll("g").classed("active", false).attr("opacity", 0.3); d3.select(this).classed("active", true).attr("opacity", 1); svg.selectAll("path[class^='line-']") .attr("opacity", function() { return this.classList.value.includes(borough.replace(/\s+/g, '-')) ? 1 : 0.1; }) .attr("stroke-width", function() { return this.classList.value.includes(borough.replace(/\s+/g, '-')) ? 4 : 2; }); svg.selectAll("circle") .attr("opacity", d => d.borough === borough ? 1 : 0.1); } else { legend.selectAll("g").classed("active", false).attr("opacity", 1); svg.selectAll("path[class^='line-']").attr("opacity", 1).attr("stroke-width", 3); svg.selectAll("circle").attr("opacity", 1); } }); legendRow.append("line") .attr("x1", 0) .attr("x2", 25) .attr("y1", 9) .attr("y2", 9) .attr("stroke", color(borough)) .attr("stroke-width", 3); legendRow.append("circle") .attr("cx", 12.5) .attr("cy", 9) .attr("r", 4) .attr("fill", color(borough)) .attr("stroke", "white") .attr("stroke-width", 1.5); legendRow.append("text") .attr("x", 32) .attr("y", 13) .attr("font-size", "12px") .attr("font-weight", "500") .text(borough); }); legend.append("text") .attr("x", 0) .attr("y", boroughs.length * 28 + 20) .attr("font-size", "10px") .attr("fill", "#666") .attr("font-style", "italic") .text("Click to highlight"); // Labels svg.append("text") .attr("x", width / 2) .attr("y", height - 25) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Year"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Annual Crime Count"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Crime Evolution by Borough (2019-2024)"); svg.append("text") .attr("x", width / 2) .attr("y", 52) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("fill", "#666") .text("Tracking spatio-temporal patterns through the COVID-19 pandemic and recovery"); return svg.node(); }3c:T445,q6_sankey_data = { // Get top crime types const topCrimesParams = new URLSearchParams({ $select: `ofns_desc, count(*) as count`, $where: `cmplnt_fr_dt >= '2023-01-01T00:00:00' AND ofns_desc IS NOT NULL`, $group: `ofns_desc`, $order: `count DESC`, $limit: 8 }); const topCrimesRes = await fetch(`${API_BASE}?${topCrimesParams}`); const topCrimes = await topCrimesRes.json(); const crimeTypes = topCrimes.map(d => d.ofns_desc); // Get premise data for these crime types const result = []; for (const crime of crimeTypes) { const params = new URLSearchParams({ $select: `prem_typ_desc, count(*) as count`, $where: `cmplnt_fr_dt >= '2023-01-01T00:00:00' AND ofns_desc = '${crime}' AND prem_typ_desc IS NOT NULL`, $group: `prem_typ_desc`, $order: `count DESC`, $limit: 5 }); const res = await fetch(`${API_BASE}?${params}`); const data = await res.json(); data.forEach(d => result.push({ crime: crime, premise: d.prem_typ_desc, count: parseInt(d.count) })); } return result; }3d:T1c53,{ const width = 1000; const height = 700; const marginTop = 60; const marginRight = 200; const marginBottom = 40; const marginLeft = 200; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); // Process data for Sankey const nodes = []; const links = []; const nodeMap = new Map(); q6_sankey_data.forEach(d => { if (!nodeMap.has(d.crime)) { nodeMap.set(d.crime, nodes.length); nodes.push({ name: d.crime, type: "crime" }); } if (!nodeMap.has(d.premise)) { nodeMap.set(d.premise, nodes.length); nodes.push({ name: d.premise, type: "premise" }); } }); q6_sankey_data.forEach(d => { links.push({ source: nodeMap.get(d.crime), target: nodeMap.get(d.premise), value: d.count }); }); // Create Sankey layout const sankey = d3Sankey.sankey() .nodeWidth(20) .nodePadding(15) .extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]]); const { nodes: sankeyNodes, links: sankeyLinks } = sankey({ nodes: nodes.map(d => Object.assign({}, d)), links: links.map(d => Object.assign({}, d)) }); // Color scales const crimeColor = d3.scaleOrdinal() .domain(nodes.filter(d => d.type === "crime").map(d => d.name)) .range(d3.schemeSet2); const premiseColor = d3.scaleOrdinal() .domain(nodes.filter(d => d.type === "premise").map(d => d.name)) .range(d3.schemeTableau10); // Draw links const link = svg.append("g") .selectAll("path") .data(sankeyLinks) .join("path") .attr("d", d3Sankey.sankeyLinkHorizontal()) .attr("fill", "none") .attr("stroke", d => crimeColor(d.source.name)) .attr("stroke-width", d => Math.max(1, d.width)) .attr("opacity", 0.3) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("opacity", 0.6) .attr("stroke-width", d => Math.max(2, d.width + 2)); showLinkTooltip(event, d); }) .on("mouseout", function() { d3.select(this) .attr("opacity", 0.3) .attr("stroke-width", d => Math.max(1, d.width)); hideTooltip(); }); // Draw nodes const node = svg.append("g") .selectAll("g") .data(sankeyNodes) .join("g") .style("cursor", "pointer"); node.append("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => d.type === "crime" ? crimeColor(d.name) : premiseColor(d.name)) .attr("stroke", "#333") .attr("stroke-width", 1) .on("mouseover", function(event, d) { d3.select(this).attr("opacity", 0.8); showNodeTooltip(event, d); }) .on("mouseout", function() { d3.select(this).attr("opacity", 1); hideTooltip(); }); // Node labels node.append("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .attr("font-size", "11px") .attr("font-weight", "500") .attr("fill", "#333") .text(d => { if (d.name.length > 25) { return d.name.substring(0, 22) + "..."; } return d.name; }); // Tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1.5) .attr("rx", 6) .attr("opacity", 0.95); function showLinkTooltip(event, d) { tooltip.style("display", null); tooltip.selectAll("text").remove(); const percentage = (d.value / d3.sum(sankeyLinks, l => l.value) * 100).toFixed(1); tooltip.append("text") .attr("x", 15) .attr("y", 20) .attr("font-size", "12px") .attr("font-weight", "700") .text(`${d.source.name}`); tooltip.append("text") .attr("x", 15) .attr("y", 38) .attr("font-size", "11px") .text("→"); tooltip.append("text") .attr("x", 30) .attr("y", 38) .attr("font-size", "12px") .attr("font-weight", "700") .text(`${d.target.name}`); tooltip.append("text") .attr("x", 15) .attr("y", 56) .attr("font-size", "12px") .attr("font-weight", "600") .text(`${d.value.toLocaleString()} incidents (${percentage}%)`); const bbox = tooltip.node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 8) .attr("y", bbox.y - 5) .attr("width", bbox.width + 16) .attr("height", bbox.height + 10); const [mouseX, mouseY] = d3.pointer(event, svg.node()); tooltip.attr("transform", `translate(${mouseX + 15},${mouseY - bbox.height / 2})`); } function showNodeTooltip(event, d) { tooltip.style("display", null); tooltip.selectAll("text").remove(); const total = d.type === "crime" ? d3.sum(sankeyLinks.filter(l => l.source === d), l => l.value) : d3.sum(sankeyLinks.filter(l => l.target === d), l => l.value); tooltip.append("text") .attr("x", 15) .attr("y", 20) .attr("font-size", "13px") .attr("font-weight", "700") .attr("fill", d.type === "crime" ? crimeColor(d.name) : premiseColor(d.name)) .text(d.name); tooltip.append("text") .attr("x", 15) .attr("y", 40) .attr("font-size", "12px") .attr("font-weight", "600") .text(`${total.toLocaleString()} total incidents`); const bbox = tooltip.node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 8) .attr("y", bbox.y - 5) .attr("width", bbox.width + 16) .attr("height", bbox.height + 10); const [mouseX, mouseY] = d3.pointer(event, svg.node()); tooltip.attr("transform", `translate(${mouseX + 15},${mouseY - bbox.height / 2})`); } function hideTooltip() { tooltip.style("display", "none"); } // Column labels svg.append("text") .attr("x", marginLeft) .attr("y", marginTop - 25) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#333") .text("Crime Type"); svg.append("text") .attr("x", width - marginRight) .attr("y", marginTop - 25) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#333") .text("Premise Type"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Crime Type → Premise Type Flow (2023-2024)"); svg.append("text") .attr("x", width / 2) .attr("y", 52) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("fill", "#666") .text("Where different types of crimes occur (Sankey diagram)"); return svg.node(); }3e:T18a3,{ const width = 950; const height = 600; const marginTop = 80; const marginRight = 40; const marginBottom = 100; const marginLeft = 70; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const x = d3.scaleBand() .domain(q7_data.map(d => "Pct " + d.precinct)) .range([marginLeft, width - marginRight]) .padding(0.2); const y = d3.scaleLinear() .domain([0, d3.max(q7_data, d => d.count)]) .nice() .range([height - marginBottom, marginTop]); const colorScale = d3.scaleSequential() .domain([d3.min(q7_data, d => d.count), d3.max(q7_data, d => d.count)]) .interpolator(d3.interpolateReds); // Gridlines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickSize(-(width - marginLeft - marginRight)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // Bars const bars = svg.append("g") .selectAll("rect") .data(q7_data) .join("rect") .attr("x", d => x("Pct " + d.precinct)) .attr("y", height - marginBottom) .attr("width", x.bandwidth()) .attr("height", 0) .attr("fill", d => colorScale(d.count)) .attr("rx", 3) .style("cursor", "pointer"); bars.transition() .duration(800) .delay((d, i) => i * 30) .attr("y", d => y(d.count)) .attr("height", d => y(0) - y(d.count)); // Highlight top 3 const top3 = q7_data.slice(0, 3); bars.each(function(d) { if (top3.includes(d)) { d3.select(this) .attr("stroke", "#991b1b") .attr("stroke-width", 2); } }); // Tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1.5) .attr("rx", 6) .attr("opacity", 0.95); bars.on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .attr("opacity", 0.7); tooltip.style("display", null); tooltip.selectAll("text").remove(); tooltip.append("text") .attr("x", 15) .attr("y", 20) .attr("font-size", "14px") .attr("font-weight", "700") .attr("fill", "#991b1b") .text(`Precinct ${d.precinct}`); tooltip.append("text") .attr("x", 15) .attr("y", 40) .attr("font-size", "12px") .attr("font-weight", "600") .text(`${d.count.toLocaleString()} crimes`); if (d.rate) { tooltip.append("text") .attr("x", 15) .attr("y", 58) .attr("font-size", "11px") .attr("fill", "#666") .text(`${d.rate} per 1,000 residents`); } const bbox = tooltip.node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 8) .attr("y", bbox.y - 5) .attr("width", bbox.width + 16) .attr("height", bbox.height + 10); tooltip.attr("transform", `translate(${x("Pct " + d.precinct) + x.bandwidth()/2 - bbox.width/2},${y(d.count) - bbox.height - 15})`); }) .on("mouseout", function() { d3.select(this) .transition() .duration(200) .attr("opacity", 1); tooltip.style("display", "none"); }); // Value labels for top 5 svg.append("g") .selectAll("text") .data(q7_data.slice(0, 5)) .join("text") .attr("x", d => x("Pct " + d.precinct) + x.bandwidth() / 2) .attr("y", d => y(d.count) - 8) .attr("text-anchor", "middle") .attr("font-size", "11px") .attr("font-weight", "700") .attr("fill", "#991b1b") .text(d => d.count.toLocaleString()); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "10px") .attr("color", "#333") .attr("transform", "rotate(-45)") .attr("text-anchor", "end") .attr("dx", "-0.5em") .attr("dy", "0.3em")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickFormat(d => (d / 1000) + "K") .ticks(8)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); // Labels svg.append("text") .attr("x", width / 2) .attr("y", height - 30) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Police Precinct"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 22) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#333") .text("Total Crime Count"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Top 25 Precincts by Crime Volume (2023-2024)"); svg.append("text") .attr("x", width / 2) .attr("y", 52) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("fill", "#666") .text("Identifying high-burden neighborhoods across NYC"); // Annotation for top precinct svg.append("text") .attr("x", x("Pct " + q7_data[0].precinct) + x.bandwidth() / 2) .attr("y", y(q7_data[0].count) - 30) .attr("text-anchor", "middle") .attr("font-size", "11px") .attr("font-weight", "600") .attr("fill", "#991b1b") .text("Pct 75: East New York, Brooklyn"); return svg.node(); }3f:T660,q8_filtered = { let filtered = q8_data; if (!filtered || filtered.length === 0) { return { hourlyData: Array(24).fill(0).map((_, hour) => ({ hour, count: 0 })), boroughData: [], crimeData: [], totalCount: 0 }; } if (selectedBorough !== "All") { filtered = filtered.filter(d => d.borough && d.borough.toUpperCase() === selectedBorough.toUpperCase() ); } if (selectedYear !== "All") { filtered = filtered.filter(d => d.year === parseInt(selectedYear)); } if (selectedCrime !== "All") { filtered = filtered.filter(d => d.offense && d.offense.toUpperCase() === selectedCrime.toUpperCase() ); } const hourCounts = Array(24).fill(0); filtered.forEach(d => { if (d.hour !== null && d.hour !== undefined && d.hour >= 0 && d.hour < 24) { hourCounts[d.hour]++; } }); const boroughCounts = {}; filtered.forEach(d => { if (d.borough) { boroughCounts[d.borough] = (boroughCounts[d.borough] || 0) + 1; } }); const crimeCounts = {}; filtered.forEach(d => { if (d.offense) { crimeCounts[d.offense] = (crimeCounts[d.offense] || 0) + 1; } }); return { hourlyData: hourCounts.map((count, hour) => ({ hour, count })), boroughData: Object.entries(boroughCounts) .map(([borough, count]) => ({ borough, count })) .sort((a, b) => b.count - a.count) .slice(0, 5), crimeData: Object.entries(crimeCounts) .map(([offense, count]) => ({ offense, count })) .sort((a, b) => b.count - a.count) .slice(0, 8), totalCount: filtered.length }; }40:T1874,{ const width = 900; const height = 400; const marginTop = 70; const marginRight = 40; const marginBottom = 60; const marginLeft = 70; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); const x = d3.scaleLinear() .domain([0, 23]) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([0, Math.max(d3.max(q8_filtered.hourlyData, d => d.count), 50)]) .nice() .range([height - marginBottom, marginTop]); // Gridlines svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickSize(-(width - marginLeft - marginRight)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // Gradient const gradient = svg.append("defs") .append("linearGradient") .attr("id", "area-gradient-dashboard") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#8b5cf6") .attr("stop-opacity", 0.4); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#8b5cf6") .attr("stop-opacity", 0.05); // Area const area = d3.area() .x(d => x(d.hour)) .y0(height - marginBottom) .y1(d => y(d.count)) .curve(d3.curveCatmullRom); svg.append("path") .datum(q8_filtered.hourlyData) .attr("fill", "url(#area-gradient-dashboard)") .attr("d", area); // Line const line = d3.line() .x(d => x(d.hour)) .y(d => y(d.count)) .curve(d3.curveCatmullRom); svg.append("path") .datum(q8_filtered.hourlyData) .attr("fill", "none") .attr("stroke", "#7c3aed") .attr("stroke-width", 3) .attr("d", line); // Tooltip const tooltip = svg.append("g") .attr("class", "tooltip") .style("display", "none"); tooltip.append("rect") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1.5) .attr("rx", 6) .attr("opacity", 0.95); // Points svg.append("g") .selectAll("circle") .data(q8_filtered.hourlyData) .join("circle") .attr("cx", d => x(d.hour)) .attr("cy", d => y(d.count)) .attr("r", 5) .attr("fill", "#7c3aed") .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .attr("r", 7) .attr("fill", "#6d28d9"); tooltip.style("display", null); tooltip.selectAll("text").remove(); const timeStr = d.hour === 0 ? "12 AM" : d.hour < 12 ? `${d.hour} AM` : d.hour === 12 ? "12 PM" : `${d.hour - 12} PM`; tooltip.append("text") .attr("x", 15) .attr("y", 20) .attr("font-size", "13px") .attr("font-weight", "700") .attr("fill", "#7c3aed") .text(timeStr); tooltip.append("text") .attr("x", 15) .attr("y", 38) .attr("font-size", "12px") .attr("font-weight", "600") .text(`${d.count.toLocaleString()} incidents`); const bbox = tooltip.node().getBBox(); tooltip.select("rect") .attr("x", bbox.x - 8) .attr("y", bbox.y - 5) .attr("width", bbox.width + 16) .attr("height", bbox.height + 10); tooltip.attr("transform", `translate(${x(d.hour) - bbox.width/2},${y(d.count) - bbox.height - 15})`); }) .on("mouseout", function() { d3.select(this) .transition() .duration(200) .attr("r", 5) .attr("fill", "#7c3aed"); tooltip.style("display", "none"); }); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .tickValues(d3.range(0, 24, 3)) .tickFormat(d => { if (d === 0) return "12 AM"; if (d < 12) return `${d} AM`; if (d === 12) return "12 PM"; return `${d - 12} PM`; })) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "10px") .attr("color", "#333")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickFormat(d => d.toLocaleString()) .ticks(6)) .call(g => g.select(".domain").attr("stroke", "#666")) .call(g => g.selectAll(".tick line").attr("stroke", "#666")) .call(g => g.selectAll(".tick text") .attr("font-size", "11px") .attr("color", "#333")); // Labels svg.append("text") .attr("x", width / 2) .attr("y", height - 15) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "500") .attr("fill", "#333") .text("Hour of Day"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 22) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "500") .attr("fill", "#333") .text("Incidents"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Hourly Crime Pattern"); // Filter summary const filterText = [ selectedBorough !== "All" ? selectedBorough : "All Boroughs", selectedYear !== "All" ? selectedYear : "2020-2024", selectedCrime !== "All" ? selectedCrime.substring(0, 30) : "All Crimes" ].join(" | "); svg.append("text") .attr("x", width / 2) .attr("y", 48) .attr("text-anchor", "middle") .attr("font-size", "11px") .attr("fill", "#7c3aed") .text(filterText); return svg.node(); }41:Te12,{ const width = 450; const height = 350; const marginTop = 60; const marginRight = 30; const marginBottom = 80; const marginLeft = 70; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); if (!q8_filtered.hourlyData || q8_filtered.totalCount === 0) { svg.append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "600") .attr("fill", "#666") .text("No data available for selected filters"); svg.append("text") .attr("x", width / 2) .attr("y", height / 2 + 25) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("fill", "#999") .text("Try selecting different borough, year, or crime type combinations"); return svg.node(); } const x = d3.scaleBand() .domain(q8_filtered.boroughData.map(d => d.borough)) .range([marginLeft, width - marginRight]) .padding(0.3); const y = d3.scaleLinear() .domain([0, d3.max(q8_filtered.boroughData, d => d.count)]) .nice() .range([height - marginBottom, marginTop]); const colorScale = d3.scaleOrdinal() .range(["#1e40af", "#3b82f6", "#60a5fa", "#93c5fd", "#bfdbfe"]); // Gridlines svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickSize(-(width - marginLeft - marginRight)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // Bars svg.append("g") .selectAll("rect") .data(q8_filtered.boroughData) .join("rect") .attr("x", d => x(d.borough)) .attr("y", d => y(d.count)) .attr("width", x.bandwidth()) .attr("height", d => y(0) - y(d.count)) .attr("fill", (d, i) => colorScale(i)) .attr("rx", 3); // Value labels svg.append("g") .selectAll("text") .data(q8_filtered.boroughData) .join("text") .attr("x", d => x(d.borough) + x.bandwidth() / 2) .attr("y", d => y(d.count) - 5) .attr("text-anchor", "middle") .attr("font-size", "11px") .attr("font-weight", "600") .attr("fill", "#1e3a8a") .text(d => d.count.toLocaleString()); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)) .call(g => g.selectAll(".tick text") .attr("font-size", "9px") .attr("transform", "rotate(-20)") .attr("text-anchor", "end") .attr("dx", "-0.5em") .attr("dy", "0.3em")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickFormat(d => d >= 1000 ? (d/1000) + "K" : d) .ticks(5)) .call(g => g.selectAll(".tick text").attr("font-size", "10px")); // Title svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Top Boroughs"); svg.append("text") .attr("x", width / 2) .attr("y", 45) .attr("text-anchor", "middle") .attr("font-size", "10px") .attr("fill", "#666") .text(`Total: ${q8_filtered.totalCount.toLocaleString()} incidents`); return svg.node(); }42:Td43,{ const width = 450; const height = 350; const marginTop = 60; const marginRight = 30; const marginBottom = 60; const marginLeft = 180; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: system-ui, sans-serif;"); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fafafa"); if (!q8_filtered.boroughData || q8_filtered.boroughData.length === 0) { svg.append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#666") .text("No borough data available"); svg.append("text") .attr("x", width / 2) .attr("y", height - 25) .attr("text-anchor", "middle") .attr("font-size", "10px") .attr("fill", "#999") .text("Total: 0 incidents"); return svg.node(); } const x = d3.scaleLinear() .domain([0, d3.max(q8_filtered.crimeData, d => d.count)]) .nice() .range([marginLeft, width - marginRight]); const y = d3.scaleBand() .domain(q8_filtered.crimeData.map(d => d.offense)) .range([marginTop, height - marginBottom]) .padding(0.2); const colorScale = d3.scaleSequential() .domain([0, d3.max(q8_filtered.crimeData, d => d.count)]) .interpolator(d3.interpolateReds); // Gridlines svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x) .tickSize(-(height - marginTop - marginBottom)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e0e0e0") .attr("stroke-opacity", 0.7)); // Bars svg.append("g") .selectAll("rect") .data(q8_filtered.crimeData) .join("rect") .attr("x", marginLeft) .attr("y", d => y(d.offense)) .attr("width", d => x(d.count) - marginLeft) .attr("height", y.bandwidth()) .attr("fill", d => colorScale(d.count)) .attr("rx", 3); // Value labels svg.append("g") .selectAll("text") .data(q8_filtered.crimeData) .join("text") .attr("x", d => x(d.count) - 5) .attr("y", d => y(d.offense) + y.bandwidth() / 2 + 4) .attr("text-anchor", "end") .attr("font-size", "9px") .attr("font-weight", "600") .attr("fill", "white") .text(d => d.count.toLocaleString()); // Axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .tickFormat(d => d >= 1000 ? (d/1000) + "K" : d) .ticks(4)) .call(g => g.selectAll(".tick text").attr("font-size", "10px")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").remove()) .call(g => g.selectAll(".tick text") .attr("font-size", "9px") .attr("x", -5) .text(d => d.length > 22 ? d.substring(0, 20) + "..." : d)); // Title svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "700") .attr("fill", "#1a1a1a") .text("Top Crime Types"); return svg.node(); }43:T641,#### Analysis and Interpretation **Coordinated Multi-Dimensional Analysis**: This dashboard demonstrates the power of interactive, coordinated views. As you adjust filters, all three visualizations update simultaneously, revealing patterns that single-dimension analysis cannot capture. **Example Explorations**: 1. **Manhattan Petit Larceny (2023)**: Shows pronounced afternoon peak (retail hours) with high Manhattan concentration 2. **Brooklyn Assaults (2024)**: Reveals different hourly pattern with evening peaks, reflecting different crime dynamics 3. **COVID-19 Comparison (2020 vs. 2024)**: Same borough/crime shows dramatically different volumes and potentially shifted patterns **Key Capabilities**: - **Hypothesis Testing**: "Do robberies in Queens peak at different hours than Manhattan?" - **Trend Analysis**: "How did specific crime types evolve post-pandemic in specific boroughs?" - **Operational Planning**: "When should we deploy resources for specific crime types in specific areas?" **Value of Coordinated Views**: Unlike static reports, this interactive approach enables: - User-driven exploration matching specific questions - Discovery of unexpected patterns through experimentation - Real-time hypothesis testing - Evidence-based dialogue between stakeholders **Practical Use Cases**: - **Precinct commanders**: Identify when specific crimes peak in their jurisdictions - **Community organizations**: Document specific problems with data - **Researchers**: Test criminological theories with filtered subsets - **Residents**: Understand actual risk patterns for their area44:T115f,## Conclusion ### Summary of Key Findings Our comprehensive analysis of NYC crime patterns from 2015-2024 reveals a complex, dynamic urban safety landscape: **1. The COVID-19 Watershed**: Crime plummeted 35-40% in 2020 but surged to decade-high levels by 2023-2024—approximately 30% above pre-pandemic baselines. **2. Geographic Concentration**: Brooklyn leads in volume with sharp post-pandemic growth. Precinct 75 (East New York) shows highest burden citywide. Staten Island remains lowest across all metrics. **3. Property Crime Dominance**: Petit larceny comprises 22% of all crimes. Combined property theft represents one-third of total crime. **4. Predictable Daily Rhythms**: Afternoon hours (12-6 PM) represent peak risk, contradicting perceptions of nighttime danger. **5. Location-Specific Risks**: Streets dominate most categories. Different crime types concentrate in different premise types, requiring targeted strategies. **6. Multi-Dimensional Complexity**: Interactive exploration reveals patterns vary dramatically based on combined filters—simple generalizations mask tremendous variation. ### Recommendations **For Law Enforcement**: - Concentrate patrols during afternoon peak hours - Deploy specialized resources to persistent hotspots (Precincts 75, 73, 44, 14) - Develop crime-specific strategies (retail partnerships for larceny, domestic violence protocols for residential assaults) **For City Government**: - Address root causes through comprehensive interventions (economic development, education, infrastructure) - Use granular analysis to guide budget decisions across agencies - Balance enforcement with community investment to avoid over-policing - Prioritize transit safety with increased presence and infrastructure improvements **For Community Organizations**: - Use data tools for evidence-based advocacy - Target prevention programs based on local patterns (after-school programs during peak-risk afternoon hours) - Supplement official data with community surveys **For Researchers**: - Investigate why Brooklyn surged more than other boroughs post-pandemic - Rigorously evaluate intervention effectiveness - Develop predictive analytics while being mindful of bias concerns **For Residents**: - Understand actual patterns rather than operating on fear - Practice daytime vigilance during high-risk afternoon hours - Engage in civic participation to shape safety strategies ### Limitations - **Reporting bias**: Statistics reflect reported crimes only - **Geographic precision**: Precinct analysis masks block-level variation - **Severity weighting**: All crimes treated equally - **Causation**: Patterns identified but causal mechanisms require further research - **Temporal scope**: Focus on 2015-2024 misses longer-term trends ### Final Reflections Crime is fundamentally a social problem with roots in inequality, opportunity structures, and community conditions. While data and visualization inform better responses, they cannot substitute for addressing underlying causes. NYC's crime landscape is far from monolithic—patterns vary dramatically across time, space, and crime type. This complexity defies simple narratives and demands nuanced, context-specific responses. The post-pandemic surge reminds us that crime responds to broader social conditions, and sustainable reductions require comprehensive interventions beyond law enforcement. For New Yorkers, understanding these patterns enables informed decision-making without succumbing to fear. For policymakers, we hope this analysis demonstrates the value of data-driven, evidence-based approaches to public safety. Ultimately, building safer communities requires collaboration across law enforcement, government, community organizations, researchers, and residents. Data and visualization can inform this collaboration, but sustained commitment, adequate resources, and genuine partnership will determine success. --- *This analysis was conducted as part of CS-GY 6313: Information Visualization. Data source: NYC Open Data (NYPD Complaint Data Historic). All visualizations created using D3.js.* **Interactive Features Summary**: - Time range slider (Q1) - Clickable borough legend (Q5) - Coordinated dashboard with 3 linked views (Q8) - Choropleth map with geographic context (Q2) - Sankey diagram showing crime-to-premise flows (Q6) - Enhanced tooltips across all visualizations - Smooth animations and transitions45:[] 2f:{"id":"9a43f5347310776e","slug":null,"title":"Krish - 1 NYC Crime Patterns: A Spatio-Temporal Analysis of Public Safety (2015-2024) - Milestone #4: Second Draft","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-12-01T00:08:46.106Z","update_time":"$D2025-12-02T21:47:36.431Z","view_time":null,"first_public_time":"$D2025-12-01T23:37:55.724Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3e0135dbcb9af4fe","login":"new-york-university21","name":"New York University","avatar_url":"https://avatars-next.observableusercontent.com/d97d076a94403ded92e5811f3b293e5a00e959f42fc5252221bd57904d711438","tier":"starter_2024","bio":""},"version":129,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6b3b6472db850914","login":"sm12505","name":"Sm12505","avatar_url":"https://avatars-next.observableusercontent.com/25d7e16f268c88a291fc61a344dcc836598b5be17f4329fda0ef29d45aae18d2","tier":null,"bio":""}],"members":[{"type":"team","id":"3e0135dbcb9af4fe","login":"new-york-university21","name":"New York University","avatar_url":"https://avatars-next.observableusercontent.com/d97d076a94403ded92e5811f3b293e5a00e959f42fc5252221bd57904d711438","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6b3b6472db850914","login":"sm12505","name":"Sm12505","avatar_url":"https://avatars-next.observableusercontent.com/25d7e16f268c88a291fc61a344dcc836598b5be17f4329fda0ef29d45aae18d2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Krish - 1 NYC Crime Patterns: A Spatio-Temporal Analysis of Public Safety (2015-2024) - Milestone #4: Second Draft","cells":[{"id":117,"value":"# Krish - 1 NYC Crime Patterns: A Spatio-Temporal Analysis of Public Safety (2015-2024) - Milestone #4: Second Draft\n* **Team Name:** Viz Pro Max\n* **Name:** Siddh Mandirwala & Krish Sunil Murjani\n* **NetIDs:** sm12505 & km6520\n* **NOTEBOOK URL:** [NOTEBOOK URL](https://observablehq.com/d/9a43f5347310776e)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"API_BASE = \"https://data.cityofnewyork.us/resource/qgea-i56i.json\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"fetchData = async (query = \"\", limit = 1000) => {\n const params = new URLSearchParams({\n $limit: limit,\n ...(query && { $where: query })\n });\n const res = await fetch(`${API_BASE}?${params}`);\n return await res.json();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"nycBoroughsGeo = d3.json(\"https://raw.githubusercontent.com/dwillis/nyc-maps/master/boroughs.geojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Questions and Findings\n\nIn this section, we explore eight interconnected questions about NYC crime patterns. Each question builds upon previous insights, progressing from broad temporal and spatial overviews to detailed multi-dimensional analysis. Our visualizations are fully interactive—hover over data points to see detailed information, and use the coordinated dashboard to explore multi-dimensional patterns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"### Question 1: How have overall crime patterns changed over time in NYC?\n\nUnderstanding long-term trends is essential for contextualizing current crime levels and evaluating the effectiveness of public safety policies. This analysis examines monthly crime counts from 2015 through 2024, revealing how external events—particularly the COVID-19 pandemic—have reshaped NYC's crime landscape.`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"q1_data = {\n const years = [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024];\n const result = [];\n \n for (const year of years) {\n const params = new URLSearchParams({\n $select: `date_extract_m(cmplnt_fr_dt) as month, count(*) as count`,\n $where: `date_extract_y(cmplnt_fr_dt) = ${year}`,\n $group: `date_extract_m(cmplnt_fr_dt)`,\n $order: `month ASC`\n });\n const res = await fetch(`${API_BASE}?${params}`);\n const data = await res.json();\n \n data.forEach(d => result.push({\n year,\n month: parseInt(d.month),\n count: parseInt(d.count),\n date: new Date(year, parseInt(d.month) - 1)\n }));\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof q1_timeRange = Inputs.range([2015, 2024], {\n step: 1,\n label: \"Select year range:\",\n value: [2015, 2024]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"q1_filtered = q1_data.filter(d => d.year >= q1_timeRange[0] && d.year <= q1_timeRange[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"### Question 2: Where are crime hotspots located across NYC's five boroughs?\n\nCrime distribution across NYC's geography is far from uniform. Understanding which boroughs bear the highest crime burden is essential for resource allocation, policy development, and public awareness. This analysis examines total crime volumes across all five boroughs using recent data (2023-2024) to reflect current patterns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"q2_data = {\n const params = new URLSearchParams({\n $select: `boro_nm, count(*) as count`,\n $where: `cmplnt_fr_dt >= '2023-01-01T00:00:00' AND boro_nm IS NOT NULL`,\n $group: `boro_nm`,\n $order: `count DESC`\n });\n const res = await fetch(`${API_BASE}?${params}`);\n const data = await res.json();\n return data.map(d => ({\n borough: d.boro_nm,\n count: parseInt(d.count)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"### Question 3: What types of crimes are most prevalent, and how do they vary by location?\n\nUnderstanding the composition of crime—what types of offenses occur most frequently—is essential for targeted interventions and policy development. Different crime types require different prevention strategies, law enforcement approaches, and community responses.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"q3_data = {\n const params = new URLSearchParams({\n $select: `ofns_desc, count(*) as count`,\n $where: `cmplnt_fr_dt >= '2023-01-01T00:00:00' AND ofns_desc IS NOT NULL`,\n $group: `ofns_desc`,\n $order: `count DESC`,\n $limit: 12\n });\n const res = await fetch(`${API_BASE}?${params}`);\n const data = await res.json();\n return data.map(d => ({\n offense: d.ofns_desc,\n count: parseInt(d.count)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"q3_borough_data = {\n const topCrimes = [\"PETIT LARCENY\", \"ASSAULT 3 & RELATED OFFENSES\", \"GRAND LARCENY\", \n \"CRIMINAL MISCHIEF & RELATED OF\", \"HARRASSMENT 2\"];\n const boroughs = [\"BROOKLYN\", \"MANHATTAN\", \"QUEENS\", \"BRONX\", \"STATEN ISLAND\"];\n const result = [];\n \n for (const crime of topCrimes) {\n for (const borough of boroughs) {\n const params = new URLSearchParams({\n $select: `count(*) as count`,\n $where: `cmplnt_fr_dt >= '2023-01-01T00:00:00' AND ofns_desc = '${crime}' AND boro_nm = '${borough}'`\n });\n const res = await fetch(`${API_BASE}?${params}`);\n const data = await res.json();\n if (data.length > 0) {\n result.push({\n offense: crime,\n borough: borough,\n count: parseInt(data[0].count)\n });\n }\n }\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"#### Analysis and Interpretation\n\n**Property Crime Dominance**: Petit larceny dominates NYC crime, accounting for over 170,000 incidents (22% of all crimes). Combined with grand larceny, property theft represents one-third of all crime.\n\n**Violent Crime Patterns**: Assault 3 & Related Offenses ranks second with ~120,000 incidents, though most involve disputes between acquaintances rather than stranger violence.\n\n**Geographic Variation**: The grouped chart reveals crime composition varies by borough—Manhattan shows highest petit larceny rates (retail/tourists), while Brooklyn has relatively higher assault rates.\n\n**Prevention Implications**: The dominance of property crime suggests theft prevention should be primary focus, with strategies including retail security partnerships, anti-pickpocketing units, and enhanced CCTV coverage.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"### Question 4: How do different crime types exhibit distinct temporal patterns?\n\nCrime doesn't occur randomly throughout the day—different offenses follow distinct hourly patterns based on opportunity, routine activities, and offender behavior. Understanding these temporal patterns enables more effective patrol scheduling, crime prevention, and resource deployment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"q4_data = {\n const data = await fetchData(\n \"cmplnt_fr_dt >= '2024-01-01T00:00:00' AND cmplnt_fr_tm IS NOT NULL\",\n 15000\n );\n \n const hourCounts = Array(24).fill(0);\n data.forEach(d => {\n if (d.cmplnt_fr_tm) {\n const hour = parseInt(d.cmplnt_fr_tm.split(':')[0]);\n if (hour >= 0 && hour < 24) hourCounts[hour]++;\n }\n });\n \n return hourCounts.map((count, hour) => ({ hour, count }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"#### Analysis and Interpretation\n\n**Afternoon Peak (12 PM - 6 PM)**: Crime reaches maximum levels during afternoon hours (900-1,000 incidents/hour), reflecting maximum street activity, retail operations, and rush hour commutes.\n\n**Night Hours (12 AM - 6 AM)**: Lowest crime period (400-500 incidents/hour) due to reduced street activity.\n\n**Morning Ramp-Up**: Gradual increase from 6 AM to noon as the city wakes up.\n\n**Key Implications**: Law enforcement should concentrate resources during afternoon shifts. The pattern supports routine activity theory—crime peaks when motivated offenders, suitable targets, and absent guardians converge.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"### Question 5: How do crime patterns evolve across both space and time?\n\nWhile previous questions examined temporal and spatial patterns separately, this analysis combines both dimensions to understand how crime has evolved across NYC's five boroughs over recent years. This spatio-temporal perspective reveals whether all areas experienced similar post-pandemic recovery or if divergent trends emerged.`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"q5_data = {\n const years = [2019, 2020, 2021, 2022, 2023, 2024];\n const result = [];\n \n for (const year of years) {\n const params = new URLSearchParams({\n $select: `boro_nm, count(*) as count`,\n $where: `date_extract_y(cmplnt_fr_dt) = ${year} AND boro_nm IS NOT NULL`,\n $group: `boro_nm`\n });\n const res = await fetch(`${API_BASE}?${params}`);\n const data = await res.json();\n \n data.forEach(d => result.push({\n year,\n borough: d.boro_nm,\n count: parseInt(d.count)\n }));\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"#### Analysis and Interpretation\n\n**Universal COVID Impact**: All boroughs experienced sharp 2020 declines, but magnitudes varied. Brooklyn and Manhattan saw steepest drops (~30-35%).\n\n**Divergent Recovery Patterns**:\n- **Brooklyn**: Fastest recovery and highest growth—surged 40-45% above 2019 levels by 2024\n- **Manhattan**: Steady recovery despite structural changes in commercial activity\n- **Queens & Bronx**: Parallel moderate trends, tracking ~20-25% above 2019\n- **Staten Island**: Most stable, only ~10-15% increase\n\n**Key Insight**: No \"return to normal\"—we're in a \"new normal\" with elevated crime levels. Brooklyn's dramatic surge warrants particular investigation and targeted interventions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"### Question 6: Where do different types of crimes typically occur?\n\nThe physical location where crimes occur—street vs. residence vs. commercial establishment vs. transit—provides crucial context for prevention strategies. Different premise types require different security approaches, different law enforcement tactics, and different policy interventions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"d3Sankey = require(\"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"#### Analysis and Interpretation\n\n**Street-Dominated Crimes**: Majority of crime flows lead to street locations—petit larceny, assault, and robbery primarily occur in public spaces.\n\n**Residential Crime**: Significant flows to residential premises for harassment and assault, indicating domestic conflicts.\n\n**Commercial Concentration**: Grand and petit larceny show strong retail/commercial connections, reflecting shoplifting and employee theft.\n\n**Prevention Strategies**: Different premise types demand different interventions—street crime needs enhanced lighting and patrols, residential crime needs security improvements and domestic violence support, commercial needs retail security partnerships.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"### Question 7: How do crime rates vary across NYC's police precincts?\n\nWhile borough-level analysis provides useful context, NYC's 77 police precincts show tremendous internal variation. Examining precinct-level patterns reveals the specific neighborhoods facing the greatest challenges and enables more targeted resource allocation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"q7_data = {\n const params = new URLSearchParams({\n $select: `addr_pct_cd, count(*) as count`,\n $where: `cmplnt_fr_dt >= '2023-01-01T00:00:00' AND addr_pct_cd IS NOT NULL`,\n $group: `addr_pct_cd`,\n $order: `count DESC`,\n $limit: 25\n });\n const res = await fetch(`${API_BASE}?${params}`);\n const data = await res.json();\n \n // Approximate populations for top precincts\n const precinctPops = {\n \"75\": 93000, \"14\": 145000, \"44\": 88000, \"73\": 102000, \"43\": 87000,\n \"46\": 91000, \"40\": 102000, \"42\": 95000, \"79\": 84000, \"47\": 88000\n };\n \n return data.map(d => ({\n precinct: d.addr_pct_cd,\n count: parseInt(d.count),\n rate: precinctPops[d.addr_pct_cd] \n ? ((parseInt(d.count) / precinctPops[d.addr_pct_cd]) * 1000).toFixed(1)\n : null\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"#### Analysis and Interpretation\n\n**Precinct 75 (East New York, Brooklyn)**: Clear leader with 35,000+ crimes, reflecting concentrated poverty and infrastructure challenges.\n\n**Precinct 14 (Midtown South, Manhattan)**: Second place with commercial hub characteristics—high crime despite small residential population.\n\n**Bronx Concentration**: Multiple Bronx precincts in top 10, facing similar challenges of concentrated disadvantage.\n\n**Geographic Concentration**: Just 10-15 precincts account for disproportionate share of NYC crime, suggesting targeted interventions could significantly impact citywide totals. However, this must be balanced against over-policing concerns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"### Question 8: What insights emerge when filtering by multiple dimensions simultaneously?\n\nThis **coordinated interactive dashboard** enables exploration of crime patterns across multiple dimensions simultaneously. Unlike previous questions that examined individual dimensions separately, this dashboard allows users to filter by borough, year, and crime type—with **all visualizations updating together** to reveal multi-dimensional patterns.\n\n**How to use this dashboard:**\n1. Select filters below to narrow your analysis\n2. Watch all three charts update simultaneously\n3. Hover over data points for detailed information\n4. Compare patterns across different filter combinations\n\nThis coordinated view demonstrates how crime patterns vary dramatically based on combined factors, enabling hypothesis testing and targeted analysis for specific scenarios (e.g., \"Manhattan robberies during 2023 evening hours\").","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"q8_data = {\n const data = await fetchData(\n \"cmplnt_fr_dt >= '2020-01-01T00:00:00' AND cmplnt_fr_dt < '2025-01-01T00:00:00' AND boro_nm IS NOT NULL AND ofns_desc IS NOT NULL AND cmplnt_fr_tm IS NOT NULL\",\n 50000\n );\n \n return data.map(d => {\n const hour = d.cmplnt_fr_tm ? parseInt(d.cmplnt_fr_tm.split(':')[0]) : null;\n const year = d.cmplnt_fr_dt ? parseInt(d.cmplnt_fr_dt.substring(0, 4)) : null;\n \n return {\n year: year,\n borough: d.boro_nm ? d.boro_nm.trim() : null,\n offense: d.ofns_desc ? d.ofns_desc.trim() : null,\n hour: (hour !== null && hour >= 0 && hour < 24) ? hour : null\n };\n }).filter(d => d.year && d.borough && d.offense);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof selectedBorough = Inputs.select(\n [\"All\", \"BROOKLYN\", \"MANHATTAN\", \"QUEENS\", \"BRONX\", \"STATEN ISLAND\"],\n {label: \"📍 Filter by Borough:\", value: \"All\"}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof selectedYear = Inputs.select(\n [\"All\", \"2020\", \"2021\", \"2022\", \"2023\", \"2024\"],\n {label: \"📅 Filter by Year:\", value: \"All\"}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"viewof selectedCrime = Inputs.select(\n [\"All\", \"PETIT LARCENY\", \"ASSAULT 3 & RELATED OFFENSES\", \n \"GRAND LARCENY\", \"HARASSMENT 2\", \"ROBBERY\", \"BURGLARY\",\n \"CRIMINAL MISCHIEF & RELATED OF\"],\n {label: \"🚨 Filter by Crime Type:\", value: \"All\"}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$43","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 30:"$2f:body"