100%

iSchool GeoVisualization Workshop

✓ Published0🌍 Public

Last edited Apr 11, 2018

Created on Apr 11, 2018

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.

AI-generated description

Template

Here you will find an HTML template for the geo-viz workshop. We'll be adding javascript code to the section between the opening and closing <script></script> tags in the index.html file. There are already some variables there to help us get started with.

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-00</a>

mit Licensed

Similar vizzes

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

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

93% match

Loading thumbnail…

iSchool GeoVisualization Workshop

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.

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

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

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

80% match

Loading thumbnail…

NYC Crash Point Map with interactive legend

A map of New York City displays crash locations as small black dots over borough polygons, each tinted with a distinct color. An interactive legend lets users hover over a borough name to highlight its corresponding region and dim others. Built with React and D3, the visualization uses `d3.geoMercator` and `d3.geoPath` to project and render the TopoJSON-derived borough boundaries, while crash coordinates from a CSV file are plotted as SVG circles. Hovering a legend item dims non-matching boroughs and intensifies crash point opacity for the selected area.

JJose Morales

77% match

Loading thumbnail…

NYC Crash Point Map with interactive legend

This interactive map displays motor vehicle crash locations across New York City's five boroughs, with each borough filled with a distinct color. A legend allows users to hover over borough names, fading non-selected areas to highlight crash density in a specific region. The visualization uses React with d3.geoMercator and d3.geoPath to project TopoJSON boundary data from `nyc_boroughs.topo.json` into SVG paths. Crash points from a CSV file are rendered as small black circles, with positions calculated via the projection function.

JJose Morales

77% match