HTML Starter

100%

✓ Published0🌍 Public

Last edited Mar 5, 2020

Created on Mar 5, 2020

This example shows a world map rendered with D3’s Mercator projection, displaying country boundaries as SVG paths. The code loads GeoJSON country features from the world-atlas TopoJSON file via `topojson.feature`, then appends each country as a `<path>` using `d3.geoPath`. The accompanying `data.csv` includes population figures, but the current script does not encode population visually—only the geographic outlines appear. The map is drawn inside a fixed 960×600 SVG, with CSS styling for tick lines, though no axes or scales are currently applied to the map itself.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example displays a world map using the geoMercator projection, with country boundaries rendered as SVG paths. The map is generated from the world-atlas countries-110m GeoJSON dataset, loaded via d3.json. The code imports d3.geoPath and d3.geoMercator from d3.v5, and topojson’s feature function to extract country features. The resulting paths are appended to an SVG canvas of 960 by 500 pixels, demonstrating a minimal HTML setup with inline styling.

PPaul Chen

94% match

Loading thumbnail…

HTML Starter

This example displays a basic world map by loading TopoJSON country boundaries and rendering them as SVG paths. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to convert geographic coordinates into SVG path data. The code fetches the world-atlas dataset from a CDN, transforms it into GeoJSON using `topojson.feature`, and appends a `path` element for each country. The visualization is minimal, with no styling or interaction, serving as a starter template for geographic data exploration with React.

PPaul Chen

93% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with country boundaries drawn from TopoJSON data. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into screen paths, while the `topojson.feature` API extracts country geometries from the world-atlas dataset. All countries are appended as individual `path` elements to a 960×500 SVG canvas. The code loads data asynchronously via `d3.json` and relies on the bundled `index.js` to handle the data-binding and path generation.

Aaxliao

89% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map of countries using D3.js and TopoJSON. It loads geographic data from the world-atlas dataset and displays country boundaries as SVG paths. The visualization uses `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data from the TopoJSON features. Each country is appended as a `path` element to an SVG canvas sized 960 by 500 pixels.

Kkdvs94

89% match

Loading thumbnail…

HTML Starter

This example demonstrates a world map rendered as an SVG using the natural Earth projection, with countries filled in light green and the ocean shown as a translucent blue sphere. It employs D3 v5’s `geoNaturalEarth1` and `geoPath` to project geographic data, and TopoJSON’s `feature` to extract country polygons from the world-atlas dataset. The map is drawn by appending a sphere path and then binding country features to new SVG path elements through D3’s data join. Styling is applied via CSS classes for the sphere and country boundaries.

EEmma

89% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered with SVG paths, using D3.js v5 and TopoJSON. It loads geographic country boundaries from the world-atlas dataset and projects them with a Mercator projection. The code uses `d3.geoPath` and `d3.geoMercator` to generate the map, while `topojson.feature` converts the TopoJSON data into GeoJSON features. Countries appear filled in steel blue with black, semi-transparent borders, demonstrating a minimal choropleth-style base map.

HHwl98

89% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths filled with steel blue. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to convert geographic coordinates into screen paths. It loads world-atlas data from unpkg, extracting country features with `topojson.feature`. The React framework is not actively used in the visible code; instead, the script directly appends paths to an SVG element.

Vvans01

88% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It loads the world-atlas dataset and converts its TopoJSON topology into GeoJSON features, then draws each country as an SVG path. The map uses the Mercator projection via `d3.geoMercator` and `d3.geoPath` to generate the path data. Country polygons are filled with steelblue and outlined with black strokes, displaying a basic choropleth-style world map without additional data encoding.

Aabhijit01

88% match