Skip to main content
SimilarExport ZIP
100%

Let's make a map

✓ Published1🌍 Public
KKazushige Okuma
Last edited Sep 24, 2019
Created on Sep 24, 2019

This example visualizes the nominal GDP of ten countries from a CSV dataset on a natural Earth projection map. The map first draws a blue sphere backdrop using `d3.geoNaturalEarth1` and `d3.geoPath`, then overlays country outlines in light green from the world-atlas TopoJSON file. Countries are rendered as SVG paths using the `feature` method from topojson, with GDP values not yet linked to any visual encoding.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map

This example displays a natural Earth projection of the world map, with countries rendered as light green SVG paths against a blue sphere backdrop. It uses D3 v6’s `geoNaturalEarth1` projection and `geoPath` to generate geometries, while TopoJSON’s `feature` converts the world-atlas countries-110m.json data into GeoJSON for binding. Country borders are drawn with a subtle black stroke, and the initial sphere outline is added as a separate path element.

OOleg
81% match
Loading thumbnail…

Let's Make a Map!

This example displays the world's countries on a natural Earth projection, with a dark blue sphere (ocean) and light green landmasses. The map is built using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the TopoJSON library’s `feature` function converts country boundaries from the `world-atlas` dataset. Rendering occurs as SVG paths, with styling for country strokes and sphere fill.

Ggilbster
81% match
Loading thumbnail…

Let's make a map!

This example shows a world map rendered with countries filled in light green and a blue sphere representing the Earth’s surface, all within an SVG. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The code appends a sphere path and country paths, relying on the `json` function to load the TopoJSON data asynchronously.

Ccathykan
80% match
Loading thumbnail…

Map

This example uses D3 v5 to visualize global economic data with a natural Earth projection. Countries are filled with colors from a spectral scheme based on their economy category, and hovering highlights each region. The visualization includes a custom color legend with circles and text. Data is loaded from the world-atlas package as TopoJSON and TSV files, which are processed using the `feature` function from topojson and rendered with `d3.geoPath`. The map supports zooming through `d3.zoom` events.

Kklumng
80% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the nominal GDP of countries using a color scale based on income group, with darker colors indicating higher values. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from TopoJSON data loaded from the World Atlas. A color legend, built with a custom `colorLegend` component, displays the ordinal scale domains using `d3.scaleOrdinal` and the `schemeSpectral` color range. The visualization also supports zooming through `d3.zoom`, and country tooltips appear on hover via SVG `<title>` elements.

KKazushige Okuma
80% match
Loading thumbnail…

Let'smakeamap

This example displays a world map using the Natural Earth projection, with countries filled in light green against a dark blue sphere. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them with `topojson.feature`. The SVG paths are generated using `d3.geoPath` and `d3.geoNaturalEarth1`, with styling applied through CSS classes for the sphere and individual countries.

OOhayouKaminari
80% match
Loading thumbnail…

Let's make a map with D3.js

This example visualizes world countries on a Natural Earth projection, with landmasses rendered in light green against a blue spherical backdrop. The map is drawn as SVG paths using D3.js v5, combining the `geoNaturalEarth1` projection, `geoPath` for geometry generation, and the topojson library’s `feature` function to convert TopoJSON country boundaries. Geographic data is loaded remotely from the world-atlas package, and styling is applied via CSS classes for the sphere and country outlines.

JJames Barbour, Jr.
80% match
Loading thumbnail…

Let's make a Map!

This visualization displays world countries on a natural Earth projection, with each country filled in light green and highlighted red on hover. The map is rendered as SVG using D3’s `geoNaturalEarth1` projection and `geoPath`. Country boundaries come from a TopoJSON world-atlas file, while names are joined via a TSV file keyed by ISO numeric codes. Users can pan and zoom the map using D3’s `zoom` behavior, which applies a transform to the map group.

VVito
80% match