Skip to main content
100%

Travel Map

✓ Published0🌍 Public
SSladav
Last edited Dec 2, 2016
Created on Dec 1, 2016

A travel map plots destinations from a dataset of travelers on a world map, with each location marked by a colored circle and labeled with the destination name. The map is rendered as an SVG using D3 v3, with geographic features drawn via `d3.geo.path` and TopoJSON country boundaries. The map projection is applied to the geo data, while the traveler points are positioned using their latitude and longitude coordinates. A legend distinguishes the travelers by name, and the map includes a graticule overlay for reference.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson `feature` method. The visualization projects the coordinates with `geoNaturalEarth1` and traces country boundaries via `geoPath`, while drawing the globe outline with a sphere path generator. The layout uses a fixed 960×500 SVG canvas with simple CSS styling.

Ssakhabutdinov
76% match
Loading thumbnail…

Let's make a World Map with D3!

A world map is rendered as a collection of individual country paths, each filled with light green and outlined with a subtle black stroke, against a blue sphere background. The visualization uses D3 v5 and TopoJSON to load and convert world atlas data from a remote unpkg URL. The code employs `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate SVG path strings, and the `feature` function from TopoJSON to transform the TopoJSON format into GeoJSON for rendering.

Nnkohdatavis
75% match
Loading thumbnail…

Let's make a World Map with D3!

A world map is rendered as a collection of individual country paths, each filled with light green and outlined with a subtle black stroke, against a blue sphere background. The visualization uses D3 v5 and TopoJSON to load and convert world atlas data from a remote unpkg URL. The code employs `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate SVG path strings, and the `feature` function from TopoJSON to transform the TopoJSON format into GeoJSON for rendering.

Nnkohdatavis
75% match
Loading thumbnail…

Map with D3.js

This map displays the countries of the world in light green with black outlines, colored red on hover. The map supports zooming and panning through D3’s zoom module and geoMercator projection. It renders country shapes as SVG paths generated with d3.geoPath, using world-atlas data from TopoJSON and TSV files for country names. The code employs d3.select, d3.json, d3.tsv, and the topojson feature function to construct the visualization.

Aanastasiiaplatovskikh
75% match
Loading thumbnail…

Let's make a Map!

This example displays a world map of countries as light green shapes against a dark blue spherical background, using a Mercator projection. It loads geographic data from the world-atlas TopoJSON dataset and renders it as SVG paths with d3.geoPath. The code employs d3-geo projections, topojson.feature for extraction, and a select-all data join to bind country features to path elements.

ZZY Huang
75% match
Loading thumbnail…

Map it

This visualization presents a world map created from TopoJSON data loaded via `d3.json` and tab-separated country names from `d3.tsv`. The map is rendered as SVG elements using the `d3.geoPath` projection, with the code structuring asynchronous data loading through `Promise.all`. The example demonstrates basic geographic data binding and SVG rendering, where the map fills a 960×500 canvas with a minimal, clean aesthetic. It serves as a starting point for adding interactive features or choropleth styling.

Yylzami40
75% match
Loading thumbnail…

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

WWayne716
75% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered as light green SVG paths against a dark blue background. Using D3 v5 and TopoJSON, the code loads world-110m geographic data and projects it with a stereographic projection via d3.geoStereographic. Each country is drawn using d3.geoPath, with black strokes and low opacity to create a subtle outline effect. The map fills a 960 by 500 pixel SVG viewport with no interactivity.

NNita
75% match