Skip to main content
SimilarExport ZIP
100%

Final Project Area Chart

✓ Published1🌍 Public
Nnathanjmuljadi@gmail.com
Last edited Apr 8, 2025
Created on Apr 8, 2025

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.

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
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 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
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
83% 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
82% match
Loading thumbnail…

area

This area chart displays temperature readings from San Francisco over time, loaded from a remote CSV file with D3’s `csv` function. The x-axis uses a time scale via `scaleTime`, while the y-axis uses a linear scale with `scaleLinear`. The filled region is generated with D3’s `area` generator, using `curveBasis` for smoothing, and rendered as an SVG path. Gridlines are drawn by configuring `axisBottom` and `axisLeft` with negative tick sizes. Interactive hover effects are not implemented; the visualization focuses solely on the static area representation.

Aabcz1234
74% match
Loading thumbnail…

Area Chart

This area chart visualizes a week of temperature data for San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The data is loaded from a CSV hosted on VizHub using `d3.csv`. The SVG rendering uses `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for labeled axes, and an `d3.area` generator with `curveBasis` to create the smooth maroon filled region. The visualization includes axis tick lines, padded ticks, and a title, with axis labels rotated for legibility.

Ggilbster
74% match