Final Project Bar Chart 1

100%

Final Project Bar Chart 1

✓ Published1🌍 Public

Last edited Apr 8, 2025

Created on Apr 8, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

87% 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…

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

83% match

Loading thumbnail…

NYC Hate Crime Analysis

This interactive bar chart visualizes NYC hate crime counts by bias type, with buttons to switch between 2020 and 2021 data. The visualization uses D3.js v6 with scalable vector graphics (SVG) and animated transitions to update bar heights and axes smoothly. Data is loaded asynchronously from a CSV file hosted on GitHub, and the chart maps bias categories to the x-axis using `d3.scaleBand` while the y-axis uses `d3.scaleLinear` to represent counts. A custom `update()` function handles data parsing and re-rendering.

RRona Xu

73% match

Loading thumbnail…

A4 Bar Chart in D3

This visualization displays the number of police shootings recorded by racial category, using a bar chart where bar heights correspond to aggregated counts from a CSV dataset. The chart is rendered in SVG via D3.js v7, using `d3.csv` for data loading, `d3.rollup` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for positioning. CSS hover effects change bars from steelblue to orange, while axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Nnathanjmuljadi@gmail.com

72% match