Skip to main content
SimilarExport ZIP
100%

yunnanMap with Selectable Countries

✓ Published0🌍 Public
GGerryLivermore
Last edited Apr 30, 2019
Created on Apr 29, 2019

This example visualizes a choropleth map of Yunnan Province, China, with selectable countries. The map encodes a categorical color value (`yszl`) using an ordinal color scale with a spectral scheme, and users can click individual countries to highlight them and dim the rest. A color legend allows filtering by color value. The visualization uses D3 v5’s `geoPath`, `geoMercator`, and `zoom` modules to project and render GeoJSON features, while the legend and map interactions are built with D3’s selection and event APIs. Data is loaded from external CSV and JSON sources.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a yunnan map with D3.js!

An interactive D3.js map of Yunnan Province visualizes population data across its administrative regions as semi-transparent circles sized by a square-root scale. Built with d3.geoMercator for projection and d3.geoPath for rendering GeoJSON boundaries, the map supports zooming and panning via the d3.zoom API. The choropleth uses a two-tone fill to distinguish regions with data from those without, while a legend explains the circle sizing. Population statistics are loaded from a CSV file and joined to geographic features using TopoJSON.

GGerryLivermore
81% match
Loading thumbnail…

Map with Selectable Countries

This example presents an interactive choropleth map of world countries colored by economic classification. Users can click countries to highlight them while dimming all others, and clicking again deselects. The visualization also includes a clickable color legend that filters which categories remain visible. Built with D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` for map rendering and interaction, while the color scale uses `d3.scaleOrdinal` with `d3.schemeSpectral`. Country boundaries and names come from TopoJSON world-atlas data.

Aalfigit15052019
78% match
Loading thumbnail…

Map with Selectable Countries

This example shows a choropleth map where clicking a country highlights it and dims all others, with a color legend on the side. It uses the d3.geoPath and d3.geoNaturalEarth1 projections to render the world map, while d3.scaleOrdinal and d3.schemeSpectral define the color encoding. Country data comes from world-atlas TSV and TopoJSON files, and interactions trigger re-rendering with updated opacity and stroke styles. The map supports zooming via d3.zoom.

Jjlspangl
78% match
Loading thumbnail…

Map with Selectable Countries

This example shows a choropleth map of world countries colored by economic grouping, with interactive selection: clicking a country dims all others and highlights the chosen region, and clicking again clears the selection. A color legend filters the map to a single category. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` for rendering SVG paths, plus `zoom` for panning. Data comes from TopoJSON and TSV files via the world-atlas package, with colors assigned by `scaleOrdinal`.

Ccaydener
77% match
Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map visualizes world countries colored by economic classification, with a linked legend that filters the map based on selected categories. Clicking a country either selects or deselects it, dimming all other countries; clicking a legend category toggles the map to show only countries in that category. The map uses `d3.geoPath` with the `geoNaturalEarth1` projection, `d3.zoom` for pan and zoom, and `d3.scaleOrdinal` with the spectral scheme for coloring. Data comes from the world-atlas TSV and TopoJSON files, rendered as SVG paths.

GGerryLivermore
77% match
Loading thumbnail…

Map with Selectable Countries

This interactive world map uses a choropleth encoding to visualize country-level data, tinting each nation dark blue based on values from the UN Population Estimates 2017 dataset. A click on any country triggers a smooth d3.zoom animation that magnifies the selection, while a color legend allows filtering of data categories. The visualization, rendered as SVG, is built with d3.geoPath and d3.geoNaturalEarth1 projections, all managed through the d3.selection API.

DDolbyref113
76% match
Loading thumbnail…

Map with Selectable Countries

This interactive map colors countries by economic classification using a spectral color scale. Users can click a country to highlight it while dimming all others, with the legend providing a color-coded key that is also clickable for filtering. The visualization uses D3 v5 with `geoNaturalEarth1` projection, `geoPath` for rendering, TopoJSON data from the World Atlas, and an SVG canvas. Zoom and pan functionality is implemented via D3's `zoom` event, with country coordinates sourced from TSV data.

Wwenleicao
76% match
Loading thumbnail…

Map with Selectable Countries

A choropleth map displays countries color-coded by economy using D3's `geoNaturalEarth1` projection and `geoPath`. Users click countries to select them, which highlights the chosen nation while dimming others; clicking again deselects. A color legend using `scaleOrdinal` with `schemeSpectral` allows filtering by income group. Data loads from world-atlas TSV and TopoJSON files, with SVG rendering supporting zoom interactions via D3's `zoom` event.

Ggcappadaniel
76% match