Staff list

100%

✓ Published0🌍 Public

Last edited Feb 27, 2019

Created on Feb 27, 2019

This example displays a hierarchical world map organized by continents and regions, using a static SVG rendering. The visualization loads data from a nested JSON file and logs it to the console, though it does not yet render the geographic features. The code imports d3-selection, d3-json, d3-geoPath, and d3-geoNaturalEarth1 from D3 v5, along with topojson’s `feature` function, but only initializes the SVG dimensions and fetches the data. The map projection and path generation are prepared but remain unused in the current implementation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a global landmass map rendered as an SVG, with continent interiors outlined and a graticule grid overlaid. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath for geographic shapes, while topojson's feature and mesh functions process the world-atlas@2.0.2 GeoJSON data. The map’s sphere and graticules are drawn alongside land features, all styled through CSS to distinguish ocean, terrain, and boundary elements.

GGabriel

80% match

Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, with countries rendered in brown and the surrounding sphere in light blue. It demonstrates fundamental D3.js DOM manipulation by appending SVG paths for each country from TopoJSON data loaded from a remote gist. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `topojson.feature` to convert geographic data into SVG path strings, while D3’s selection and data-join methods handle the dynamic creation of country elements.

Vvarun-030

79% match

Loading thumbnail…

World Example

This world map visualization displays global landmasses and country interiors using an SVG rendering. The map is constructed with D3’s geoNaturalEarth1 projection and geoPath for geographic shapes, while topojson’s feature and mesh functions process the world-atlas topology data. The graticule, sphere outline, and land areas are styled with distinct colors, and the visualization is built as a React component that loads data asynchronously via d3.json.

PPedro Henrique Vanali

79% match

Loading thumbnail…

D3 course - World Map

This example displays a world map rendered as an SVG, using a natural Earth projection to show countries, graticules, and a stylized globe with colored landmasses and ocean. It loads GeoJSON data from the world-atlas TopoJSON file, converting it with `feature` and `mesh` from topojson. The visualization uses `d3.geoPath` and `d3.geoNaturalEarth1` for projections, React hooks for data fetching, and CSS to style the map elements.

JJames Rhodes

79% match

Loading thumbnail…

d3 World Map

This visualization displays a world map using an orthographic projection, with countries rendered as light green polygons that highlight orange on hover. The code loads geographic data from the world-atlas package via TopoJSON and joins it with country names from a TSV file. Using d3.geoPath and d3.geoOrthographic, it draws the globe’s sphere and country boundaries as SVG paths, with tooltips showing each nation’s name via appended title elements. The implementation relies on d3.v5, topojson-client, and a React-friendly structure with Promise.all for asynchronous data loading.

NNoah Weinberg

79% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green and the globe as a blue sphere. It demonstrates loading geographic data from a TopoJSON file via `d3.json` and converting it to GeoJSON features using the `feature` function from the TopoJSON library. The map projection and path generation are handled by `d3.geoNaturalEarth1` and `d3.geoPath`, which draw the country boundaries and the sphere outline. The code uses D3 v5 and relies on the world-atlas dataset at 110m resolution.

Ggcappadaniel

79% match

Loading thumbnail…

Map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue ocean background. It uses D3.js version 5 to load geographic data from the World Atlas TopoJSON file and convert it to GeoJSON features. The map is drawn with the `d3.geoPath` and `d3.geoNaturalEarth1` projection, while `topojson.feature` extracts country boundaries from the dataset. The code appends paths for the sphere and each country, applying basic styling from an external CSS file.

Mma-jacobs

79% match

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths and oceans as a dark blue sphere. The visualization loads geographic data from the visionscarto-world-atlas TopoJSON file and uses D3 v5’s `geoPath` and `geoNaturalEarth1` to project the features. TopoJSON’s `feature` API converts the topology into GeoJSON, while SVG paths are appended dynamically to the canvas.

AAmol Kulkarni

79% match