Skip to main content
SimilarExport ZIP
100%

Travel v/s GDP

✓ Published0🌍 Public
Rrallabandisushen@gmail.com
Last edited Apr 10, 2023
Created on Apr 8, 2023

This example shows a world map of international tourism receipts in 2015, colored by magnitude to compare travel revenue against GDP. Hovering reveals each country’s exact value, and users can zoom and pan the map. It uses D3’s `geoNaturalEarth1` projection with `geoPath` for rendering, plus D3’s `zoom` behavior for interactivity. The map loads country boundaries from TopoJSON and data from a CSV file, while `scaleOrdinal` and `schemeGreens` drive the color legend.

AI-generated description

A 2015 world map of Internet Users Dataset. This iteration adds hover and zoom.

MIT Licensed

Similar vizzes

Loading thumbnail…

TRAVEL VS GDP D3.js Line Chart

This visualization presents a line chart displaying international tourism receipts, intended to show GDP-related travel trends across countries from 2012 to 2020. The chart renders a single series of data points as a path in an SVG, using d3.csv to load the dataset and d3.scaleBand and d3.scaleLinear for the axes. The line itself is generated with d3.line, with the Y axis scaled to the "customers" column, while the X axis labels years as categories. The code also demonstrates axis rendering via d3.axisBottom and d3.axisLeft, with styling handled through CSS.

Rrallabandisushen@gmail.com
83% match
Loading thumbnail…

TRAVEL VS GDP barGraph

This visualization combines a bar chart and scatter plot to compare the 2022 population of countries, using a CSV dataset. Bars encode population values on a linear scale, while overlaid blue circles highlight the same data points. Users can sort the countries in ascending or descending order via buttons, with transitions animating the reordering. The code uses D3 v5 APIs including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`, along with `transition()` and `.attr()` for smooth updates. Tooltips display country names and population on mouseover.

Rrallabandisushen@gmail.com
74% match
Loading thumbnail…

Fork of Scatter project

This scatter plot visualizes the relationship between country code (on the x-axis) and GDP (on the y-axis) for a dataset of international tourism receipts, with each country represented as a semi-transparent red circle. The visualization uses the D3 v5 library, specifically importing functions like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and scale the data. The data is loaded from a CSV file and processed in JavaScript, with the GDP values converted to numbers before being rendered as SVG circles within a 960x500 pixel canvas.

Rrallabandisushen@gmail.com
72% match
Loading thumbnail…

World Map

This interactive choropleth map displays GDP per capita (PPP, current international dollars) for 2020 across world countries, using a yellow-green-blue sequential color scale with missing data filled in green. The visualization fetches topojson country outlines and a CSV dataset, then renders them using d3.geoNaturalEarth1 projection and d3.geoPath. Color encoding relies on d3.scaleQuantile with d3.schemeYlGnBu, while country boundaries are joined via d3.selectAll and Promise.all handles asynchronous data loading. The map also draws graticule lines and an outline for geographic context.

LLakshmipriya-kalapala
71% match
Loading thumbnail…

Atlas Map

This atlas map visualizes global GDP per capita for the year 2020, using a color gradient from yellow to blue to represent the quantile distribution of the data. Countries with missing data appear in gray. The map is rendered with the D3.js library, using `geoNaturalEarth1` for the projection, `geoPath` for country outlines, and `geoGraticule` for the graticule and outline layers. GDP data is fetched from a CSV file, while country geometries are loaded from a TopoJSON world atlas.

VVineela Reddy
68% match
Loading thumbnail…

Let's make a map

This example visualizes the nominal GDP of ten countries from a CSV dataset on a natural Earth projection map. The map first draws a blue sphere backdrop using `d3.geoNaturalEarth1` and `d3.geoPath`, then overlays country outlines in light green from the world-atlas TopoJSON file. Countries are rendered as SVG paths using the `feature` method from topojson, with GDP values not yet linked to any visual encoding.

KKazushige Okuma
68% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes GDP per capita (PPP, current international $) for 2020 across countries, using a sequential YlGnBu color scale to encode economic output. The map renders with d3.geoNaturalEarth1 and d3.geoPath, while d3.scaleQuantile assigns colors from d3-scale-chromatic’s schemeYlGnBu. Data comes from a World Bank CSV parsed with d3.csvParse, and country boundaries use topojson-client on a world atlas. Gray fills indicate missing GDP values for a given country.

CCurran Kelleher
68% match
Loading thumbnail…

Bubble Chart GDP by Country

This bubble chart displays GDP by country for 2016, with each bubble’s size encoding the GDP value and its color indicating the region. The visualization is built with D3 v5 using the `d3.pack` layout and `d3.hierarchy` to structure the data, rendered as SVG circles with text labels. Tooltips appear on mouseover, showing the country name and formatted GDP. The data is loaded via `d3.csv` from a World Bank dataset hosted in a GitHub gist.

663anp3ca
67% match