Skip to main content
SimilarExport ZIP
100%

practice16-make a map

✓ Published1🌍 Public
DDi Cui
Last edited May 29, 2023
Created on May 28, 2023

This practice builds a world map with D3.js using the Natural Earth projection via `geoNaturalEarth1` and `geoPath`, rendering country shapes as SVG paths colored by economic classification. It loads TopoJSON and TSV data from the world-atlas package, merges them with `loadAndProcessData`, and applies a sequential `scaleOrdinal` with `schemeSpectral` to map categories. A color legend is generated with `colorLegend`, and zoom interaction is enabled through `d3.zoom`.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

practice12 make a map

This example shows an interactive world map that uses D3.js to render countries as SVG paths from TopoJSON data. The map displays country boundaries and names, with countries colored light green and highlighted in red on hover. It uses d3.geoNaturalEarth1 for the map projection, d3.geoPath for path generation, and d3.zoom to enable panning and zooming. Country names are loaded from a TSV file and matched to map features via ISO codes. The code also fetches world-atlas TopoJSON data for the country geometry, demonstrating basic data loading and DOM manipulation with D3.

DDi Cui
90% match
Loading thumbnail…

16 - let's make a map better - dataviz 2018

This example displays an interactive world map using a natural Earth projection, with countries rendered as SVG paths and a hover effect that changes their fill color. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, then projects it using D3’s `geoNaturalEarth1` and `geoPath`. It incorporates `d3.zoom` for pan and zoom interactions, and uses the TopoJSON `feature` function to convert the topology into GeoJSON features, with country names added via tooltips from the TSV mapping.

Zzach b.
83% match
Loading thumbnail…

map practice

This map practice example displays a simple world map using SVG paths. It renders country boundaries from the world-atlas TopoJSON dataset, projecting them with a d3.geoMercator projection and d3.geoPath generator. The code loads data via d3.json, converts TopoJSON features with topojson.feature, and binds them to path elements using D3’s data join and enter selection. The map fills the viewport without styling, showing raw geographic outlines in black against a white background.

RRahmoon Shamdeed Kabir
83% match
Loading thumbnail…

17_Make a World Map

This example shows a world map rendered with D3 using the Natural Earth projection. The map displays country boundaries as light green filled paths with subtle black strokes, set against a blue sphere background. The code loads GeoJSON data from the world-atlas TopoJSON file, converts it to geographic features with `topojson.feature`, and projects it using `d3.geoNaturalEarth1()`. The SVG paths are generated via `d3.geoPath()` and attached through a data join.

FFMajid-ops
83% match
Loading thumbnail…

World Map practice

This example displays a world map rendered with a natural Earth projection, showing countries filled in light green against a blue sphere backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson.feature. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to generate SVG paths, and appends country and sphere elements to the SVG canvas. The code applies styling through CSS classes for fills and strokes, with stroke opacity set to 0.1.

Ddankvader1
82% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths with subtle black strokes. The map is drawn from TopoJSON data loaded from the visionscarto-world-atlas package, using D3 v5’s `geoPath` and `geoNaturalEarth1` projection. A blue sphere path outlines the globe’s boundary. The code specifically imports `feature` from TopoJSON to convert topologies into GeoJSON features, then binds the country data to SVG path elements. The map appears on a blank background with no additional interactive features or transitions.

Mmla341
82% match
Loading thumbnail…

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Eegrebing
82% match
Loading thumbnail…

Make a map with D3 js

This example shows a natural Earth projection map of the world, with countries rendered as light green SVG paths on a dark blue sphere. The visualization loads world-atlas TopoJSON data via `d3.json`, converts it to GeoJSON using `topojson.feature`, and draws the map with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is a separate path generated from a generic sphere object, while country boundaries appear with semi-transparent black strokes.

AAjit Singh
82% match