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 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Final Project Data Viz

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.

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 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
88% 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
88% 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
87% 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
87% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Final Project

This visualization shows the distribution of NYC crimes from 2012 to 2021, broken down by race categories such as Black, White, Asian, and Hispanic. Users select a race via radio buttons, which triggers a re-rendering of the chart. The view uses an SVG area chart with multiple colored line series representing different crime types across the ten-year period. The code relies on d3.v6 for DOM selection, scales, and path generation, with static data arrays embedded directly in the JavaScript and a rect background for the chart area.

YYi Yang
79% match
Loading thumbnail…

modified for voronoi

This example visualizes SFPD incidents by neighborhood in 2016, combining both a bar chart of average incidents and a line chart showing incident trends over time. Each neighborhood’s bar and corresponding line are linked, with mouseover highlighting the active district and click filtering to show only that district’s line. The code uses d3.nest() to aggregate data by district, d3.scaleBand for the bars, d3.scaleTime for the date axis, and d3 transitions for interactive animations. The data is loaded from the SF Open Data JSON API, and the visualization renders with SVG.

GGoomble
78% match