d3.js map with markers

100%

d3.js map with markers

✓ Published0🌍 Public

Last edited Nov 21, 2015

Created on Jun 9, 2017

This example demonstrates two techniques for placing geographic markers on a d3.js map, centered on Berlin using a Mercator projection. The map renders world land masses and country boundaries from TopoJSON, overlaid with a graticule. Transit stop locations from a GeoJSON file are displayed in two ways: first, by leveraging d3.geo.path() to draw the GeoJSON directly as green path elements; second, by projecting coordinates to screen positions and appending small yellow SVG circles. The visualization compares these two marker approaches, showing that d3.geo.path() handles all projection work automatically, while the manual method uses projection(d.geometry.coordinates) to position custom SVG shapes. The example uses d3.v3 with SVG rendering and a Mercator projection centered on Berlin.

AI-generated description

Easy example on how to put marker on a d3.js map.

You got 2 options:

using d3.geo.path() which does all the work for you
using svg circles and translating them via projection(d.geometry.coordinates)

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a map visualization using D3.js, rendering geographical features as green shapes with black strokes on a blue background. It showcases a basic choropleth-style map by loading GeoJSON data from an external URL and projecting it using the `geoAlbers` projection. The code employs `d3.json` to fetch the data and `d3.geoPath` with the projection to generate SVG paths for each feature, while `topojson.feature` converts the data into GeoJSON format. The visualization is rendered entirely as SVG within an HTML page, making it a simple, self-contained map example.

Cchaimmaeee

77% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js and TopoJSON. It renders country boundaries as green SVG paths with thin black strokes on a dark blue background, using a Mercator projection. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features with the `feature` function. The code uses `d3.geoMercator` and `d3.geoPath` to project the map coordinates and generate the path data.

Ddacoylo

77% match

Loading thumbnail…

Spherical Mercator

The example shows the spherical Mercator projection applied to a world map, displayed within a circular outline that represents the globe. The map renders landmasses in dark gray with white country boundaries, overlaying a graticule grid of meridians and parallels. Built with d3.geoMercator and d3.geoPath, it draws the sphere outline, graticule, and world geography via SVG paths. Geographic data comes from the world-atlas TopoJSON dataset, processed with topojson-client to extract land and country meshes.

Mmbostock

77% match

Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered as an SVG using D3.js with a natural Earth projection. The map displays country boundaries in light green with subtle black strokes against a blue sphere background. It loads GeoJSON data from the world-atlas TopoJSON dataset and converts it using topojson.feature. The visualization demonstrates D3’s geoPath generator to project geographic coordinates, with selectable projection types commented in the code for experimentation.

HHe Jianfeng

77% 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

77% match

Loading thumbnail…

Let's make a MAP with D3.js

This example shows a world map rendered in an SVG using D3.js with an orthographic projection, displaying countries as light-green paths with subtle black strokes against a dark blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON file (countries-110m.json) and converts it to GeoJSON using the topojson `feature` function. The code specifically uses D3 v5 APIs including `d3.geoOrthographic`, `d3.geoPath`, and `d3.json` to project and draw the map, with commented alternatives for other projections like Mercator and Natural Earth.

LLucas Meirelles

77% match

Loading thumbnail…

Mercator Projection

This example displays a world map using a Mercator projection, with each country rendered as a gray shape outlined in white. The map is built with the D3.js version 3 library, using `d3.geo.mercator()` to define the projection and `d3.geo.path()` to convert GeoJSON geometries into SVG paths. The geographical data comes from a `countries.json` file containing feature collections loaded via `d3.json()`. The resulting visualization, rendered in an SVG element, demonstrates the classic distortion of landmasses toward the poles inherent to this projection method.

PPatrick Wojda

77% match

Loading thumbnail…

Let's make a map with D.js

This example shows a basic world map rendered as light green SVG paths with black borders, using a Mercator projection. It loads world country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with the topojson `feature` method. The map is drawn using d3.geoPath and d3.geoMercator, with each country appended as an SVG path element. A hover effect defined in CSS changes the fill color to red, though no interaction logic is implemented in the JavaScript.

Rrohit181099

77% match