Tryouts D3 Maps

100%

Tryouts D3 Maps

✓ Published0🌍 Public

Last edited Dec 13, 2016

Created on Feb 3, 2016

This example visualizes an orthographic globe with a sequence of waypoints connected by dashed arcs, tracing a voyage across multiple continents and oceans. The map uses D3’s `d3.geo.orthographic` projection with a `clipAngle(90)` to show only the visible hemisphere, while `d3.geo.path` renders the sphere, country boundaries from TopoJSON’s world-110m dataset, and the projected arc and point features. Styling relies on SVG classes for the globe, land, pins, and arcs, with the underlying route data processed via Lodash functions.

AI-generated description

Stack Overflow question

mit Licensed

Similar vizzes

Loading thumbnail…

Tryouts D3 Maps

This visualization displays an orthographic globe with marked locations and dashed arcs connecting them in sequence, illustrating a travel route across 16 places from Puerto Montt to Taiwan. The globe uses D3’s `d3.geo.orthographic` projection with a clip angle, rendering world topography from a TopoJSON file via `d3.geo.path`. Locations appear as black pins, while the connecting arcs are generated as GeoJSON LineStrings using Lodash. The SVG output is styled with CSS classes for the globe, land, pins, and arcs, and the code loads D3 3.5, TopoJSON, and Lodash from CDNs.

Aaltocumulus

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders an orthographic globe using D3.js and TopoJSON, drawing country boundaries as green SVG paths with white strokes over a sphere background. It loads world geography from the world-atlas dataset, converts TopoJSON features via `topojson.feature`, and projects them with `d3.geoOrthographic` and `d3.geoPath`. The map is static, with no rotation or interaction, and displays all countries at a 110m resolution.

Aaidanoconnor1

80% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple orthographic world map rendered as an SVG, with countries filled in light green and a blue sphere representing the globe. It uses D3 v5’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas dataset. The code appends a sphere path, then fetches the TopoJSON file, converts it to GeoJSON with the `feature` function from the topojson library, and binds the resulting country features to SVG paths.

DDukatino

80% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using an orthographic projection, rendering countries as light-green SVG paths with dark strokes. It loads geographic data from a TopoJSON world-atlas file via `d3.json`, then converts it to GeoJSON using `topojson.feature`. The map is drawn with `d3.geoPath` and `d3.geoOrthographic`, projecting the spherical landmasses onto a flat plane. The dark blue background and minimal styling emphasize the Earth’s curved shape, creating a simple globe-like visualization.

NNita

80% match

Loading thumbnail…

Let's make a map D3.js

This example displays world countries on a rotating orthographic globe rendered as an SVG sphere with light green landmasses. The visualization loads geographic data from the World Atlas TopoJSON dataset via `d3.json`, then converts it to GeoJSON using TopoJSON’s `feature` method. D3’s `geoOrthographic` projection and `geoPath` generate the country outlines, while the sphere background is drawn using a GeoJSON Sphere object. The code imports specific D3 modules (`select`, `json`, `geoPath`, `geoOrthographic`) and styles the map with CSS classes.

JJoachim Klug

79% match

Loading thumbnail…

Let's make a map!

This example renders an interactive orthographic globe using D3’s `geoOrthographic` and `geoPath` projections. It loads world country boundaries from TopoJSON and country names from a TSV file, then displays each country as a light-green SVG path that turns red on hover, with tooltips showing the country name. The globe itself is drawn as a dark-blue sphere, and all interactions rely on D3’s data join and selection methods.

DDannie2020

79% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering continents as light green polygons on a blue sphere. It uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas package via `d3.json`. The code also draws a background sphere path and applies stroke styling to country boundaries. All visual elements are rendered as SVG in a single 960×500 viewport.

CChinzorigt Ganbat

79% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an orthographic world map rendered as an SVG, with countries filled in green against a light blue sphere. It uses D3.js version 5 functions `d3.geoOrthographic` and `d3.geoPath` to project and draw geographic features, alongside TopoJSON’s `feature` method to extract country boundaries from the world-atlas dataset. The map initially displays a global view, with the sphere outline and country paths appended to the SVG canvas.

SSophia Murage

79% match