Skip to main content
SimilarExport ZIP
100%

DV_Project_13

✓ Published0🌍 Public
GGOPI MUPPURI
Last edited Dec 1, 2024
Created on Dec 1, 2024
Forked from Hello VizHub

This dashboard displays Boston incident data through three interactive charts: a horizontal bar chart of the top ten offense types, an area chart showing incident distribution across the 24 hours of the day, and a pie chart of incidents by police district with percentage labels. Built with D3 v7, the code uses `d3.rollup` for data aggregation, `d3.scaleBand` and `d3.scaleLinear` for the bar and area charts respectively, and `d3.area` with `curveMonotoneX` for the hourly trend. A responsive CSS grid arranges the chart cards, with data loaded from a remote CSV file.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Viz Function Concept

This dashboard visualizes Boston incident data from a CSV file using three D3.js v7 charts: a bar chart of offense types, an area chart showing hourly incident distribution, and a pie chart of incidents by district. The code uses `d3.rollup` to aggregate the data, `d3.scaleBand` and `d3.scaleLinear` for the bar and area charts, and `d3.area` with `d3.curveMonotoneX` for the hourly trend. Each chart renders as SVG within responsive cards that update their layout at different screen sizes.

BBharath kumar
88% match
Loading thumbnail…

dv_project

This example presents five coordinated crime data visualizations—a scatter plot, stacked bar chart, heat map, line graph, and pie chart—rendered as SVGs using D3 v7. It loads CSV data from a GitHub gist and demonstrates multiple D3 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, `d3.stack`, `d3.group`, `d3.rollup`, and `d3.axisBottom`. The scatter plot maps longitude and latitude coordinates, while the stacked bar and heat map show top offense categories by year using `d3.schemeCategory10` and `d3.interpolateBlues` color scales.

GGOPI MUPPURI
80% match
Loading thumbnail…

Major Crimes in Boston

This example visualizes major crimes in Boston from a city dataset, using a bar chart where each bar represents a crime type and its length corresponds to the number of incidents. The bars are color-coded by year, and hovering reveals a tooltip with the crime name and exact count. Built with Vega-Lite and rendered via the `vega-lite-api`, it loads data from a CSV URL using D3’s `csv` method, then applies custom axis styling and tooltip handling from `vega-tooltip`.

JJosvin John
76% match
Loading thumbnail…

Fork of D3: NYC Crime Visualization

This dashboard visualizes NYC crime statistics across multiple coordinated views: a geographic map shading precincts by crime volume, a pie chart of crime type proportions, and bar charts breaking down arrests by age and race. Users can filter the entire interface by clicking map regions or crime categories in the pie. Built with React and D3 v6, it uses `d3.geoMercator` and `d3.geoPath` to project the map, `d3.arc` for donut slices, and `d3.scaleBand`/`d3.scaleLinear` for the bars. A color legend uses CSS linear gradients, and an SVG animation resets the view when the button is clicked.

RRaianeTI
76% match
Loading thumbnail…

Sheet2

A pie chart displays the distribution of incident counts across police districts, using a categorical color scale and labels positioned around each slice. The chart loads comma-separated data via `d3.xhr`, parses it with `d3.csv.parse`, and renders the visualization using `d3.layout.pie` and `d3.svg.arc`. Text annotations show the district name and magnitude for larger arcs, with the title drawn as an SVG text element. The code relies on D3 v3 and a fixed canvas size of 600 by 600 pixels.

CCatherine-Yu
75% match
Loading thumbnail…

Fork of Fork of D3: NYC Crime Visualization

This interactive dashboard presents NYC crime data across multiple coordinated views: a geographic map with a heatmap overlay, a pie chart, and two bar charts for age and race breakdowns. Users can filter by precinct and crime type, with all charts updating in response. The visualization uses D3 v6 with a Mercator projection via `d3.geoMercator()` and `d3.geoPath()` for the map, alongside SVG-based pie and bar charts. Crime color mapping and tooltips provide additional detail.

CChristianABeier
75% match
Loading thumbnail…

forkforlinechart

This line chart visualizes crime rates across different towns, using a filtered subset of the Boston housing dataset. The chart shows a single steelblue line connecting points for each town, with rotated x-axis labels for readability. The visualization is built with D3 v7, using `d3.csvParse` to load the data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and a `d3.line` generator to draw the path. The SVG is rendered directly in the browser, with margins and axes configured manually. The chart highlights per-town variation in per-capita crime, ordered alphabetically along the horizontal axis.

Rranjithkmr598@gmail.com
75% match
Loading thumbnail…

Boston Crashes Project

This interactive visualization explores nine years of Boston crash data from the city’s Vision Zero program, using a geographic map and a time-series line chart. The map plots individual crash locations as colored points by crash type, filtered via checkboxes, and is rendered with D3’s `d3.geoPath` and parsed GeoJSON. The line chart aggregates monthly crash counts, with colored seasonal bands and toggleable lines for each crash type, implemented using D3 scales, axes, and `d3.line`. Both views load data directly from CSV and GeoJSON files, ensuring scalable performance.

Ssjpeno@wpi.edu
75% match