Fork of Working with

100%

Fork of Working with

✓ Published0🌍 Public

Last edited Jul 20, 2022

Created on Jul 19, 2022

This example displays a world map visualization of the Data Canvas Sense Your City dataset, rendered as SVG paths. Using React hooks for state management, the code fetches TopoJSON country boundaries and converts them to GeoJSON with `topojson.feature`. The `d3.geoEqualEarth` projection and `d3.geoPath` generate the map shapes, which are styled with cyan fill and gray strokes. The visualization loads geographic data from the unpkg-hosted world-atlas package.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Map

This example displays a world map using an orthographic projection, rendered as SVG with D3’s `geoPath` and `geoOrthographic`. It shows landmasses filled in teal, graticules, sphere outline, and interior borders, drawing from the world-atlas TopoJSON dataset (countries-50m.json) via `feature` and `mesh`. React manages the component state, loading data asynchronously with a custom `useData` hook before rendering the map within a fixed SVG canvas.

SSaiSreya1

86% match

Loading thumbnail…

Fork of Working with Time

This example renders a world map using a natural Earth projection, displaying landmasses, country borders, graticule lines, and a sphere outline. The map is generated from the World Atlas TopoJSON dataset, with geographic features extracted via `topojson.feature` and `topojson.mesh`. The visualization is built with React and D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw the SVG paths. Styling via CSS applies a teal fill for land and neutral tones for borders and graticules.

MMichael Bergerson

86% match

Loading thumbnail…

Fork of World Map

This visualization displays a world map with a dark blue sphere and graticule, overlaid with country boundaries and circular city markers. It uses d3.geoEqualEarth, d3.geoPath, and d3.geoGraticule to project and render geographic features, while React manages the SVG elements. City coordinates from a CSV file are projected onto the map, and country outlines come from a world-atlas TopoJSON source. The map is rendered as an SVG using React components.

Ggayatrisridhar

85% match

Loading thumbnail…

Fork of World Map

This visualization displays a world map rendered as SVG, with landmasses filled in teal and country borders drawn as thin interior lines atop a light gray sphere with graticule gridlines. It uses d3.geoNaturalEarth1 projection with d3.geoPath and d3.geoGraticule to generate the geographic shapes, while topojson’s feature and mesh methods extract land polygons and country boundaries from the world-atlas TopoJSON source. React manages the component structure, with data loaded asynchronously via d3.json.

SSam Hege

85% match

Loading thumbnail…

Fork of World Map

This example renders a global map with an orthographic projection, displaying landmasses in teal, country borders as fine gray lines, and a graticule overlay on a light sphere. The visualization uses D3’s `geoOrthographic` and `geoPath` to project and draw geographic features, while TopoJSON’s `feature` and `mesh` extract land polygons and country boundaries from the world-atlas dataset. The React-based code structure separates data handling in `useData` from the SVG marks rendered by the `Marks` component, with styling applied via CSS classes.

AArefa Patwary

85% match

Loading thumbnail…

Fork of React & D3 Starter

This example presents a world map rendered in an SVG container, visually distinguishing a subset of countries by coloring them orange according to a small, hardcoded population dataset, while all other nations appear in gray. It uses the `d3.geoMercator` and `d3.geoPath` APIs to project and draw geographic boundaries from a TopoJSON source loaded via `d3.json`. The map is built within a React application, and the code demonstrates a non-reactive workflow by appending paths directly to the SVG element.

Kkodalijagadeesh9@gmail.com

85% match

Loading thumbnail…

Fork of World maping with cities

This interactive map displays world cities with circle sizes proportional to population, overlaid on a geographic projection of Earth. It renders country landmasses, graticules, and interior borders using `d3.geoPath` with `geoNaturalEarth1` projection, while city positions are projected from latitude/longitude coordinates. Population values drive a square-root scale to determine circle radii. The visualization uses React hooks to load TopoJSON world atlas data and CSV city data, with d3.v5 handling geographic calculations and SVG rendering.

Ppatasky

85% match

Loading thumbnail…

Fork of World Map

This example presents a world map rendered with D3’s natural Earth projection, displaying countries as purple landmasses with red interior borders and blue graticule lines on a white sphere. The data comes from the world-atlas TopoJSON file, which is parsed using topojson’s feature and mesh functions. The visualization uses React to manage the component state and rendering, with d3.geoPath and d3.geoNaturalEarth1 generating the SVG paths for the map and its overlay elements.

Cchandanagandla

84% match