Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TTejaswi@3271
Last edited Apr 3, 2022
Created on Apr 3, 2022

This fork of “Let’s make a face with D3.js!” renders an interactive world map using a natural Earth projection. It displays country boundaries and labels sourced from the world-atlas TopoJSON dataset. Users can pan and zoom the map via the d3.zoom API, which applies transforms to the SVG chart group. The visualization demonstrates basic D3 selection, data binding, and path generation with d3.geoPath.

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 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
92% match
Loading thumbnail…

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

A world map rendered with D3.js displays countries as dark green paths with gold outlines on a gold sphere, using a Natural Earth projection and SVG. Hovering highlights a country in red, and zooming is enabled. The code loads geographic data from TopoJSON and country names from TSV files via Promise.all, then generates paths with d3.geoPath and applies pan/zoom through d3.zoom.

Llinyyyyyyyyy
90% 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
89% 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
89% match
Loading thumbnail…

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

This example uses D3.js to render a world map with dynamic geographic projections. It displays country boundaries from the World Atlas TopoJSON dataset, styled as light green polygons with dark blue oceans on an SVG canvas. The code creates four different projections—Natural Earth, Mercator, Orthographic, and Bottomley—using `d3.geoNaturalEarth1`, `d3.geoMercator`, `d3.geoOrthographic`, and `d3.geoBottomley`, then applies `d3.geoPath` to draw the shapes. While the title references a smiley face, the actual visualization only shows the map, loading data asynchronously via `d3.json`.

XXenos Panagiotis
89% match
Loading thumbnail…

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

This fork of "Let's make a map with D3.js!" displays a world map of countries, filled in light green over a blue sphere, using a natural Earth projection. The visualization loads geographic data from the world-atlas package and renders the sphere and country boundaries as SVG paths with D3’s geoPath. It uses the d3 and topojson libraries, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to project and draw the map.

JJyothicherukuri
89% match
Loading thumbnail…

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

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.

Aannadehtiarova
88% match
Loading thumbnail…

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

This example displays an interactive orthographic globe populated with country boundaries. Users can pan and zoom the map using mouse gestures. The visualization loads world topology from the World Atlas TopoJSON dataset and joins it with ISO country names from a TSV file. Country paths are rendered as SVG elements using `d3.geoPath` with a `d3.geoOrthographic` projection, while `d3.zoom` handles the interactive transforms on the containing group. Hovering over a country changes its fill color to grey.

SSayalinale
88% match