Final Project Bubble Chart

100%

Final Project Bubble Chart

✓ Published2🌍 Public

Last edited Apr 8, 2025

Created on Apr 8, 2025

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

AI-generated description

MIT Licensed

Similar vizzes

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

91% match

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

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…

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

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

85% 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

83% match

Loading thumbnail…

A5 Bubble Chart D3

This bubble chart visualizes police shootings by age and race, with each circle representing the count of incidents for a specific age and racial category. The x-axis maps age, the y-axis maps the count of shootings, and circle size encodes frequency using a square-root scale so area remains proportional. The chart is built with D3 v7, loading CSV data, aggregating with `d3.rollup`, and rendering SVG circles using scales like `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` with `schemeCategory10` colors. Axes and labels are added via `axisBottom` and `axisLeft`.

Nnathanjmuljadi@gmail.com

75% match

Loading thumbnail…

Untitled

This visualization plots U.S. state-level crime statistics, showing violent crime totals against homicide cases for each state, with bubble size encoding population and color assigned by state name. The chart uses d3.v4 with d3-scale-chromatic for color mapping and includes an interactive tooltip that displays the state name on hover, while also fading out non-hovered bubbles. Data comes from the estimated_crimes.csv file, rendered as SVG circles with axes and labels generated using d3.axisBottom and d3.axisLeft.

Ssruthisenapathi

74% match