d3 choropleth (world) map

GDP Choropleth Viz save

A choropleth map colors countries by GDP per capita, with a slider to change the displayed year from 1970 to 2033. Hovering a country reveals a line plot of its GDP over time, annotated with red and green dashed lines marking the current year’s value. Built with D3 v6, it uses `d3.geoPath` for map rendering and `d3.scaleLinear` for both the map’s color scale and the plot’s axes.

88% match

GDP Choropleth Viz

A world map colored by GDP per capita displays each country’s economic standing for a selected year, controlled by a slider. Hovering over a country updates a line plot showing that nation’s GDP trend over time, with red and green reference lines marking the current year’s value. The visualization combines a `d3.geoEqualEarth` projection rendered as SVG with `d3.scaleLinear` color encoding, alongside a linked line chart built using `d3.line` and axis components. GDP data originates from a CSV file, while country boundaries use a GeoJSON source.

87% match

Kkfhujosefsson@dons.usfca.edu

World Map in D3

This example shows a choropleth world map displaying each country’s total GDP in current US dollars for 2015, colored from light to dark to indicate relative economic output. Countries without data appear in gray. The visualization uses D3 v7 and TopoJSON to load geographic boundaries, with d3.geoPath rendering the SVG country shapes. A hover tooltip reveals the exact GDP value per country, while a legend explains the color scale. The GDP data itself is embedded directly in the page as CSV text.

87% match

GDP Choropleth Viz final

This interactive visualization presents a global choropleth map where each country’s color encodes its GDP per capita, with a slider to shift the year between 1970 and 2033. Hovering highlights a country in pink, while selecting it turns it red and displays a line plot of that nation’s GDP over time, split into blue (pre-2023) and red (post-2023) segments. The map uses `d3.geoPath` for country shapes and a quantile-based color scale, while the line plot relies on `d3.axisBottom` and `d3.axisLeft` for axes. Data is sourced from a GDP dataset, with country name mappings to reconcile discrepancies.

86% match

GDP World Map

This world map visualizes geographic GDP data using a choropleth approach, coloring countries by their economic output. The example loads GeoJSON map data and renders it as SVG paths with `d3.geoPath`, while numeric GDP values drive a color scale. It uses `d3.json` to fetch the dataset and `d3.scaleThreshold` to map values to fill colors, with a tooltip providing details on hover. Built with D3 v6, the visualization demonstrates basic geographic mapping and data-driven styling in an SVG container.

A9 - World Choropleth Map

This example shows a world choropleth map of 2021 GDP values by country, with darker blue shading representing higher GDP. A tooltip displays the country name and GDP on mouseover, while a horizontal color legend encodes the scale. The visualization uses a geographic projection via `d3.geoMercator` and `d3.geoPath` to render GeoJSON features, with color mapping through `d3.scaleSequential` and `d3.interpolateBlues`. GDP data is loaded from a CSV using `d3.csv`, and the legend is built with the `d3-legend` library.

DDuc Pham

choropleth map

This choropleth map shows global economies colored with a sequential green scale, with a hover effect that highlights individual countries and a legend displaying the ordinal color categories. The visualization uses d3.geoPath with a natural Earth projection to render country boundaries from TopoJSON data provided by the world-atlas package, while loadAndProcessData merges TSV metadata with the geometry. Interactions include d3.zoom for panning and zooming the map, and colorLegend renders the categorical legend as an SVG group with circles and text labels.

AAndrew Fletcher

GDP Choropleth Viz failed log scale

A choropleth map colors countries by GDP per capita for a selected year, with a slider to scrub through time from 1970 to 2033. Hovering highlights a country in pink, and clicking pins it in red while a line plot beside the map shows that country’s GDP trajectory, split into blue (historical) and red (projected) segments past 2023. A toggle switches the map and plot between linear and logarithmic color/value scales. Built with D3 v6, the visualization uses `d3.geoPath` for map rendering and `d3.scaleLinear`/`d3.scaleLog` for the scales, with country data loaded from external files.