Skip to main content
SimilarExport ZIP
100%

firstt

✓ Published0🌍 Public
119h61a05c9@cvsr.ac.in
Last edited Nov 10, 2025
Created on Nov 10, 2025
Forked from firstt

This interactive world map visualizes automobile metrics for 2024, showing both total vehicles and EV sales by country. Toggle buttons switch the choropleth color scale between these two metrics, while circle size represents EV sales volume and circle color encodes average car price. The visualization uses D3 v7 with d3.geoPath and topojson-client to render world topography, with SVG elements providing animated transitions when switching between metrics. A legend dynamically updates to reflect the current color scale, and tooltips provide detailed country-level data on hover.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

firstt

This interactive world map visualizes 2024 automobile metrics across ten major markets, using D3.js v7 with SVG rendering. Users toggle between choropleth coloring by total vehicles or EV sales, while circle size encodes EV sales and circle color represents average car price. Hovering reveals detailed metrics via tooltip. The visualization leverages d3.geoPath with world-atlas TopoJSON data, d3.csv parsing, and dynamic legend updates with transition animations.

119h61a05c9@cvsr.ac.in
96% match
Loading thumbnail…

world map

This interactive map visualizes 2024 automobile metrics, allowing comparison of Total Vehicles and EV Sales across major countries. Country colors reflect the selected metric, while circle sizes encode EV sales volume. Built with D3.js v7, the visualization projects country boundaries from a world-atlas TopoJSON file using `d3.geoPath` and integrates a hover tooltip. A separate legend and toggling buttons drive the color-encoding switches, with the page styled via a clean card-based CSS layout.

Llohitsai62@gmail.com
90% match
Loading thumbnail…

one

This interactive world map visualizes renewable energy usage and CO₂ emissions for 12 major countries in 2024. Users toggle between the two metrics via buttons, triggering smooth color transitions across the geography. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render countries from TopoJSON data, while d3.scaleSequential with interpolateGreens and interpolateReds drives the color encoding. Hover tooltips display detailed country statistics via mouse events. The SVG rendering includes an ocean-colored sphere background and grayscale borders for non-data countries.

Mmuchakurthisahithipatel@gmail.com
77% match
Loading thumbnail…

lets make a Map

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue spherical backdrop. It also demonstrates asynchronous data loading and report generation from a JSON dataset of car listings. The visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate country outlines from TopoJSON data fetched via `d3.json` from the world-atlas package, and converts TopoJSON to GeoJSON using the `feature` function from topojson. Car data is retrieved through a custom promise-based `getCars` function.

Rrazidazi88
74% match
Loading thumbnail…

Interactive World Map

This interactive world map displays country boundaries colored in green on a blue sphere, with hover states turning countries orange. The visualization uses D3 v5 and TopoJSON to load world atlas data from unpkg, combining geographic TSV metadata with 50m JSON topology. It renders through an SVG path generator with a natural Earth projection, while d3.zoom enables pan-and-zoom interaction. Country names appear as tooltips via appended title elements, and the map resizes to fill the browser viewport.

OOskar Weinfurtner
73% match
Loading thumbnail…

one

This interactive map visualizes 2024 renewable energy percentages and CO₂ emissions across twelve countries. A button toggle switches the choropleth’s color scale between green (renewable energy) and red (emissions), with a hover tooltip displaying both metrics. The map uses D3 v7's modular API, including `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with interpolators, over TopoJSON world-atlas data. Country fills transition smoothly via D3's `.transition()` method when switching metrics.

Mmuchakurthisahithipatel@gmail.com
73% match
Loading thumbnail…

Interactive Map with d3.js

This example shows an interactive world map rendered as SVG, with countries colored dark gray on a light sphere and highlighted in red on hover. The visualization uses d3.geoEqualEarth projection with d3.geoPath to draw country boundaries from TopoJSON data, while country names are loaded from a TSV file and displayed as tooltips via SVG title elements. Pan and zoom are enabled through d3.zoom, with scale limits between 1x and 8x, and the map renders using the world-atlas dataset at 110m resolution.

MMaciek Sitkowski
73% match
Loading thumbnail…

D3 Data Dashboard

This dashboard visualizes global CO2 emissions across countries, continents, and years, allowing users to compare total emissions or per-capita values via an interactive world map, a pie chart of continental shares, and a bar chart of annual trends for a selected country. Built with D3 v4, it uses `d3.geoMercator` and `d3.geoPath` for map rendering from TopoJSON world atlas data, plus animated SVG transitions for the map, pie arcs, and bars. A year slider and radio buttons drive updates, with tooltips revealing detailed values from the CSV dataset.

VVishnu Sudireddy
73% match