Artistic World Map 2

100%

Artistic World Map 2

✓ Published0🌍 Public

Last edited Sep 2, 2017

Created on Sep 1, 2017

The visualization renders a world map where landmasses and ice sheets are filled with flowing, rainbow-like colors derived from a maze generated using Prim’s algorithm. A flood-fill process colors each maze cell, and the result is clipped to the land and ice boundaries using a Canvas 2D context with `d3.geoPath` and `topojson`. The map uses a Mercator projection and modifies the color of each pixel via Canvas `getImageData` and `fillRect`. Country boundaries come from the world-atlas TopoJSON dataset.

AI-generated description

Map takes a moment to load.

This map uses Prim's algorithm; however, I have used the implementation of this algorithm found in Mike Bostock's blocks. I've essentially only modified it to change the fill colors. This is another attempt to create an artistic world map, see also this block.

Similar vizzes

Loading thumbnail…

Artistic World Map

The visualization renders an artistic world map using a watercolor effect, generated entirely on Canvas. It first paints the entire map blue as ocean, then clips and fills land masses with green, and finally applies white clipping to Greenland and Antarctica. The color fields are produced by a procedural noise algorithm that interpolates random RGB values across a grid, creating soft, painterly gradients. The code uses d3.geoMercator, d3.geoPath, topojson.feature, and Canvas context clipping to layer the geographic shapes.

Aandrew-reid

87% match

Loading thumbnail…

World Map

A choropleth-style world map renders landmasses in teal on a light gray sphere, with interior country borders highlighted in a brighter cyan. The visualization is built with React and D3, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to draw the sphere, graticule, land, and interior boundaries. Geographic data comes from the `world-atlas` TopoJSON source, processed via `topojson.feature` and `topojson.mesh`. The SVG output is styled with the Poppins font and custom CSS classes.

Nnpelliccia

78% match

Loading thumbnail…

Map.js!

This map visualization displays the world’s countries by using a Mercator projection to render geographic features as filled SVG paths on a light gray sphere background. The code loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with `topojson.feature`, then draws each country using `d3.geoPath`. Styling applies a blue fill with dark strokes and a subtle opacity, while the hidden overflow and full-bleed body create an immersive, full-window presentation.

Aargonaeut

78% match

Loading thumbnail…

World_Map_ICE_8

A world map illustrates country boundaries and graticules, with landmasses in beige and ocean in light blue, using a natural Earth projection. The visualization loads GeoJSON topology from the `world-atlas` package via `d3.json` and processes it with `topojson`’s `feature` and `mesh` functions to extract land outlines and interior borders. Rendering uses `d3.geoNaturalEarth1` projection with `d3.geoPath` to draw the sphere, graticules, and land paths as SVG elements within a React component. The polished style applies custom colors for land, water, and interior boundaries through CSS classes.

MMahitha-Moparthi

77% match

Loading thumbnail…

world Map2

This interactive world map uses D3.js geographic projections to render Earth's landmasses, graticules, and a semi-transparent sphere overlay. The application fetches topology data from the `world-atlas` package and processes it through `topojson`'s `feature` and `mesh` functions. The D3 `geoNaturalEarth1` projection defines the map's coordinate system, while `geoPath` converts geographic features into SVG paths. React handles the user interface, and CSS styling differentiates the landmasses in teal, the graticule lines in gray, and the interiors in a contrasting cyan color.

Ddumbdataguy@gmail.com

77% match

Loading thumbnail…

World Map

This world map visualization displays landmasses and country borders using a natural Earth projection with d3.geoPath and d3.geoGraticule. The SVG rendering, built with React, layers a light gray sphere, teal land fills, green interior boundaries, and cyan graticule lines. Data comes from the world-atlas TopoJSON dataset, processed through topojson.feature and topojson.mesh to extract land geometry and internal borders. The visualization emphasizes clean, stylized geographic outlines rather than thematic data encoding.

Mmclee933

77% match

Loading thumbnail…

World Map and Pattern Transitions

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.

Aandrew-reid

77% match

Loading thumbnail…

World Map

This world map uses D3’s natural Earth projection to display landmasses in teal against a light graticule and sphere. The SVG marks define geographic paths for countries, interiors, and a globe outline, rendered via `d3.geoPath`. Topological data from the world-atlas package is processed with `topojson.feature` and `mesh` to derive boundaries. Built with React, the visualization updates once the JSON loads, though the initial state shows a loading message.

MMark Simpson

77% match