Skip to main content
SimilarExport ZIP
100%

Clase 02 - Parte 2 - D3 Fernando Becerra

✓ Published1🌍 Public
Mmaxthamt
Last edited Jul 29, 2022
Created on Jul 29, 2022

This interactive bubble chart visualizes the relationship between GDP per capita, life expectancy, and population across countries, using a logarithmic x-scale and linear y-scale. The D3 v7 code renders SVG circles sized by population and colored by continent, with hover interactions that dim non-target circles and display a tooltip showing country details. The example demonstrates the enter-update-exit data join pattern, along with d3.scaleLog, d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/axisLeft, loading data from a Rosling dataset via d3.json.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactividad

This interactive scatter plot displays global health and economic data, plotting life expectancy against GDP per capita, with circle radius encoding population and color distinguishing continents. Built with React and D3.js v7, the visualization uses `d3.scaleLog` for the x-axis, `d3.scaleLinear` for y and radius, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The code implements enter/update/exit logic for SVG circles, enabling dynamic highlighting. Hovering over a circle triggers a custom tooltip showing country, population, GDP, and life expectancy, with other circles dimmed via `d3.selectAll` and opacity styles. Data comes from a remote rosling.json file.

Mmaxthamt
84% match
Loading thumbnail…

Bubble Chart: All Data

This bubble chart displays global life expectancy against GDP per capita, with bubble size representing population and color indicating continent. The visualization includes an interactive tooltip showing country names on hover, plus a legend for population scale. Built with D3 v4, it uses SVG circles, d3.scaleLinear for axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeSet1 for color mapping. The chart reads data from a CSV of three numeric variables per country and adds hover effects to highlight individual data points.

SSimon Hackbert
80% match
Loading thumbnail…

P2 - Task 1-2

This visualization shows a scatterplot of GDP per capita against life expectancy for the top 50 most populous countries in 2002, with circle size encoding population. The code uses D3.js and React, rendering SVG elements via a custom Scatterplot class. Data loads from a CSV file using `d3.csv`, and the chart uses `d3.scaleLinear` for x, y, and radius scales, with axes generated by `d3.axisBottom` and `d3.axisLeft`. A year slider is present in the HTML but is not yet connected to data updates.

EEthan Tam
79% match
Loading thumbnail…

Data Reading & Shaping

This animated bubble chart shows the relationship between income per capita, life expectancy, and population for nations from 1800 to 2009, with bubbles colored by region. Using D3 v4 and SVG, it loads data from a JSON file, applies logarithmic and linear scales, and updates circle positions through a 2-second transition each year. A counter displays the current year as the visualization progresses through the dataset.

EElaineYu
79% match
Loading thumbnail…

Gapminder Clone

This interactive visualization recreates the classic Gapminder chart, plotting GDP per capita against life expectancy for countries over time from 1800 to 2014. Users can filter by continent via a custom dropdown menu and animate the progression through years with a play button. The code uses D3 v7 scales, axes, and transitions for the SVG rendering, with a tooltip displaying country details on hover. Data is loaded as JSON from an external GitHub source, and a custom dropdown module handles the continent selection.

AAdan Rodriguez
76% match
Loading thumbnail…

ScatII

This scatterplot visualizes the relationship between GDP (x-axis) and population (y-axis) for various countries. Each circle represents a country, with tooltips revealing the country name, GDP, population, and calculated GDP per capita. Built with React and D3 v7, the visualization uses `d3.csv` to load data from a GitHub repository, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` for tick labels. It is rendered as an SVG, with data formatted using a custom `numMaker` utility that abbreviates large numbers into billions and millions.

Aadventuresenglish.info@gmail.com
76% match
Loading thumbnail…

Clase 02 - Parte 2 - D3 Fernando Becerra

This example visualizes the temporal distribution of sociological research in Chile, plotting each study as a circular mark along a time axis from its publication year, colored by research group. The visualization uses D3 v7 with a force-directed simulation (`d3.forceSimulation`, `d3.forceX`, `d3.forceY`, and `d3.forceCollide`) to position overlapping points, while a time scale (`d3.scaleTime`) and band scale (`d3.scaleBand`) map the data. Data is loaded from remote JSON and CSV sources via `d3.json` and `d3.csv`, with rendered output as SVG circles that include hover tooltips.

Mmaxthamt
75% match
Loading thumbnail…

fresh block

This example visualizes global health and wealth data as a bubble chart, where each circle represents a country positioned by life expectancy (y-axis) and GDP per capita (x-axis), with circle size encoding population and color encoding continent. It uses D3 v4’s scales (`scaleLinear`, `scaleLog`, `scaleSqrt`, `scaleOrdinal`) to map variables and renders SVG circles with axes labeled accordingly. The code loads CSV data via `d3.csv` and applies sorting by population, while styling uses opacity and a light grey background. The chart focuses on comparing country-level indicators, with axes labeled in French.

CClaraGriot
75% match