Internet vs. GDP

100%

Internet vs. GDP

✓ Published0🌍 Public

Last edited Oct 7, 2016

Created on Oct 7, 2016

This example shows a scattergram of internet and cellular penetration against GDP per capita for 174 countries in 2012, using World Bank data. A radio button toggles between internet and cellular metrics, while a d3.brush selection highlights points in the chart and synchronizes with a sortable HTML table. The visualization uses D3 v3 with SVG rendering, a logarithmic x-axis, and hover interactions between the table and chart.

AI-generated description

D3 Brush Usage in a Scattergram

Example of d3.brush to select items in a scattergram and synchronization with table.

See the script in action here

forked from <a href='http://bl.ocks.org/boeric/'>boeric</a>'s block: <a href='http://bl.ocks.org/boeric/9775876'>Internet vs. GDP</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This visualization shows the percentage of internet users and GDP per capita for countries within a selected world region, using an interactive bar chart. Users choose a region via radio buttons, which filters the dataset and updates the chart with a sorting animation. The code uses D3 v4 to create SVG elements, including `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.csv` to load the data. Tooltips display country-specific GDP figures on hover.

NNuniemsis

71% match

Loading thumbnail…

GDP Average Chart

This D3.js bar chart visualizes the 2023 GDP per capita for the top 50 countries, using a green circle for each nation plotted along a categorical x-axis and a linear y-axis. Circles are positioned using `d3.scaleBand` and `d3.scaleLinear`, with interactive tooltips revealing the country name and GDP on hover. The SVG chart, built with `d3.svg` and `d3.axisBottom`/`d3.axisLeft`, reads data from the included `TopGDPCountries.csv` file, rotating x-axis labels for readability. Data originates from Worlddata.info.

Mmhzahdeh@dons.usfca.edu

70% match

Loading thumbnail…

Basic Scatter Plot

This scatter plot shows the relationship between GDP per capita and year for seven selected countries—China, the United States, India, Japan, Russia, Brazil, and France—between 1990 and 2014. Each circle represents a country-year observation, colored by country, with axis labels and a color legend. The visualization uses D3 v4’s scaleLinear, axisBottom, axisLeft, and legendColor APIs, rendering SVG circles. Data comes from Our World in Data, filtered from a CSV file containing internet usage, GDP, and population metrics.

QQ-Zhao

70% match

Loading thumbnail…

GDP Choropleth Viz

A world map colored by GDP per capita displays each country’s economic standing for a selected year, controlled by a slider. Hovering over a country updates a line plot showing that nation’s GDP trend over time, with red and green reference lines marking the current year’s value. The visualization combines a `d3.geoEqualEarth` projection rendered as SVG with `d3.scaleLinear` color encoding, alongside a linked line chart built using `d3.line` and axis components. GDP data originates from a CSV file, while country boundaries use a GeoJSON source.

TTom Heffernan

69% match

Loading thumbnail…

Gapminder GDP per Capita (Scatter Plot)

This scatter plot visualizes the change in per-capita GDP for various countries from 1800 to 2100. A logarithmic scale on the y-axis reveals the wide range of economic output, from under 500 to over 25,000 dollars, with individual points representing a country-year pair. Built using D3 v7, the visualization uses `csvParse` to load the wide-format Gapminder Foundation data, transforms it into a long format, and renders each data point as a semi-transparent circle, with linear and log scales for the temporal and GDP axes, respectively.

Sskasliwal@wpi.edu

69% match

Loading thumbnail…

World Income For Country With GDP: CSCE 5320

This interactive D3.js visualization explores world country income and energy data, comparing GDP per capita against purchasing power parity through a scatterplot of point marks. Users navigate five design stages that progressively add categorical region hues, quantitative population sizing, and intentionally broken then repaired chart configurations. The visualization uses SVG rendering with animated transitions, D3 scales for logarithmic and linear axes, and a color legend mapping regional categories. Data loads from a CSV file containing country-level income, population, and region attributes, with tooltips and summary statistics supporting the analysis.

Eeko.5samuel@gmail.com

68% match

Loading thumbnail…

Internet

A horizontal bar chart shows the percentage of individuals using the internet per country, based on the year 2000 column of a CSV file containing data from 2000 to 2014. The visualization initially focuses on the earliest year, with each country represented by a single bar whose length encodes its value. The code uses D3.js version 3.5.6, employing `d3.scale.linear` for bar widths and `d3.scale.ordinal` with `rangeBands` for evenly spaced bar heights, and reads the data via `d3.csv`, appending `rect` elements to an SVG canvas.

PPacsangon

68% match

Loading thumbnail…

Internet

This bar chart displays the percentage of Internet subscribers in the year 2000 for various countries, sorted in descending order. Each green rectangle represents a country, with its width proportional to the subscription percentage, and hovering reveals a tooltip with the exact value. The visualization uses D3.js to load data from a CSV file, sorts the data, and appends rectangles to an SVG canvas. The chart’s height accommodates each country as a separate row, making comparisons straightforward.

PPacsangon

68% match