Mapbox GL in a Tableau Dashboard

100%

Mapbox GL in a Tableau Dashboard

✓ Published0🌍 Public

Last edited Mar 22, 2017

Created on Mar 8, 2017

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.

AI-generated description

test test readme

Similar vizzes

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

77% match

Loading thumbnail…

Collisions with Pedestrians in NYC

This interactive dashboard visualizes pedestrian collision data across New York City’s five boroughs from 2012 to 2015. It combines a map, time-series line graph, and bar chart to explore injury and fatality counts per month, highlighting differences by borough and time of day. The visualization uses d3.v3 with SVG and animation, loading data from local CSV files. The map, rendered via `d3.geoPath` from a TopoJSON file, allows users to click a borough to filter the other charts, which display per-capita rates and hourly patterns.

MMelanieFreed

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

76% match

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

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

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

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

75% match

Loading thumbnail…

Interactive NYC Borough map

An interactive map of New York City's five boroughs, colored distinctly, serves as a base for exploring traffic crash data. Users toggle checkboxes in a legend to display layers of colored points representing injured or killed cyclists, pedestrians, and motorists. The map shows these incident locations as colored circles at varying opacities. Hovering over a borough reveals a tooltip with summary crash statistics. Built with React, it uses D3's `geoMercator` for projection, `geoPath` for drawing, and `topojson-client` for handling geographic data, visualizing point data loaded from CSV files.

JJose Morales

74% match