Export Code

Fork of Final Project Data Viz

Nita

Last edited Apr 22, 2025
Created on Apr 22, 2025

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