Skip to main content
SimilarExport ZIP
100%

Project | Load color | legend | moving

✓ Published1🌍 Public
MMukund Khandelwal
Last edited Oct 24, 2018
Created on Oct 24, 2018

This example displays a world map with countries colored by a categorical measure of "prudence," using a yellow-or-red ordinal color scale. An interactive legend allows users to click a color value to filter and highlight matching countries while dimming others. The visualization uses d3.geoPath with a geoEquirectangular projection, d3.zoom for panning, and a custom color legend component. Data comes from CSV and TopoJSON files, rendered as SVG paths with hover effects defined in CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Project | Load color | legend

This example visualizes world data on primary balance and economy using a choropleth map. The map projects countries with the `geoEquirectangular` projection via `d3.geoPath`, while fill colors are assigned by an ordinal color scale using a `schemeYlOrRd` palette. The data originates from a CSV file joined to the world-atlas TopoJSON. A custom legend lists the color scale's ordinal values, allowing users to click a legend item to update the map's color mapping.

MMukund Khandelwal
89% match
Loading thumbnail…

Project | Load color

This example visualizes national primary balance data on a world map, using color intensity to represent each country’s economic status. Built with D3 v5, it projects geographic features via `d3.geoPath` and `geoEquirectangular`, while `scaleOrdinal` with `schemeYlOrRd` maps data values to fill colors. A custom color legend component displays the ordinal scale with circles and labels, set against a semi-transparent background. Countries render as SVG paths with hover effects, and the map supports zooming through D3’s zoom behavior. Data comes from CSV files joined to TopoJSON world geometry.

MMukund Khandelwal
86% match
Loading thumbnail…

Project | Load

This visualization shows a world map where each country is colored according to its economic status, using a diverging red-yellow-green color scale derived from a dataset of primary balance values. The map supports zooming via d3.zoom, and a color legend generated with custom D3 code displays the ordinal scale’s categories. The geographic paths are rendered using d3.geoPath with a geoEquirectangular projection, while country data is loaded from a CSV file merged with TopoJSON world atlas geometry using topojson.feature.

MMukund Khandelwal
86% match
Loading thumbnail…

Project | Interaction

A choropleth map of world countries colored by primary balance, with a yellow legend panel for selecting economic categories. Clicking a legend item highlights matching countries and dims others; clicking again clears the selection. The map supports zoom and pan via d3.zoom. Built with d3.geoPath and geoEquirectangular projection, using TopoJSON world-atlas data and CSV attributes merged by ISO code. Hovering a country shows its name and primary balance in a tooltip.

MMukund Khandelwal
85% match
Loading thumbnail…

Project | last part

This visualization is a choropleth map of world countries colored according to a color scale derived from a categorical attribute, with a legend allowing interactive filtering of highlighted countries. The map uses the D3 geo projection API (`geoEquirectangular` with `geoPath`) to render country boundaries as SVG paths from TopoJSON data merged with CSV attributes. The legend, built with D3's ordinal color scale and the `schemeYlOrRd` color scheme, responds to clicks to toggle a selected category, which dims non-matching countries. The map also implements a zoom interaction via D3's `zoom` event.

MMukund Khandelwal
85% match
Loading thumbnail…

Project | Interaction | Re-submit

A choropleth map shows the primary balance of countries, colored on a Yellow-Orange-Red ordinal scale, with a clickable legend to filter and highlight selected economic categories. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` to render SVG country paths from TopoJSON (world-atlas 50m), joined with CSV data. The map supports zooming via `d3.zoom`, and legend interactions trigger re-renders that adjust country opacity and highlight states.

MMukund Khandelwal
82% match
Loading thumbnail…

Project | Interaction | Re-submit

A choropleth map shows the primary balance of countries, colored on a Yellow-Orange-Red ordinal scale, with a clickable legend to filter and highlight selected economic categories. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` to render SVG country paths from TopoJSON (world-atlas 50m), joined with CSV data. The map supports zooming via `d3.zoom`, and legend interactions trigger re-renders that adjust country opacity and highlight states.

MMukund Khandelwal
82% match
Loading thumbnail…

Interactive

A world choropleth map colors countries by economic classification, using a spectral ordinal color scale. Users can click any country to highlight it and dim all others, or click again to clear the selection; clicking legend swatches filters the map to a specific category. The visualization uses d3.geoNaturalEarth1 with d3.geoPath to render TopoJSON country outlines from the world-atlas dataset, d3.scaleOrdinal for coloring, and d3.zoom for panning and scaling. An SVG legend, built with custom functions, adds interactive filtering and selection feedback.

ZZhi Guangda
82% match