100%

iSchool GeoVisualization Workshop

✓ Published0🌍 Public

Last edited Apr 10, 2017

Created on Apr 10, 2017

This example shows a map of New York City traffic crashes, with each crash represented by a colored circle that indicates the type of severity (injury, fatality, or no injury). The map is built using Mapbox GL JS for the interactive basemap, while D3.js (v3) handles fetching the GeoJSON crash data and styling the circle layer’s color and radius. The circle size scales dynamically with zoom level, and Turf.js is loaded but not used in the visible code. The data comes from the `nyc_crashes.geojson` file hosted on GitHub.

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/54868a85037c69e54f5e43ffe07c7ee9'>ischool-geo-viz-template</a>

mit Licensed

Similar vizzes

Loading thumbnail…

iSchool GeoVisualization Workshop

This interactive map visualizes New York City motor vehicle crash locations using Mapbox GL and D3.js. The page displays raw crash data points from a GeoJSON file alongside hexbin aggregations loaded from a separate processed JSON source. A dark map style provides the base layer, with the map centered on the city at zoom level 10. The implementation initializes a Mapbox GL map instance and references two remote data URLs, showing how to combine geographic data sources in a workshop template.

MMartiHearst

93% match

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

55un

92% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This example presents a dark-themed interactive map of New York City motor vehicle crash locations, visualized as a point dataset over a base map. The view centers on the city and uses an initial zoom level of 10, with a full-screen map container. The visualization relies on the Mapbox GL JS API (v0.43.0) to render the base map and manage user interaction. It loads crash data from a remote GeoJSON file and also references a second JSON file containing hexbin aggregates, although the code shown only initializes the map and sets the access token. The map is configured with the "dark-v9" style, and D3 v4 is included in the page.

MMartiHearst

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

82% match

Loading thumbnail…

CrashData

This interactive map visualizes the distribution of motor-vehicle collisions across New York City, with each crash represented as a point on a geographic grid. The code uses D3.js's `d3.geoPath` to render city boundaries and `d3.select` with a custom color scale to encode crash density by neighborhood. Data is loaded from a local CSV via `d3.csv`, and the rendering relies on the Canvas API for efficient point plotting. A brush interaction, implemented through `d3.brush`, allows users to filter collisions by time of day or day of week, dynamically updating the displayed points.

DDouglas mochama

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

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

77% match