Worldmap

100%

✓ Published0🌍 Public

SSwapna1915

Last edited Jul 21, 2023

Created on Jul 21, 2023

This example displays a map of South Korea using a Mercator projection fitted to the country’s geographic bounds. It loads world country boundaries from a TopoJSON file via `d3.json`, extracts the South Korea feature with `topojson.feature`, and renders it as an SVG path using `d3.geoPath`. The visualization also demonstrates VizHub’s ES6 module imports and D3 loading through UNPKG.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This example visualizes the country of South Korea as a shaded map on a blank SVG canvas. It loads geographic data from the world-atlas TopoJSON dataset and uses the `topojson.feature` method to extract the country’s geometry. A `d3.geoMercator` projection fits the map to a 960×500 viewport via `fitSize`, and `d3.geoPath` renders the resulting polygon as a single dark path. The code demonstrates both external library imports via script tags and the basic D3 data-join pattern for drawing SVG shapes.

SSwapna1915

91% match

Loading thumbnail…

Activity 5_task 6(1)

This visualization displays a map of South Korea using a Mercator projection. The code loads world country geometries from a TopoJSON file, extracts the South Korea feature, and renders it as an SVG path. It uses `d3.geoMercator` and `d3.geoPath` to project and draw the map, with the data sourced from the `world-atlas` package. The resulting visualization shows just the country outline, fitted to the 960x500 pixel canvas.

KKeerthiAnnem

83% match

Loading thumbnail…

World map

This example displays a world map rendered as yellow countries on a gray sphere using an equirectangular projection. The code loads geographic data from a TopoJSON file, converts it to GeoJSON with `topojson.feature`, and draws the paths with `d3.geoPath`. Country shapes change color to blue on hover, and the visualization loads D3 and TopoJSON from UNPKG, demonstrating ES6 module imports within VizHub.

Nnikhilagopi

82% match

Loading thumbnail…

World Map using Mercator Projection

This example displays a world map using the Mercator projection, rendered as SVG paths with countries filled in white on a blue ocean background. It loads GeoJSON country boundaries from a gist and uses `d3.geoMercator` for projection, `d3.geoPath` to generate the paths, and `topojson.feature` to convert TopoJSON data. A sphere outline is drawn first, and country paths are appended dynamically from the fetched dataset.

Bbhargavarathod

82% match

Loading thumbnail…

World Map with Topojson data

This example displays a world map using TopoJSON data, rendering countries as blue-filled paths with pink strokes against a white spherical backdrop. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG paths, while the TopoJSON library’s `feature` method extracts country geometries from a remote JSON file. The visualization loads data asynchronously via `json` and appends each country path to the SVG canvas, demonstrating a straightforward choropleth-free baseline of global boundaries.

PPrathyusha0304

81% match

Loading thumbnail…

WorldMap

This example renders an orthographic world map using D3.js and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them onto a sphere with `d3.geoOrthographic()`. The map draws a blue sphere background and light green country paths with thin black strokes using `d3.geoPath()`. The visualization demonstrates basic data joining and SVG path generation from geographic features.

KKelsey Xu

81% match

Loading thumbnail…

World Map with Topojson data

This example displays a world map rendered as SVG paths, with countries in grey and yellow strokes against a red spherical backdrop. It uses the Mercator projection and D3’s `geoPath` to convert geographic coordinates into screen paths, while TopoJSON’s `feature` extracts country boundaries from a remote world.json file. The sphere and countries are appended directly to the SVG via D3’s `select` and data joins, with styling handled through CSS classes.

Ssudhamshu24

81% match

Loading thumbnail…

World Map with Topojson data

This example shows a world map rendered as a set of countries, with a pink sphere background and green-stroked yellow country shapes, using SVG output. It loads TopoJSON world data from a GitHub gist and converts it to GeoJSON features via the `feature` method from `topojson`. The map uses a `geoMercator` projection and `geoPath` from D3 v5 to generate the SVG paths, while `select` and `json` handle DOM selection and asynchronous data loading.

KKrishnaPriyaKurra

81% match