Country Map ICE-8

100%

Country Map ICE-8

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

This visualization displays Indonesia as a violet-colored country on a green background, extracted from a global TopoJSON dataset of country boundaries. The code uses d3.geoAlbersUsa to project the geographic coordinates and d3.geoPath to generate SVG paths, filtering the world data to isolate Indonesia. It loads country polygons from the world-atlas TopoJSON file and renders the selected feature onto a 960×500 SVG canvas. The projection is scaled to 780 and translated to center the map, with each path styled via a CSS class.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8 map

This visualization displays a world map using a Mercator projection, with each country rendered as an SVG path. It uses d3.geoMercator and d3.geoPath to project geographic coordinates, with TopoJSON data from the world-atlas package providing country boundaries. The map applies a brown fill with semi-transparent black strokes, and the page has a light blue background.

AAniv Chakravarty

79% match

Loading thumbnail…

ICE 8 World Map with Topojson Data

This visualization displays a world map rendered as an SVG, with country boundaries drawn from TopoJSON data sourced from the world-atlas dataset. It uses D3 v5’s `d3.geoPath` and `d3.geoEquirectangular` to project and draw each country as a blue path with white strokes, while a white sphere outlines the globe. The `topojson.feature` method converts the TopoJSON topology into GeoJSON features for rendering. Hovering over any country changes its fill color to orange via CSS.

Ddivyakota99

79% match

Loading thumbnail…

ICE8 - World Map

This visualization presents a static world map rendered with SVG paths. A lime-green sphere outline frames the map, while each country is filled in pink with a subtle black stroke. The code uses D3’s `geoNaturalEarth1` projection and `geoPath` to generate shapes from country boundaries provided by the world-atlas dataset. Countries are loaded as TopoJSON features and appended as individual paths, with styling defined in the accompanying CSS.

CCHANDU BHARGAVI

78% match

Loading thumbnail…

ICE-8_World_Map

This visualization displays a world map with countries rendered in purple with yellow outlines, set against a blue sphere background. Using d3-geo's geoEquirectangular projection, the code loads GeoJSON data from the world-atlas TopoJSON file via topojson.feature to draw each country path. The map responds to hover events, highlighting countries in green. It also includes a canvas-based alternative implementation using d3.geoPath with a graticule layer.

MMeghanaArepalli

78% match

Loading thumbnail…

ICE - 8 Making Maps Country

This visualization displays the United States as a single violet country shape on a green background, rendered using an SVG path. It loads world map data from the World Atlas TopoJSON file and uses `d3.geoAlbersUsa` with `d3.geoPath` to project and generate the path. The topojson `feature` method extracts country boundaries, then filters the data to keep only the United States before appending it to the SVG.

SSohilaBheemReddy

78% match

Loading thumbnail…

ICE-8 WORLD MAP

This visualization displays a world map using a natural Earth projection, rendering countries as green filled polygons with blue strokes. The code loads geographic data from the world-atlas TopoJSON source and converts it using `topojson.feature`, then applies `d3.geoPath` with `d3.geoNaturalEarth1` to generate SVG paths. A blue sphere outline highlights the globe’s boundary. The countries appear as static shapes without interaction, with styling defined via CSS classes for the sphere and country paths.

Ssaidhiraj16

78% match

Loading thumbnail…

ICE 08 11590101

This example presents a world map rendered with D3 v5 and TopoJSON, using the `geoMercator` projection and `geoPath` to draw country boundaries from the world-atlas countries-110m dataset. The SVG displays oceans in blue and countries in purple, with a hover effect that changes the fill color to pink via CSS. The code loads the TopoJSON data asynchronously with `d3.json`, converts it to GeoJSON using `feature`, and appends each country as a path element.

DDivyasri0310

78% match

Loading thumbnail…

ICE-8 World Map

This interactive world map visualizes country boundaries as vector paths, with pink landmasses set against a blue ocean background. Hovering over a country highlights it in red. Built with D3 version 5, the visualization uses `d3.geoPath` and `d3.geoEquirectangular` for map projection and rendering. Country geometries come from the world-atlas dataset in TopoJSON format, which is converted to GeoJSON features using the `topojson` package’s `feature` method, then drawn as SVG paths.

Ssreesushmav

78% match