Fork of Circles with D3

100%

Fork of Circles with D3

✓ Published1🌍 Public

Last edited Aug 27, 2025

Created on Aug 27, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading Data

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.

BBismark Kofi Owusu Sarfo

84% match

Loading thumbnail…

Fork of Circles with D3

This example displays a scatter of seven colorful circles of varying sizes over a large central circle containing a simplified African continent outline. The visualization uses D3 v7 with a `ResizeObserver` to redraw responsively, and the continent is drawn as a hand-coded path computed from the center circle's coordinates. Circle positions and radii are hardcoded as static data, with `.join()` and `.attr()` methods managing SVG element updates. The central circle uses a light fill with dark stroke, while the data circles render semi-transparently on a pale green background.

BBismark Kofi Owusu Sarfo

78% match

Loading thumbnail…

Fork of Circles with D3

A D3.js scatter plot displays country-level COVID-19 data, plotting population density against median age for a dataset loaded from mergedata.json. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines, and d3.selectAll with data binding to render interactive circles. A tooltip, styled with CSS, appears on mouseover to show the country name, population density, and median age, while the circles change color on hover.

SSreenath Vadlamudi

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

77% match

Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes the relationship between population in 2025 and GDP per capita for various countries. Each circle represents a country, with its horizontal position determined by population and vertical position by GDP per capita. The visualization uses D3 v7 to load CSV data from a GitHub gist, applies linear scales for both axes, and renders SVG circles with axis labels and a legend. The code demonstrates `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for data binding and chart construction.

Nnithinreddypinikesi@my.unt.edu

77% match

Loading thumbnail…

Fork of Assignment6_Question4.9

This bubble chart visualizes the relationship between GDP, life expectancy, and population for ten countries. Circles are positioned by GDP on the x-axis and life expectancy on the y-axis, with circle size representing population and color identifying each nation. The code uses D3 v6’s `scaleLinear`, `scaleSqrt`, and `d3.axisBottom`/`axisLeft` APIs, loading data from a local CSV. An SVG legend displays country-color mappings, with axis labels and a title clarifying the quantitative comparisons.

Mmasters200128@gmail.com

76% match

Loading thumbnail…

Fork of Create major events across different countries today

The visualization is a circle-packing chart that displays countries grouped by continent, with circle size representing GDP and color indicating income category. It uses the `d3.pack()` layout algorithm, `d3.hierarchy()` for data structuring, and `d3.schemeCategory10` for color encoding. Interactive tooltips provide details on GDP, population, and CO2 emissions. The code relies on a custom tooltip component and data transforms to organize the hierarchical dataset.

NNita

76% match

Loading thumbnail…

Fork 2

A scatter plot visualizes the relationship between GDP and CO2 emissions for ten major countries, with each point colored by country and hover interactions revealing exact values via tooltips. The chart uses D3.js v7 to load CSV data from GitHub, parse numeric values, and render SVG circles positioned by linear scales. Axes, tick formatting, and labels are generated with `d3.axisBottom` and `d3.axisLeft`, while a color ordinal scale assigns category colors to countries.

SSeema Shrestha

76% match