Choropleth map

100%

Choropleth map

✓ Published2🌍 Public

Last edited May 15, 2025

Created on Apr 12, 2025

A choropleth map shows San Francisco’s 2025 tree-canopy rate by supervisor district, colored on a green sequential scale with a gradient legend and hover tooltips. Built with D3 v7, it uses `d3.geoMercator` and `d3.geoPath` to render GeoJSON district boundaries, while district-level data from a CSV is joined via a `Map`. `d3.scaleSequential` with `interpolateGreens` drives fills, and the vertical legend uses `d3.axisRight` and a linear gradient.

AI-generated description

MIT 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

72% match

Loading thumbnail…

Homework 3

This example maps tree maintenance requests in San Francisco for February 2020. It shows a choropleth-style basemap of Analysis Neighborhoods with individual requests overlaid as green circular points, using a Conic Equal-Area projection. The code loads GeoJSON boundaries and streets via D3’s `d3.json`, queries the SF 311 Cases SODA API endpoint with date filters, and renders everything as SVG using `d3.geoPath` and D3 v5.

Pphemmati

72% match

Loading thumbnail…

Merged Choropleth

This choropleth map visualizes population density across California census tracts, using the 2014 American Community Survey 5-Year Estimate. The map merges adjacent tracts with similar density into single polygons, reducing the file size from 1.5M to 328K and improving rendering speed and visual clarity. The d3.geoPath renders the projected shapes, while d3.scaleThreshold and d3.schemeOrRd assign colors, and d3.scaleSqrt positions the legend. The code uses topomerge and toposimplify from the topojson library to consolidate boundaries, with county borders overlaid as an outline.

Mmbostock

72% match

Loading thumbnail…

D3 - World Choropleth

This example displays a world choropleth map of population in 2023, using a Mercator projection and a yellow-to-red sequential color scale to represent each country’s population. The map is rendered as SVG paths, with a tooltip that appears on hover showing the country name and population. The code loads GeoJSON and CSV data via D3’s `d3.queue` and `d3.json`/`d3.csv` APIs, and it builds the choropleth using `d3.geoPath` with a projected path generator. A legend is added using the `d3.legend` library, and the project utilizes D3 v4, `d3-scale-chromatic` for the color interpolation, and `d3-geo-projection` for the map projection.

CChandana Srinivas

71% match

Loading thumbnail…

Time-Series Chart

This time-series chart displays San Francisco’s community-wide greenhouse gas emissions from 1990 onward, grouped by sector (such as Buildings, Transportation, and Municipal) with each trend drawn as a separate colored line. Data is aggregated by summing the Emissions_mtCO2e column by sector and year from a CSV file. The visualization uses D3 v7’s `d3.rollups`, `d3.scaleLinear`, and `d3.line` with monotone X interpolation, while color comes from the ColorBrewer Set2 palette via `d3.scaleOrdinal`. An interactive tooltip, built with D3’s selection API, appears on mouse events but is not configured to follow the mouse.

Hhxu51@usfca.edu

70% match

Loading thumbnail…

Area Chart

This area chart visualizes temperature in San Francisco over time, with a gradient-filled path showing the trend and labeled axes for date and temperature. The visualization is built with D3 v6, using `scaleTime` and `scaleLinear` for the scales, `area()` with `curveBasis` to generate the smooth area path, and `axisBottom` and `axisLeft` for the gridlines. Data is loaded from a CSV file via `csv()`, and the SVG rendering includes custom gradients defined in the markup.

SSharvariPhadke

70% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes country-level scalar data using color-coding over a geographical projection. Built with D3.js, it renders SVG paths from TopoJSON world data, with the projection handled by `d3.geoPath` and `d3.geoNaturalEarth1`. The map assigns colors based on a `scalerank` attribute using a `d3.scaleOrdinal` color scale, while a supplementary color legend displays the mapping. Interactivity is included via a zoom feature, and hovering over a country highlights it and displays a tooltip with its name and value.

SSean Ye

70% match

Loading thumbnail…

Untitled

This choropleth map shows population density per square mile across California counties, using a sequential orange-red color scale with a threshold legend. The visualization loads GeoJSON topology data and renders county boundaries as SVG paths via `d3.geoPath`. Colors are assigned by county ID using `d3.schemeOrRd[9]`, while the legend uses `d3.scaleThreshold` and `d3.axisBottom` to display the value ranges. County outlines are drawn from a separate topology object with a semi-transparent black stroke.

AAlice Hua

70% match