Loading Data

100%

✓ Published0🌍 Public

Last edited Sep 2, 2025

Created on Sep 2, 2025

This example visualizes GDP per capita trends for ten African countries from 2014 to 2023 using a multi-line chart. It loads data from the World Bank API via `fetch`, then renders time-series paths with the `d3.line` generator, and scales the axes with `scaleTime` and `scaleLinear`. A color-coded legend identifies each country, while the axes and title adopt a crimson palette. The visualization builds its SVG dynamically with `select`, `join`, and `axisBottom`/`axisLeft`, updating on container resize.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example visualizes the GDP per capita for ten African countries from 2014 to 2023 as a multi-line chart. The D3 v7 code fetches World Bank API data, scales time and linear axes, and renders polylines via `d3.line`. A legend identifies each country by its line color. Axes and title are styled in crimson tones, while tooltips are implied but not shown in the provided code.

BBismark Kofi Owusu Sarfo

84% match

Loading thumbnail…

demo

This interactive D3.js visualization displays GDP per capita trends from 1960 to 2023 for multiple countries using a dataset loaded from a GitHub CSV file. It renders grouped bar charts for each country-year combination, with axes, dashed grid lines, and hover tooltips to highlight values. The code uses D3 v7’s `d3.csv`, `d3.scalePoint`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.schemeCategory10` for color encoding, producing an animated SVG view of economic changes over time.

Vvenkatabhaskaratetali@my.unt.edu

77% match

Loading thumbnail…

Fork of Multiline chart

This interactive multiline chart visualizes GDP trends for ten North and Central American countries from 2006 to 2023. Users can toggle individual country lines via checkboxes, with a tooltip displaying precise GDP values on hover. The visualization, built with D3.js, uses a CSV dataset fetched from a GitHub gist and renders smooth SVG paths with animated transitions. A legend with a color scale distinguishes each nation, while a dynamically sized viewport and dashed grid lines enhance readability. The code employs D3's `scaleOrdinal`, `csvParse`, and SVG path generation for the interactive line chart.

Kkfhujosefsson@dons.usfca.edu

75% match

Loading thumbnail…

Loading US GDP Data with Interactive Color Legend and Line Chart

This interactive visualization displays US GDP data, showing annual levels and percentage changes over time with a line chart. A scatter plot uses color-coded circles to represent each year, grouped into decades via an interactive color legend that highlights or fades data points on hover. The code relies on D3 v7's `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, and `axisLeft/axisBottom/axisRight` modules to render the axes and chart. Data is fetched as CSV from the BEA via a GitHub raw URL and parsed with `csvParse` and `timeParse`.

SSeekerzero

74% match

Loading thumbnail…

fresh block

A scatterplot shows the evolution of Gross Domestic Product (GDP) for Sub-Saharan African countries, with each point encoding GDP on the vertical axis and year on the horizontal axis, while the size of each point reflects population. The visualization filters the source CSV data to exclude missing values before plotting. It uses d3.v4 with SVG rendering, employing `d3.scaleLinear` for both axes, `d3.scaleSqrt` for circle area, and `d3.scaleOrdinal` for color, all styled with the Amatic SC and Roboto fonts.

EEd190

73% match

Loading thumbnail…

Multiline chart

This interactive multiline chart visualizes the GDP of 19 European countries from 2006 to 2023, using D3.js (v7.8.5) to render SVG line paths and an animated legend. Users toggle country visibility via checkboxes, with a tooltip displaying formatted GDP values. The data is fetched from a GitHub gist and parsed as CSV using `d3.csvParse`. A color scale from `d3.schemeCategory10` assigns distinct hues, and the chart includes dashed gridlines and an SVG-based legend for clarity.

Kkfhujosefsson@dons.usfca.edu

73% match

Loading thumbnail…

Untitled

This example visualizes the GDP per Capita of a selection of countries as animated bar charts, with interactivity provided by hovering over bars to see tooltips and clicking a checkbox to sort the values in descending order. The visualization is built using D3 v4 (loaded via UNPKG), rendering SVG elements, and fetching data from the Wasabi API. The code demonstrates importing from the `d3` module and local ES6 modules, using `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart.

EEklavya Jain

73% match

Loading thumbnail…

Activity6_Task4

This visualization shows the relationship between GDP per capita, life expectancy, and population for ten countries. Each bubble’s x and y positions represent GDP and life expectancy, while the bubble radius encodes population size, with a categorical color scale distinguishing countries. Using D3 v7, the code loads data from a CSV file, scales values with `d3.scaleLinear`, renders SVG circles, and adds interactive tooltips that display country-specific details on mouseover. Axis labels and a title clarify the chart’s context, and the animation of tooltip transitions enhances user exploration.

Aamarnadhkari98@gmail.com

73% match