Skip to main content
SimilarExport ZIP
100%

project_nh

✓ Published0🌍 Public
NNavak94
Last edited Feb 28, 2023
Created on Feb 28, 2023

This example displays a globe with countries rendered in light green against a blue sphere, using SVG. The visualization leverages D3.js version 5 and TopoJSON to load and project geographic data. The code constructs the map using `d3.geoPath` and `d3.geoNaturalEarth1` for projection, while `d3.select` and `d3.arc` handle basic DOM manipulation. It demonstrates fundamental SVG element creation and styling through D3’s selection methods, with the final output framed in a fixed 960 by 500 pixel viewport.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js!

This example displays world countries as light green shapes on a dark blue sphere, using the Natural Earth 110m dataset. It employs d3.geoPath with a d3.geoNaturalEarth1 projection to render the map, and fetches TopoJSON via the topojson library's feature function. The SVG output is generated with D3 v5, with the sphere and country paths styled through CSS classes.

Kklumng
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with countries filled in light green against a dark blue spherical backdrop. Using D3 v5, it loads world-110m TopoJSON data via `d3.json`, converts the TopoJSON features with `topojson.feature`, and projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. A separate path for the sphere applies the same projection to outline the globe, while country borders are drawn with a subtle black stroke.

NNita
83% match
Loading thumbnail…

Lets make a world map with D3.js

This example shows a natural Earth projection world map, with countries filled in light green against a dark blue sphere, rendered as SVG paths. The code uses D3 v5’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate the country outlines, while the TopoJSON library’s `feature` method extracts country geometries from the world-atlas dataset hosted at unpkg. The map is displayed on a 960x500 SVG canvas, with strokes added to differentiate country borders.

NNeepaB
82% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a dark blue ocean sphere, projected using the Natural Earth projection. The visualization is built with D3.js v5, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate country boundaries from the world-atlas TopoJSON dataset. The `topojson.feature` library processes geographic features, and SVG paths render each country. The map is presented within an empty SVG canvas, with the sphere and country paths styled via CSS classes.

Ooptimizeresume
82% match
Loading thumbnail…

Project

This example displays a world map with countries filled in light green, rendered on a blue spherical backdrop. The map allows panning and zooming through the d3 zoom event, which applies a transform to the map group. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` APIs to project geographical data, and the `topojson.feature` function to convert TopoJSON into GeoJSON features. Country names are loaded from a TSV file from the world-atlas package and displayed as tooltips via SVG `title` elements.

MMukund Khandelwal
82% 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
82% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, featuring a blue sphere background and light green country outlines. It demonstrates a basic D3.js geographic visualization using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate path data for the sphere. The map loads TopoJSON data from a GitHub-hosted `.json` file via `d3.json` and the `topojson` library's `feature` module, though the country data is only logged to the console rather than drawn. The code imports specific D3 functions (`select`, `json`, `geoPath`, `geoNaturalEarth1`) and relies on v5 syntax, with CSS applying fill and stroke styling to the sphere and country paths.

Cchaimmaeee
82% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js v5, rendering country boundaries as light green SVG paths on a blue sphere. It shows a natural Earth projection with subtle black stroke outlines for each country. The visualization loads GeoJSON data from the world-atlas TopoJSON file using `d3.json`, then converts it to geographic features with `topojson.feature`. The code applies `d3.geoPath` with a `geoNaturalEarth1` projection to draw both the sphere background and individual country shapes onto the SVG canvas.

NNitin Vadhiya
82% match