Skip to main content
SimilarExport ZIP
100%

Choropleth Tutorial - Leaflet

✓ Published0🌍 Public
Zzjutkarma
Last edited Apr 26, 2022
Created on Apr 20, 2022
Forked from HTML Starter

A choropleth map visualizes food-safety inspection counts across Chinese provinces, with hover interactions revealing province names and defect quantities. Built with Leaflet and D3 v5, the map loads GeoJSON boundaries from `china.js` and applies a color scale based on population density data. Additional charts—a word cloud and two pie charts—are embedded via Observable iframes, while a legend and dynamic tooltip enhance readability. The project integrates Vue as part of its framework stack.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth Map

This example displays a choropleth map of China’s provinces, colored by economic group using an ordinal color scale from `d3.scaleOrdinal` and `schemeSpectral`. It renders geographic boundaries with `d3.geoPath` and a natural Earth projection, and supports interactive pan and zoom via `d3.zoom`. A legend, built with custom SVG circles and text, shows category colors. Province data comes from a local `chinaMap.json` file, with additional metadata merged from a TSV source.

HhelloHailey-sketch
76% match
Loading thumbnail…

中国地图

A choropleth map of China renders each province as an SVG path using a Mercator projection centered on the country. The D3.js code loads GeoJSON map data and applies a categorical color scale, with provinces highlighted yellow on mouseover. Province names are positioned using projected centroid coordinates, with a vertical offset applied to prevent overlap between Macau and Hong Kong labels. The visualization demonstrates D3’s geographic path generator (`d3.geoPath`) and projection utilities.

Zzhuomo-maker
76% match
Loading thumbnail…

Choropleth Tutorial - Leaflet

A world map marks geographical distribution with colored markers and a choropleth overlay. Countries are tinted by a global score using a discrete color scale, while interactive tooltips and popups reveal detailed metrics for each location. The visualization is built with Leaflet, using tile layers for the basemap, GeoJSON for country boundaries, and custom markers bound to tooltips and popups. An info panel updates on hover, displaying scores for the selected country.

Yyoghurtx
75% match
Loading thumbnail…

Choropleth Tutorial - Leaflet

A world map marks geographical distribution with colored markers and a choropleth overlay. Countries are tinted by a global score using a discrete color scale, while interactive tooltips and popups reveal detailed metrics for each location. The visualization is built with Leaflet, using tile layers for the basemap, GeoJSON for country boundaries, and custom markers bound to tooltips and popups. An info panel updates on hover, displaying scores for the selected country.

Yyoghurtx
75% match
Loading thumbnail…

Chinese Map Template

This map of China displays province-level case counts using a bubble chart overlay. Each province is colored with a categorical scheme, and red circles sized by a square-root scale represent the number of cases per region. The visualization uses D3’s geoMercator projection, geoPath for drawing boundaries, and geoCentroid to position circles. Data comes from a local CSV joined with TopoJSON province geometries, with an interactive hover effect highlighting provinces.

LLex
74% match
Loading thumbnail…

map.js

This visualization shows the cumulative growth of China’s protected geographical indication products from 2003 to 2010. A choropleth map fills each province by the number of products registered up to a selected year, while a bubble map overlays proportional circles at province centroids. An interactive slider updates the year, and radio buttons switch between the two views. The code uses d3.json to load GeoJSON, d3.geoPath and d3.geoMercator for map rendering, d3.scaleThreshold and d3.scaleSqrt for color and size encoding, and d3.zoom for panning and zooming.

HhelloHailey-sketch
74% match
Loading thumbnail…

CHINA MAP

This example displays a choropleth map of China’s administrative regions, rendered as brown filled paths with white borders on a light yellow background. The visualization loads GeoJSON data for Chinese provinces and projects it using the equirectangular projection from `d3.geoEquirectangular`, with path generation handled by `d3.geoPath`. Users can pan and zoom the map via `d3.zoom`, which transforms the SVG group containing the state paths. The code integrates React, TopoJSON for feature extraction, and D3’s `scaleOrdinal` and `schemeCategory10` for potential color encoding.

AAISWARYAMARAPATLA1999
74% match
Loading thumbnail…

Choropleth Tutorial - Leaflet

This choropleth map displays country-level total scores using a color-coded legend, rendered with the Leaflet library. It loads GeoJSON country boundaries from a remote source and joins them with score data from a local JSON file. The map includes interactive features like hover tooltips and a legend to explain the color scale. The visualization uses Leaflet’s tile layer and GeoJSON API to create the thematic map.

Yyoghurtx
73% match