100%

Mapbox GL Ehtnicity Map San Francisco

✓ Published0🌍 Public

Last edited Mar 19, 2018

Created on Mar 18, 2018

This interactive Mapbox GL visualization maps the ethnic distribution of San Francisco's population. Each circle represents a data point from the 2010 census, with its color determined by a categorical ethnicity value (White, Black, Hispanic, Asian, or Other) and its radius scaling with map zoom. The example uses the Mapbox GL JS v0.26.0 library to load a vector source and render data-driven styled circles. Moving the mouse over the map queries and prints the feature properties to the console.

AI-generated description

Mapbox GL Ehtnicity Map San Francisco

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

San Francisco County Map

This map shows the geographic boundaries of San Francisco County as an SVG-rendered chloropleth, with county shapes drawn from a TopoJSON source loaded via `d3.json`. The visualization uses `feature` from topojson to extract GeoJSON data and `d3.geoPath` with an `geoEqualEarth` projection to render each county outline as a path. The React-based component, `Marks.js`, maps over the GeoJSON features to generate the SVG paths, while the map initially displays a "Loading..." state until the asynchronous data fetch completes via `useEffect`.

AAndre J Denais

64% match

Loading thumbnail…

SF Arrests

This visualization maps arrests in San Francisco over the past week, plotting incidents as circles atop neighborhood boundaries and streets. It uses a Conic Equal-Area projection with d3.geoPath to render the basemap and arrest points from the city’s SODA API, filtered to citations or arrests. Hovering a neighborhood highlights its outline and shows its name, while a details panel displays data for selected incidents. The code relies on D3 v5 for loading GeoJSON and JSON data, and for handling interactive mouse events.

Ccj-luo

63% match

Loading thumbnail…

Mapbox GL map example - turn on/off county 5 color

This example displays a Mapbox GL map of U.S. counties with a categorical five-color fill scheme. A menu allows toggling the visibility of the county fill layer on and off. The map uses the Mapbox GL JavaScript API and loads vector data from a Mapbox-hosted source. The layer’s fill color is determined by a categorical property, with each category assigned a distinct hex color stop. The map setup includes a center point in Texas and a zoom level of 5.

JJn1532

62% match

Loading thumbnail…

Mapbox GL Zoom-in Population map

This zoomable choropleth map of the United States visualizes population at the state level when zoomed out, then transitions to county-level population data when zoomed in past a threshold of zoom level 4. Built with Mapbox GL JS v0.27.0, the map uses two vector layers from a Mapbox-hosted source, each with its own color stops and legend. A `zoom` event toggles the visibility of the state and county legends dynamically. The map uses a light basemap style and is centered on the contiguous US.

JJn1532

62% match

Loading thumbnail…

Mapbox GL 5 Color map

This interactive map applies the five color theorem to a precomputed GeoJSON county map, ensuring that no two adjacent counties share the same fill color. Built with Mapbox GL JS v0.26.0, it dynamically loads a vector source from Mapbox and adds five fill layers, each filtered to a specific color from a preset palette. The map centers on Texas at zoom level 5, with a toggleable menu for the fill layer. A mouse-move event queries rendered features and logs their properties to the console, demonstrating feature inspection.

JJn1532

62% match

Loading thumbnail…

D3 Example

This map visualizes unemployment rates for census tracts in San Mateo County, California (2010), with each tract colored using a quantile scale from ColorBrewer’s Greys palette based on its unemployment percentage. Hovering over a tract reveals the precise unemployment value, and users can pan and zoom by clicking, dragging, and scrolling. The visualization is rendered using SVG with a Mercator projection, and includes a legend showing the color scale in percentage terms. Data is from the County of San Mateo Open Data Portal, with tract shapes simplified from US Census TIGER/Line files using MapShaper.

CCurran Kelleher

62% match

Loading thumbnail…

SF Arrests

This example displays arrest incidents from the San Francisco Police Department dataset for the most recent week, mapped over Analysis Neighborhoods and streets. It uses a Conic Equal-Area projection and a D3 geo path generator to render the basemap and arrest locations as circles. The visualization highlights neighborhoods on mouseover, with tooltips showing names. The code loads GeoJSON from SODA API endpoints and d3.json for data, while the styling is handled by CSS.

SSophie Engle

62% match

Loading thumbnail…

Fork of Multivariate Choropleth Experiments

This map visualizes multidimensional racial demographics for New York census tracts by blending three HCL color scales into a single fill per tract. The code uses d3.geoPath to render TopoJSON shapes, with d3.scaleSqrt encoding population counts for White, Black, and Asian residents into opacity values that are multiplied via color-blend. Hovering reveals precise population counts, while an ordinal legend identifies each race’s base hue. Data comes from the 2018 American Community Survey API, and the visualization supports pan and zoom through d3.zoom.

HHeidi Stockton

62% match