Skip to main content
SimilarExport ZIP
100%

Fork of Final Project Data Viz

✓ Published0🌍 Public
NNita
Last edited Apr 22, 2025
Created on Apr 22, 2025

This dashboard presents four coordinated views of San Francisco hate crime data from the SFPD, showing victim counts by suspect race and bias type, suspect counts by race and offense, and a monthly victim timeline. The bar chart uses `d3.rollups` for aggregation, the treemap employs `d3.treemap` with `d3.hierarchy`, and the bubble chart positions nodes via `d3.forceSimulation` with collision detection. An animated area chart uses a line path with dashoffset transitions and hover tooltips across all views.

AI-generated description

Hate Crimes in San Francisco Data Visualization

This project visualizes hate crime data in San Francisco, providing insights into patterns, bias types, and demographic information.

Overview

The visualization project includes several interactive charts that help users understand the nature and distribution of hate crimes in San Francisco:

  1. Bar Chart: Shows the total number of victims by suspect race
  2. Treemap: Displays victims by bias type with proportional rectangles
  3. Bubble Chart: Visualizes suspect counts by race and offensive act
  4. Area Chart: Tracks victim count over time (months)

Technologies Used

  • HTML5, CSS3 for structure and styling
  • D3.js (v7) for data visualization
  • Responsive design for various screen sizes

How to Use

  1. Open index.html in a modern web browser
  2. Hover over chart elements to see detailed information
  3. Explore patterns and relationships in the data

Data Source

This visualization uses data from the San Francisco Police Department's Investigated Hate Crimes dataset.

Project Structure

  • index.html - Main HTML file
  • styles.css - CSS styling
  • scripts/ - Directory containing all JavaScript files
    • main.js - Main application logic
    • barChart.js - Bar chart implementation
    • treemap.js - Treemap chart implementation
    • bubbleChart.js - Bubble chart implementation
    • areaChart.js - Area chart implementation
  • PD-Investigated-Hate-Crimes.csv - Dataset file
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Final Project Data Viz

This visualization presents a multi-chart analysis of hate crimes in San Francisco, sourced from a CSV file of police department data. It shows the total number of victims by suspect race using a horizontal bar chart, a treemap of victims by bias type, a bubble chart of incidents, and an area chart of victims per year. Built with d3.v7, the code uses d3.rollups, d3.scaleBand, d3.scaleLinear, and SVG rendering, with hover effects and tooltips providing interaction.

NNita
94% match
Loading thumbnail…

Final Project Data Viz

This interactive dashboard presents hate crime incidents in San Francisco, revealing the distribution of victims across suspect racial groups, bias types, offensive acts, and yearly trends. It combines a horizontal bar chart, a treemap, a bubble chart, and a time-series bar chart, all rendered as animated SVG graphics. The visualization uses D3 v7 APIs such as `d3.select`, `d3.csv`, `d3.rollups`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, with hover-based tooltips for detailed data inspection, sourcing from the PD-Investigated-Hate-Crimes.csv file.

Nnathanjmuljadi@gmail.com
92% match
Loading thumbnail…

Final Project Bubble Chart

This visualization shows aggregated hate crime data from San Francisco’s PD-Investigated-Hate-Crimes.csv as an animated bubble chart. It filters out entries with zero suspects and displays the total number of suspects per offensive act and suspect race group, with bubble size encoding the count and color mapping race categories. The chart uses D3 v7’s `d3.forceSimulation` with collision and center forces to position the SVG circles, while interactive mouseover events reveal detailed tooltips. Data is loaded via `d3.csv` and aggregated using `d3.rollups`.

Nnathanjmuljadi@gmail.com
87% match
Loading thumbnail…

Final Project Bar Chart 2

This bar chart visualizes the total number of victims of police-investigated hate crimes in San Francisco, aggregated by the most serious bias type (e.g., Anti-Asian, Anti-Gay). Using D3 v7, it loads data from a CSV file, aggregates victim counts with `d3.rollups` and `d3.sum`, and renders an SVG with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The bars are sorted in descending order and hover-highlighted in orange.

Nnathanjmuljadi@gmail.com
84% match
Loading thumbnail…

Final Project Bar Chart 1

This bar chart shows the total number of hate crime victims in San Francisco, aggregated by the suspects' racial group as recorded in the PD-Investigated-Hate-Crimes.csv dataset. The data is processed using `d3.rollups` and `d3.sum` to aggregate victim counts per race, then sorted in descending order and filtered to exclude the three smallest categories. The visualization is rendered as an SVG using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with bars styled via CSS and hover effects.

Nnathanjmuljadi@gmail.com
83% match
Loading thumbnail…

Final Project Area Chart

This area chart shows the total number of individual victims in San Francisco hate crimes per year, aggregated from CSV data and rendered in SVG. It uses D3 v7 with `d3.csv`, `d3.rollups`, `d3.scaleTime`, `d3.scaleLinear`, and the `d3.area` generator with a monotone X curve. The x-axis spans yearly ticks, while the y-axis displays victim counts. Data is grouped by year, summed, and smoothed to reveal trends over time.

Nnathanjmuljadi@gmail.com
82% match
Loading thumbnail…

Fork of Fork of D3: NYC Crime Visualization

This interactive dashboard presents NYC crime data across multiple coordinated views: a geographic map with a heatmap overlay, a pie chart, and two bar charts for age and race breakdowns. Users can filter by precinct and crime type, with all charts updating in response. The visualization uses D3 v6 with a Mercator projection via `d3.geoMercator()` and `d3.geoPath()` for the map, alongside SVG-based pie and bar charts. Crime color mapping and tooltips provide additional detail.

CChristianABeier
80% match
Loading thumbnail…

Fork of D3: NYC Crime Visualization

This interactive visualization explores NYC crime data through a coordinated multi-view dashboard. It combines a geographic heatmap using `d3.geoMercator` and `d3.geoPath` to display precinct-level crime intensity, with a donut chart (via `d3.arc`) breaking down crime types by color. Three bar charts for age, race, and additional demographics update alongside. The SVG-based scene includes a legend, tooltip, and reset button, with all sub-graphs animated over a 24-millisecond duration. The interface supports dynamic filtering by precinct and crime type, using `d3.scaleOrdinal` and linear/band scales for color and axes.

DDing
79% match