Skip to main content
SimilarExport ZIP
100%

firstt

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

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.

AI-generated description

World Automobile Metrics Map (2024)

An interactive D3.js world map visualization of automobile metrics including total vehicles, EV sales, and average car prices by country.

Features

  • Interactive Map: Hover over countries to see detailed metrics
  • Toggle Visualization: Switch between coloring by Total Vehicles or EV Sales
  • Circle Visualization: Circle size represents EV Sales, color represents Average Car Price
  • Responsive Design: Adapts to different screen sizes
  • Legend: Dynamic legend updates based on selected metric

Data

The visualization includes data for 10 major automotive markets (USA, China, Japan, Germany, UK, France, India, Brazil, Mexico, South Korea).

To use your own CSV data:

  1. Update the INLINE_CSV variable in the script or
  2. Set DATA_URL to point to your hosted CSV file

Technologies

  • D3.js v7
  • TopoJSON for geographic data
  • world-atlas (countries-110m.json)

How to Use

  1. Open index.html in a browser
  2. Hover over countries to see metrics
  3. Click buttons to toggle color scheme between Total Vehicles and EV Sales
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

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
87% 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
74% 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…

Untitled

This interactive parallel coordinates plot uses the D3.js v3 library to visualize a dataset of car characteristics, including fuel economy, engine displacement, power, weight, and acceleration. The SVG rendering shows each car as a polyline crossing multiple vertical axes, with steelblue foreground lines for focus and grey lines for background context. Users can drag the axis labels to reorder the dimensions and use the built-in brush component on each axis to filter the displayed cars dynamically, updating the foreground paths in real time.

Eeugene-gilmore
74% match
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot uses D3.js to visualize automotive data across multiple dimensions, with points plotted on an SVG canvas and brushable for detailed exploration. The visualization incorporates a world map background rendered with topojson and d3.geo projections, allowing users to filter car data by geographic region through a modal interface. The code leverages Bootstrap modals for control panels and DataTables for tabular data display, while animations and player controls enable temporal filtering of the dataset.

HHarish M A
73% match
Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes a dataset of cars and their specifications, such as fuel economy, horsepower, and weight. Each car is represented by a line connecting its attribute values across multiple vertical axes. Users can drag axes to reorder them and use brush controls on each axis to filter which vehicles remain highlighted, with the background context paths hidden while dragging. The visualization is built with D3.js v3, using SVG for rendering, `d3.svg.axis` for axes, and `d3.behavior.drag` and `d3.svg.brush` for interaction.

QqOp3
72% match
Loading thumbnail…

Cars Report

This example displays a world map of cities with populations over 50,000, using data from Simplemaps’ World Cities Database and country boundaries from World Atlas TopoJSON. It renders the map with d3.geoPath, adding graticules and styled land and sphere fills. The page also incorporates a car dataset, parsing JSON with JSON.parse and outputting the first car’s make into a pre element, while CSS styles the map and text with Poppins font and circular markers.

Jjnic4416
72% match