Project | Load

100%

Project | Load

✓ Published1🌍 Public

Last edited Oct 24, 2018

Created on Oct 24, 2018

Forked from Project | Primary Balance | Part 1

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.

AI-generated description

MIT Licensed

Similar vizzes

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

91% match

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

87% match

Loading thumbnail…

Project | Load color | legend | moving

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.

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

86% match

Loading thumbnail…

Project: Primary-Balance Testing

This visualization displays a world map highlighting countries by their economic status, with hover tooltips revealing each country’s name, continent, and broader economic position. It renders geographic boundaries using D3’s `geoEquirectangular` projection and `geoPath`, layered over a blue sphere. TopoJSON data from world-atlas is converted to GeoJSON via `feature`, while ISO country codes are matched to metadata from a TSV file. The map supports zooming and panning through D3’s `zoom` behavior, and SVG paths respond to hover with a fill and stroke color change.

MMukund Khandelwal

84% match

Loading thumbnail…

Project: Primary Balance, Part 1

This visualization displays a world map where each country is colored grey with a red stroke, and hovering over a country reveals its primary balance, economy type, and name in a tooltip. The map uses an equirectangular projection rendered as SVG paths via d3.geoPath, with TopoJSON data from the world-atlas package combined with CSV data loaded from VizHub. Zooming is enabled through d3.zoom, and the project uses D3 v5 to bind the CSV attributes to each geographic feature.

MMukund Khandelwal

84% match

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

84% 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

83% match