Vizualisation

100%

✓ Published1🌍 Public

Last edited Sep 28, 2021

Created on Sep 27, 2021

This visualization displays renewable energy levels by country on a natural Earth projection map, with a color legend categorizing ordinal data. It uses d3.geoPath and d3.geoNaturalEarth1 to render world shapes, d3.scaleOrdinal with schemeSpectral for color mapping, and d3.zoom for panning. Data comes from a TSV file joined to TopoJSON world atlas geometries via d3.tsv and d3.json. Hovering highlights countries in red, and tooltips show country names and renewable values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vizualisation

This example displays a world choropleth map colored by renewable energy levels, with a categorical color legend that allows users to click and filter countries by their energy level. The map uses SVG rendering with a Natural Earth projection, and the zoom interaction enables panning and scaling. The visualization is built with d3.js, using `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.zoom`, and `d3.scaleOrdinal` for the color scale, while data is loaded from a TSV file and TopoJSON.

KKahlaoui-Ismail

88% match

Loading thumbnail…

d3 Visualization Map

This example displays a zoomable world map using a natural Earth projection, with countries colored light green and the ocean rendered as a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset (50m.json) and names from 50m.tsv. The map supports interactive pan and zoom via d3.zoom, while d3.geoPath and geoNaturalEarth1 handle geographic rendering. Countries highlight red on hover, with tooltips showing country names. The visualization is rendered as SVG, with the sphere and country paths generated from the projected GeoJSON features.

JJohnPaulPagelerJr

77% match

Loading thumbnail…

Let's make a Map!

This visualization displays world countries on a natural Earth projection, with each country filled in light green and highlighted red on hover. The map is rendered as SVG using D3’s `geoNaturalEarth1` projection and `geoPath`. Country boundaries come from a TopoJSON world-atlas file, while names are joined via a TSV file keyed by ISO numeric codes. Users can pan and zoom the map using D3’s `zoom` behavior, which applies a transform to the map group.

VVito

77% match

Loading thumbnail…

Map It

This visualization uses a natural Earth projection and an ordinal color scale to map countries by their type, with a color legend and zoom interaction. Built with D3 v5, it uses `geoPath`, `geoNaturalEarth1`, `scaleOrdinal`, and `schemeSpectral` to render SVG paths, loading country data from the world-atlas TopoJSON and TSV files. The map colors each country based on its `properties.type`, and hovering highlights the country in red. A color legend shows the scale’s domain, and zoom transforms are applied via `zoom()` events.

DDolbyref113

77% match

Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp

77% match

Loading thumbnail…

World Map

This example presents a choropleth world map visualizing countries colored by income group, with data sourced from World Atlas TopoJSON and TSV files. It uses D3 v5 with a geoNaturalEarth1 projection and d3.geoPath to render countries, while a color legend explains the ordinal color scale. The map supports zooming via d3.zoom, and hovering highlights countries in green. Animated transitions update the legend circles when the scale changes.

HHemanthh81

76% match

Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma

76% match

Loading thumbnail…

Interaction

A D3.js visualization displays a world map using a natural Earth projection, with countries rendered as SVG paths colored in bright green against a dark sea. Hovering a country turns it red and reveals its name via a tooltip. The map is built with `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` for interactive panning and zooming, while `d3.tsv` and `d3.json` load country names and geometries. A `topojson` feature layer draws each country, and CSS handles hover styling.

MMatan

76% match