Skip to main content
SimilarExport ZIP
100%

Project | Primary Balance | Chloro | Filter

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

This example presents a choropleth map of the world, colored by the economic status of each country. Hovering over a country highlights it in yellow and displays a tooltip with its name, primary balance, and economy classification. The visualization uses d3.geoPath with an equirectangular projection to render geographic features. The color legend is built with a custom colorLegend component, while data from a CSV file is joined with world-atlas TopoJSON. Styling and interactivity are handled through CSS and d3's selection and event APIs.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Project | Primary Balance | Chloro | Filter

A world map colored by each country's economic status, rendered with SVG paths via d3.geoPath and a geoEquirectangular projection. Hovering reveals a tooltip with the country name, primary balance, and broader economic classification. The color legend, built with a custom colorLegend function, uses an ordinal scale mapped to the d3 schemeSpectral range. Data comes from a CSV joined with TopoJSON world-atlas shapes, while d3.zoom enables panning and zooming.

MMukund Khandelwal
94% match
Loading thumbnail…

Project | Primary Balance | Chloro | Filter-2

This example displays a world map where each country is colored according to its economic status, using a spectral color scale. The map also shows primary balance data in tooltips when hovering over countries. A custom color legend on the left allows users to filter countries by clicking on specific economic categories, which dims non-selected values. The visualization uses d3.geoPath with a geoEquirectangular projection, d3.scaleOrdinal for coloring, and d3.zoom for interactive panning.

MMukund Khandelwal
94% match
Loading thumbnail…

Project | Primary Balance | Chloro

This example visualizes each country’s economy type and primary balance using a choropleth world map. Countries are colored by their economic classification through a categorical color scale with a custom legend, while hovering reveals the country name and primary balance value. The map is rendered as SVG using `d3.geoPath` with an equirectangular projection, and country outlines come from TopoJSON data. D3’s `d3.zoom` enables panning and zooming, and the visualization uses `d3.scaleOrdinal` and `schemeSpectral` for color mapping.

MMukund Khandelwal
93% 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
88% match
Loading thumbnail…

Project | Primary Balance | Part 1 | Chloro-new

This example displays a world map using D3.js, coloring each country orange and highlighting it yellow on hover. It visualizes primary balance and economic data by country, with tooltips showing country names. The visualization uses `d3.geoEquirectangular` projection, `d3.geoPath` to render geographic paths, and TopoJSON to convert world atlas data. Users can zoom and pan the map via D3’s zoom behavior. Data is loaded from CSV and JSON sources via `Promise.all`, and each country includes a `<title>` element for hover details.

MMukund Khandelwal
87% match
Loading thumbnail…

Primary Balance filter 1

This choropleth map shows the primary balance as a percentage of GDP for 55 countries, with a color legend that filters the map when a value is clicked, dimming non-matching countries. The visualization uses d3.geoEquirectangular for the projection and d3.geoPath to render the world map, with d3.zoom enabling pan and zoom interaction. Data is loaded via d3.csv and d3.tsv from the IMF website, and the ordinal color scale uses d3.schemeYlOrRd. The map is rendered as SVG, with hover highlighting and click-based filtering managed through D3 selections.

MMukund Khandelwal
85% match
Loading thumbnail…

Project | Primary Balance | Part 1

This map visualizes primary balance values by country, with each nation colored orange and displaying its name, primary balance, and economic status in a tooltip on hover. The visualization uses a geographic projection (`d3.geoEquirectangular`) to render world boundaries as SVG paths, with data loaded from a CSV file and world atlas TopoJSON. The code applies a zoom interaction and hover styling that changes the fill to yellow, utilizing `d3.geoPath` for path generation and the `topojson` library for feature conversion.

MMukund Khandelwal
84% match
Loading thumbnail…

Chloropleth Map

This choropleth map displays countries colored by economic classification, with a color legend positioned in the lower-left corner and hover interactions that highlight individual nations. The visualization uses D3 v5 with d3.geoNaturalEarth1 for projection and d3.geoPath for rendering geographic features, while d3.zoom enables pan and zoom functionality. TopoJSON and TSV data from the world-atlas package populate the map, with d3.scaleOrdinal mapping economy categories to a spectral color scheme. SVG elements render all visuals, and the legend uses custom D3 scales and tick marks for clarity.

AAdrian Tan
84% match