Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Let's make a face with D3.js!

✓ Published1🌍 Public
Aannadehtiarova
Last edited Feb 1, 2021
Created on Feb 1, 2021

This example renders a world map using D3.js and TopoJSON, projecting country boundaries with an orthographic projection via `d3.geoOrthographic` and drawing them as SVG paths with `d3.geoPath`. The code loads GeoJSON data from the world-atlas dataset using `d3.json`, then binds the country features to path elements. The map is displayed on a light gray background, with countries filled in black and strokes in light gray, creating a simple, high-contrast visualization of global landmasses.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

This example uses D3.js version 6 to render a world map from the World Atlas TopoJSON dataset, displaying countries as black-filled paths with light gray strokes against a light gray sphere (the globe). The code utilizes `d3.geoPath` with the `geoNaturalEarth1` projection to transform geographic coordinates into SVG paths, and the `topojson` library’s `feature` function to extract country boundaries from the TopoJSON topology. The SVG output shows the full Earth sphere with country outlines, demonstrating basic geographic data mapping and SVG DOM manipulation with `select` and `append` methods.

Aannadehtiarova
96% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of the classic D3.js face demo renders a world map using SVG paths instead of a smiley face. The map displays country boundaries as gray shapes with light gray strokes, projected using a Mercator projection. The code loads TopoJSON data from the world-atlas package and converts it to GeoJSON via the topojson `feature` method, then binds it to SVG path elements using `d3.geoPath` and `d3.geoMercator`. All drawing is handled in a single `json` promise callback with d3.v6.

Aannadehtiarova
93% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using an orthographic projection, rendering countries as light green SVG paths on a blue sphere with subtle black borders. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson’s feature method. The visualization uses d3.json to fetch data, d3.geoOrthographic for projection, and d3.geoPath to generate the SVG path data. The sphere is drawn first as a separate path, with all country features appended dynamically once the data loads.

CCaminaur
92% match
Loading thumbnail…

Fork of Let's make a face with D3.js

This example displays a world map in a natural Earth projection, rendered as SVG paths with country boundaries. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projections from D3 v6, and the `topojson` library’s `feature` function to extract country geometries from the world-atlas TopoJSON data. Country names are loaded from a TSV file and shown as tooltips on hover. The map highlights countries in light green, which turn red on mouse-over, with a blue sphere outline.

Vvkresha
92% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example displays an interactive world map using a natural Earth projection, with country boundaries rendered as SVG paths on a spherical globe backdrop. The map supports panning and zooming through the D3 zoom behavior. It loads TopoJSON data from the world-atlas package, converts it to GeoJSON using the topojson feature method, and draws each country with geoPath while adding title tooltips showing country names. The code uses D3 v5 modules including geoNaturalEarth1, geoPath, and zoom.

DDonggov
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It uses D3.js v5’s `geoPath` and `geoNaturalEarth1` projection to generate geographic outlines from the world-atlas TopoJSON dataset. The code also loads the TopoJSON library to extract country features, then appends each path to the SVG container. The visualization demonstrates a straightforward choropleth-style map without interactivity, emphasizing the projection and vector rendering pipeline.

SSnapika
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection, rendering countries as light green paths with dark strokes on a blue spherical backdrop. It loads geographic data from a world-atlas TopoJSON file via `d3.json`, then applies the `topojson` library’s `feature` function to extract country features. The SVG paths are generated using `d3.geoPath` and the `d3.geoNaturalEarth1` projection, which also draws the sphere outline. The input data source is the unpkg-hosted world-atlas dataset, and the rendering is entirely vector-based, using SVG elements styled by the included CSS.

TToooooooT
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue oceanic sphere. It uses D3 v5 and the topojson library to load and parse world-atlas data from an external URL, then projects the geographic features with a natural Earth projection and draws them using d3.geoPath. The map is generated entirely in the browser from TopoJSON data, with a simple CSS-styled SVG output.

DD3React
91% match