Skip to main content
SimilarExport ZIP
100%

Let's make a big face!

✓ Published0🌍 Public
BBystander1
Last edited Dec 10, 2019
Created on Dec 9, 2019

A world map is displayed on a blue sphere, with country polygons filled in light green and outlined in black. The visualization demonstrates basic D3.js DOM manipulation by appending SVG paths to represent the Earth’s landmasses. Using the `d3.json` loader, `d3.geoPath`, and `d3.geoNaturalEarth1` projection, the code processes `final110countries.json` TopoJSON data, converts it to GeoJSON features via the `topojson` library’s `feature` function, and renders them as SVG paths.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example displays a natural Earth projection of the world map, with countries rendered as orange paths on a steel-blue sphere. It uses D3.js v5’s `geoNaturalEarth1` and `geoPath` to generate the geographic outlines, while TopoJSON’s `feature` extracts country boundaries from the world-atlas dataset. The SVG paths are appended asynchronously after fetching the 110m resolution TopoJSON file. A black stroke with low opacity outlines each country, and the page sets no margins to let the visualization fill the entire viewport.

DDifan Gu
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to project world countries onto a natural Earth projection, rendering them as orange SVG paths with a steel-blue sphere background. It loads GeoJSON data from the world-atlas TopoJSON file via `d3.json` and converts it with `topojson.feature`. The visualization then applies `d3.geoPath` with `geoNaturalEarth1` to draw each country, highlighting the geographic layout without interactive features.

DDifan Gu
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example visualizes the world map as a set of orange countries on a steel-blue spherical background, with hover states that turn a country red. The shape data comes from the world-atlas TopoJSON and TSV files, which are joined to label each country with its name. The visualization uses the D3.js `geoPath` and `geoNaturalEarth1` projection to render the map, and the topojson `feature` function to convert TopoJSON topology into GeoJSON features. A zoom interaction is enabled through D3’s `zoom` event, which transforms the map group.

DDifan Gu
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example visualizes the world’s countries as filled polygons on a natural Earth projection, with oceans rendered in blue and landmasses in light green. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` function extracts country boundaries from a 110m world-atlas GeoJSON dataset. The code draws a sphere background and then overlays each country’s path, applying thin black strokes for borders.

AAdrian Herzog
88% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a static world map with countries filled in tan against a deep blue ocean, rendered inside an SVG canvas. It uses D3.js version 5.9.2 with the topojson library to convert the world-atlas country boundaries into map features. The projection, d3.geoNaturalEarth1, and the path generator, d3.geoPath, define the map’s shape, while the countries’ geographic data comes from the online world-atlas JSON dataset. The visualization also draws a background sphere for the ocean using a simple path generator call.

AAnthony-coding
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example visualizes world countries on a natural Earth projection using D3.js. It renders a blue sphere outline and green country polygons as SVG paths, loaded from a TopoJSON dataset via the `world-atlas` package. The code uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate path data, with `d3.json` to fetch the data and `topojson.feature` to convert it into GeoJSON features.

LLittledevil7
88% match