ICE 8 - China Map - Manasa V Jadda

100%

ICE 8 - China Map - Manasa V Jadda

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 12, 2023

This example displays a static map of China using a Mercator projection centered on the country. The visualization renders geographic boundaries as SVG paths, with provinces filled in green and stroked with dark green outlines. The code loads GeoJSON data from a GitHub gist and processes it using the TopoJSON `feature` API within a d3.json promise. It applies the d3.geoPath generator combined with d3.geoMercator for projection, and appends each country path to an SVG canvas sized at 960 by 700 pixels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 Map - China

This interactive map displays China’s administrative provinces as colored paths, rendered using a `d3.geoMercator` projection on an SVG canvas. Users can zoom and pan the map via `d3.zoom`, which transforms the grouped geometry. The visualization loads GeoJSON data from a GitHub gist, applies `d3.geoPath` to convert features into SVG paths, and colors each province with a categorical `d3.scaleOrdinal` scheme. The code leverages TopoJSON’s `feature` API to extract polygon geometries before styling them with CSS rules for fill and stroke.

Aanushaanumula

84% match

Loading thumbnail…

ICE-8 Fork of China City

This example displays a map of China using geographic data rendered as red SVG paths. It fetches TopoJSON basemap data from a GitHub gist and converts it to GeoJSON with the `feature` method from topojson. The map uses a `geoMercator` projection centered on China and draws the country boundaries with `d3.geoPath`, applying a red fill with black strokes. The visualization loads D3 v5 and topojson via external scripts, resulting in a simple, static choropleth-style city map.

IIndhuKrishnaraj

82% match

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 Making Maps (World Map) Maanas Katta

This example displays a world map with every country rendered as a light green SVG path with black borders on a blue background. It uses d3-geoNaturalEarth1 and d3.geoPath to project and draw the geographic features, pulling country boundaries from the world-atlas TopoJSON dataset. The code loads the data asynchronously, converts TopoJSON to GeoJSON with topojson.feature, and appends the resulting paths to the SVG.

MMaanas Katta

79% match

Loading thumbnail…

ICE-8 World Map

This example displays an ICE-8 world map, rendering countries as blue filled shapes with white outlines against a light blue spherical backdrop. It uses a Mercator projection via d3.geoMercator and draws the geographic paths with d3.geoPath. The SVG output is generated through React, with country boundaries parsed from a TopoJSON file using the topojson feature function. The visualization loads geographic data from a GitHub gist and styles the map using CSS, with the sphere and country paths colored separately for contrast.

Aanushaanumula

79% match

Loading thumbnail…

ICE 8 - World Map

This example displays a world map rendered as a green SVG using a Mercator projection. It loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with topojson.feature. The code uses d3.geoPath and d3.geoMercator to define the projection, and appends a path for each country to an SVG element with a light blue background. The map is built with D3 v4 within a React-compatible HTML page.

DDaniel Mata

78% match

Loading thumbnail…

ICE 8 - Making Maps - World Map

This example shows a world map rendered as an orthographic projection, with countries displayed as filled paths on a light blue sphere. The visualization loads geographic data from a TopoJSON file hosted on GitHub, converts it to GeoJSON features, and draws each country using d3.geoPath. The code uses d3’s geoOrthographic projection, d3.json for data loading, and topojson’s feature method to extract country boundaries. SVG paths are styled with Moccasin fills and black strokes, creating a simple, static globe view.

IIsabella Jaya Rani C

78% match

Loading thumbnail…

World Map-ICE8 Manasa V Jadda

This world map displays global country boundaries and landmasses using a Natural Earth projection, rendered as SVG via React. It shows graticules, interior borders, and a light green background, with land colored teal and oceans pale tan. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to draw geographic features, sourced from the World Atlas TopoJSON dataset. Interiors are computed using topojson.mesh to highlight country borders distinctly.

MManasa891-git

78% match