Skip to main content
100%

World Map and Pattern Transitions

✓ Published0🌍 Public
Aandrew-reid
Last edited Jan 8, 2018
Created on Jan 8, 2018

This example renders a world map using TopoJSON country boundaries from the world-atlas package and projects them with d3.geoMercator and d3.geoPath. Each country is filled with an SVG pattern that continuously animates: a small orange rectangle expands to cover the 20-by-20-pixel tile, then resets, alternating between orange and white fills via a recursive transition with d3.easeQuadOut. The pattern is rotated 45 degrees, creating a dynamic striped texture across all landmasses.

AI-generated description

Similar vizzes

Loading thumbnail…

World Map and Pattern Transitions 2

This visualization displays a world map with countries filled by an animated diagonal stripe pattern. The pattern consists of two orange rectangles within an SVG pattern element, continuously transitioning their positions to create a moving effect. Built with D3 v4, it uses d3.geoMercator and d3.geoPath to project and draw country boundaries from TopoJSON data loaded via topojson-client. The animation runs through repeated transitions on the rectangles’ x-coordinates, cycling indefinitely with d3.easeLinear and a 2-second duration per step.

Aandrew-reid
92% match
Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan
81% match
Loading thumbnail…

World Tour

This visualization presents an animated orthographic globe that cycles through the world’s countries, highlighting each one in red while rotating to center it on screen. The display shows the country name above the globe as it transitions between nations. The code uses D3.js v3 for transitions and tweens, TopoJSON for world map data, and a Canvas 2D context for rendering. A queue loads GeoJSON topology and country name mappings, while d3.geo.path draws land, borders, and the globe sphere with dynamic rotation.

AAjar06
81% match
Loading thumbnail…

World Map

This example shows a world map rendered as a series of filled country paths. It loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON using the `feature` function from topojson, and draws it with D3’s `geoIdentity` projection and `geoPath` in SVG. The visualization is built with React components, displaying each country as a distinct path with stroke styling.

NNathion
81% match
Loading thumbnail…

World Map

This example displays a world map with countries rendered as filled beige shapes against a light blue sphere, using an azimuthal equal-area projection. It loads GeoJSON country boundaries from the world-atlas dataset via TopoJSON and draws them as SVG paths with d3.geoPath. The code applies d3.geoAzimuthalEqualArea for projection, sets stroke opacity for country borders, and uses D3 v5 with topojson.feature to extract geometries.

Hhappymail6
80% match
Loading thumbnail…

World maping

This example displays a world map rendered as an SVG using React and D3. It shows country boundaries via a spherical equal-earth projection, with land areas filled in teal and the surrounding sphere in light gray. The visualization loads GeoJSON data from the World Atlas TopoJSON file, converts it using topojson’s `feature` method, and draws the paths with `d3.geoPath`. The map is static, with no interaction or animation.

Ppatasky
80% match
Loading thumbnail…

Let's make a map?!

This example shows how to create a simple world map by loading TopoJSON country boundaries and rendering them as filled paths. The code uses d3.json to fetch the world-atlas dataset, topojson.feature to convert it to GeoJSON, and d3.geoMercator with d3.geoPath to project and draw the countries. All shapes are appended as SVG path elements, styled with green fills and black strokes.

Ggorfoula
80% match
Loading thumbnail…

World Map with D3.js and Topojson

This example displays a world map using an equirectangular projection, rendered as an SVG graphic. The map is drawn with countries filled in orange, each with a white stroke, and a blue sphere representing the globe's background. Hovering over a country changes its fill to green. The visualization is built with D3.js version 5 and TopoJSON version 3, loading country boundaries from the world-atlas countries-110m.json file. It uses `d3.geoEquirectangular` for projection, `d3.geoPath` for generating SVG paths, and TopoJSON's `feature` method to convert the dataset into GeoJSON features.

Bbugfree55
80% match