Map #3

100%

✓ Published0🌍 Public

Last edited Aug 9, 2016

Created on Aug 9, 2016

A world map is drawn with a single black outline representing one geographic feature, likely a country or region, using geographic coordinate data. The visualization uses the D3.js library, specifically the `d3.geoPath()` function with a `d3.geoMercator()` projection to render the path. The code loads a GeoJSON file containing polygon coordinates, applies the projection, and appends the resulting path to an SVG canvas. The map displays only the outlined shape with no fill or additional styling.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/a849b7cd1c15350560b93ce8752be363'>Map #1</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 World Map

This example displays a world map rendered as black countries with white borders on an SVG canvas. It uses D3.js version 5 and the `d3.geoMercator()` projection to transform geographic coordinates, with `d3.geoPath()` drawing the country boundaries. The map data is loaded from a GeoServer WFS endpoint as GeoJSON, which is then converted to TopoJSON via the `topojson` library to structure the geometries for rendering. The visualization showcases D3’s ability to handle geographic data through its projection and path APIs.

AAsmabee Khan

83% match

Loading thumbnail…

D3 World Map

This example displays a black-and-white world map using the Mercator projection, with country boundaries outlined in white. The map is rendered as an SVG using the D3.js v3 library, specifically employing `d3.geo.mercator()`, `d3.geo.path()`, and `d3.json()` to load and parse a `world-110m2.json` TopoJSON file. Country geometries are extracted from the TopoJSON topology via `topojson.object()` and drawn as SVG `path` elements. The visualization appears on a simple HTML page with a custom CSS rule defining the stroke and fill for each path.

GGT-GillesTeuwen

82% match

Loading thumbnail…

3.28-2

This example displays a world map rendered as a set of SVG paths using the Mercator projection. It loads geographic data from the World Atlas TopoJSON collection and converts it to GeoJSON with the TopoJSON `feature` function. The code applies `d3.geoPath` and `d3.geoMercator` to generate the country outlines, with paths appended to the SVG container. The visualization is minimal, showing only the mapped landmasses without additional styling or interactivity.

Aalbatross97

82% match

Loading thumbnail…

Map with D3.js

This visualization displays a world map using a natural Earth projection, with country boundaries rendered as filled SVG shapes. The sphere outline is drawn first using a `geoPath` generator with an empty GeoJSON sphere object. Country features are loaded from the World Atlas TopoJSON dataset via `d3.json` and converted using `topojson.feature`. The map uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` for path generation, with countries colored steelblue against a white background.

1123fischer

82% match

Loading thumbnail…

Map

This example displays a world map rendered with SVG paths, using a Mercator projection. It loads geographic data from a GeoJSON file and draws each country as a path element. The code uses D3 v5’s `d3.json`, `d3.geoMercator`, and `d3.geoPath` to project and trace the map, within a fixed 1400×700 viewBox. No interactions or styling are applied beyond the static continent paths, making it a minimal, barebones geographic visualization.

SShweta-tech

81% match

Loading thumbnail…

Map D3

This example displays a world map with light green countries on a dark blue background, rendered as SVG paths. The map uses the natural Earth projection and draws country boundaries with a thin black stroke. The code relies on the D3.js library, specifically `d3.geoPath` and `d3.geoNaturalEarth1`, along with the TopoJSON `feature` function to process GeoJSON data from the world-atlas package. Each country is drawn as a separate SVG path element generated from the projected coordinates.

Sshanmango

81% match

Loading thumbnail…

Let's Make a Map

This example shows a world map rendered as a three-dimensional globe using an orthographic projection. The sphere is filled dark blue, while country boundaries appear in light green with subtle black strokes, all drawn as SVG paths. The code uses d3.geoOrthographic and d3.geoPath to project and trace the map, with data loaded from the world-atlas TopoJSON file. TopoJSON’s feature method extracts country geometries, and each is appended as an SVG path inside a fixed 960×500 canvas.

PPabloReyesBetanzo

81% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map with D3.js, rendering countries as light-green SVG paths on a dark blue background. It uses the `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG path data, while TopoJSON’s `feature` method extracts country boundaries from a world-110m dataset loaded from unpkg. The visualization focuses on a clean, minimal map with thin black strokes separating countries, making it a straightforward introduction to geo-spatial data visualization.

NNita

81% match