Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Oct 4, 2018

Created on Oct 4, 2018

Forked from Choropleth Map with Interactive Filtering

This interactive visualization combines a scatter plot and a categorical color legend to show GDP variation across years for the USA and Germany. Users can click a country in the legend to filter the data, highlighting selected points while dimming others. The project uses D3 v5 with `d3.scaleOrdinal` for color assignment, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for tick marks, rendering as SVG from a CSV dataset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification, with an interactive legend that filters the map to highlight a selected income group while dimming others. The visualization also includes a linked scatterplot showing GDP over time for each country, where points corresponding to the selected economic group remain opaque. Built with D3 v5, the map uses `d3.geoPath` and TopoJSON to render geographic features, while the legend and scatterplot are implemented as reusable functions. Data is loaded from a CSV file hosted on VizHub, and SVG is used for all rendering.

MMukund Khandelwal

85% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by their economy category, with an interactive color legend for filtering. Clicking a legend category highlights only matching countries in full color while dimming others. The visualization uses d3.scaleOrdinal with schemeSpectral for color encoding and d3-geo projections for rendering SVG paths from TopoJSON world data. The legend implements click handling and opacity filtering, while hover states change country fill colors.

Ssakhabutdinov

85% match

Loading thumbnail…

Almost Final-11

This visualization displays GDP variation over time for the USA and Germany, with each country represented by a distinct color from a categorical scale. Users can click on the color legend to highlight a specific country’s data points while dimming others. Built with D3 v5, the chart uses `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs to render an SVG scatterplot with interactive filtering, loading CSV data from a remote URL.

MMukund Khandelwal

84% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of the world displays a categorical color scale, coloring each country by its economy income group. The map uses a geographic projection and SVG paths via `d3.geoPath` and the `geoAlbersUSA` projection. The color legend, built with `d3.scaleOrdinal` and `schemeSpectral`, shows discrete categories; clicking a legend item filters the map by fading non-matching countries to low opacity while highlighting the selected category. The data originates from a TopoJSON file and a TSV table loaded concurrently, which are merged by country ID.

Aanduskong

84% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economy category and includes an interactive color legend for filtering. Hovering a legend item highlights matching countries and dims all others, while clicking toggles the selection. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths with click-driven state updates.

JJunyanL

84% match

Loading thumbnail…

Choropleth Map With Interactive Filtering

A choropleth map of world countries colored by economy, with an interactive color legend that filters the map to highlight countries in a selected category. Clicking a legend entry dims non-matching countries and increases their stroke width; clicking again clears the filter. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to render topojson country features from the world-atlas dataset, with `d3.scaleOrdinal` and `schemeSpectral` for colors.

Bbprokopowicz

84% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map uses colors to display the economy category of each country, with an interactive color legend that filters the map. Clicking a legend item dims all countries not in that category, while hovering over a country turns it red. Built with D3 v5, the visualization uses `geoPath` and `geoNaturalEarth1` for map projection and `scaleOrdinal` with `schemeSpectral` for coloring. The code loads world country boundaries from TopoJSON and economy data from a TSV file using `d3.tsv` and the `topojson` library.

Aankita1mit

84% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global nominal GDP uses color to encode economic values per country. Users click entries in an ordinal color legend to filter the map, dimming countries not belonging to the selected category and highlighting those that do, while a subtle sphere background remains. The map and legend are rendered as SVG, built with D3 v5, using `d3.geoNaturalEarth1` for projection and `d3.geoPath` for drawing countries. Data is loaded from TSV and TopoJSON sources, with the zooming interaction handled via `d3.zoom`.

KKazushige Okuma

84% match