100%

iSchool GeoVisualization Workshop

✓ Published0🌍 Public

Last edited Apr 11, 2018

Created on Apr 11, 2018

This visualization maps motor-vehicle crash locations in New York City, colored by crash type (injury, fatality, etc.), using a dark Mapbox basemap. It shows clustered point data to reveal geographic patterns of crash severity. The code uses Mapbox GL JS with D3.js v3 to load GeoJSON data from a GitHub repository, create a clustered circle layer, and apply categorical color mapping with radius scaling. The map includes navigation controls and a zoom-dependent radius transition.

AI-generated description

Template

Here you will find an empty HTML template for the workshop. We'll be adding javascript code to the section between the opening and closing <script></script> tags in the index.html file.

Let's get started!

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/clhenrick/'>clhenrick</a>'s block: <a href='http://bl.ocks.org/clhenrick/5b2614df2639dd153cf6151856692a52'>ischool-geo-viz-template</a>

mit Licensed

Similar vizzes

Loading thumbnail…

iSchool GeoVisualization Workshop

This example visualizes New York City traffic crash data as a clustered point map, distinguishing crash types—no injury, injury, fatality, and combined injury and fatality—through a categorical color scale. It uses Mapbox GL for the interactive basemap and layer rendering, while D3 v4 fetches and loads the GeoJSON data. The map clusters points at higher zoom levels using Mapbox GL’s built-in clustering, with circle radius scaling dynamically based on zoom. The underlying data comes from a public GitHub repository containing NYC crash records, rendered over a dark map style for contrast.

FFred-Fan

92% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This example shows a blank dark-themed Mapbox map centered on New York City, with no visible data layers or points of interest. The visualization is a workshop template, so the map is intentionally empty, waiting for users to add their own geographic data. It loads a Mapbox GL map with a navigation control, using Mapbox’s dark style and an access token for tile access. The code references a local GeoJSON dataset of NYC crashes as a remote URL, but the data is not yet drawn on the map, making this a starting point for hands-on geovisualization exercises.

55un

83% match

Loading thumbnail…

6. Interactive Components

This interactive map of New York City visualizes 2021 car collision statistics by borough, with color encoding for total accidents and hover effects revealing detailed metrics like severe case rates and leading causes. The visualization uses D3 v6 (with legacy v3 and v4 scripts) to render SVG paths from a GeoJSON file, employing a Mercator projection via `d3.geo` and `d3.geoPath`. A sequential color scale (`d3.scaleSequential`) maps collision counts, while mouseover events trigger text updates and dynamic styling changes. The design includes hover-triggered highlighting, animated text transitions, and a color legend axis.

YYuren Dong

78% match

Loading thumbnail…

Mapbox GL in a Tableau Dashboard

This dashboard combines a Mapbox GL map of New York City vehicle collisions with three embedded Tableau dashboards. Users select a collision metric—cycling injuries, cycling fatalities, pedestrian injuries, or pedestrian fatalities—which filters the map's vector source layer and updates the popups. The dark-themed map displays collision points over borough boundaries, while the Tableau views provide supplementary charts. The code uses the Mapbox GL JavaScript API and the Tableau JavaScript API to embed the visualizations.

JJn1532

77% match

Loading thumbnail…

Gist 61957648a96af6b4167e

This example visualizes traffic crash records from a Gist file, mapping each participant’s location and attributes onto a canvas. It uses a force-directed layout with `d3.forceSimulation` to spatially arrange points, while `d3.geoPath` renders geographic features from the included geometry. The code reads the raw text data, parses fields like crash severity and participant details, and draws small circles colored by injury severity. It also employs Canvas `getImageData` for pixel-level rendering, and transitions with `transition.attrTween` to animate point movement. The result is an interactive scatterplot-style map of incident density and participant distribution.

CCaged

76% match

Loading thumbnail…

NYC Motor Crashes Exploratory Analysis

This interactive visualization explores NYC motor vehicle crash counts by hour, with buttons to filter results by day of the week or view the overall total. It renders animated SVG bar charts using D3 v7, transitioning axes and bar heights over two seconds when a new day is selected. The data comes from a remote CSV of 2020 collision statistics, parsed with d3.csv. The code dynamically updates scales, axes, and bar positions via d3.scaleBand, d3.scaleLinear, and selection joins with transition.

Mmtz2110

74% match

Loading thumbnail…

04: Custom Map Controls

This example demonstrates a map with two toggleable layers—hexbins and crash points—overlaid on a Mapbox GL base map. The hexbins are generated from a GeoJSON dataset of NYC crashes using Turf.js to create a hex grid and count incidents per cell, colored with a Jenks natural breaks classification. Custom UI buttons let users toggle each layer on and off, with active states highlighted. The code also shows how to filter invalid geometries and style layers dynamically.

55un

73% match

Loading thumbnail…

D3: NYC Crime Visualization

This interactive NYC crime visualization presents multiple coordinated views: a choropleth map of precincts, a pie chart of crime types, and bar charts showing age and race distributions. Users can click precincts or crime categories to filter across all views, with a reset button to restore the full dataset. The visualization uses D3 v6 with d3.geoMercator and d3.geoPath for the map projection, d3.arc for the pie chart, and d3.scaleBand for bar charts. Crime data is color-coded via a linear gradient legend and tooltip interactions.

Ooliverliuoo

71% match