Skip to main content
SimilarExport ZIP
100%

P2 - Task 1-2

✓ Published0🌍 Public
EEthan Tam
Last edited Feb 8, 2020
Created on Feb 8, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
80% match
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
80% match
Loading thumbnail…

Activity6_Q3

This scatter plot shows the relationship between GDP per capita (in billions) and life expectancy for countries in 2015, sourced from a GitHub-hosted GDP dataset. It uses d3.csv to load the data, scales the GDP axis logarithmically via d3.scaleLog, and colors points using d3.scaleOrdinal with d3.schemeCategory10. SVG circles are rendered with D3's data join, and hover interactions display a tooltip showing country name, GDP, and life expectancy. The axes are labeled using d3.axisBottom and d3.axisLeft.

VVidya Lakshmi Chitturi
79% match
Loading thumbnail…

population dataset

This interactive scatter plot visualizes population data across multiple dimensions, cycling through life expectancy, GDP per capita, population, and year as the x-axis every two seconds. Each circle represents a country, positioned by its selected x-value and GDP per capita on the y-axis. Built with D3 version 6.7.0, it uses d3.csv for loading, scaleLinear for axes, and axisLeft/axisBottom for rendering. The animation updates via setInterval, re-invoking the custom scatterPlot module to redraw circles and axes.

Ppavan vasamsetti
79% match
Loading thumbnail…

Activity6_q3

This scatterplot shows the relationship between GDP per capita and life expectancy for seven countries, with each circle colored by country. The visualization uses D3.js v7 to load a local CSV file, scale the data linearly on both axes, and render circles as SVG elements. Axes are drawn using d3.axisBottom and d3.axisLeft, with labels for both variables. The d3.scaleOrdinal with schemeCategory10 assigns distinct colors to each nation, making it easy to compare economic output against health outcomes across the sample.

Vvidyagangasani@my.unt.edu
79% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between GDP and life expectancy for a synthetic dataset of countries, with points colored by region using a Tableau10 ordinal scale. It loads CSV data with d3.csv and d3.autoType, then renders circles in an SVG container using d3.scaleLinear for both axes and d3.axisBottom/d3.axisLeft for tick marks. The chart includes labeled x and y axes, semi-transparent points, and is built entirely with D3 v7.

LLikhitaMudagereShivaraj@my.unt.edu
79% match
Loading thumbnail…

Activity6_Q6

This scatterplot displays the relationship between GDP per capita and life expectancy for ten countries, with each point colored by continent. Built with D3.js v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeSet2` for categorical coloring. Hovering over a circle triggers a tooltip showing country name, GDP, and life expectancy. The SVG rendering includes labeled axes and axis ticks generated via `d3.axisBottom` and `d3.axisLeft`.

Llokasaivenkatatammineedi@my.unt.edu
79% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of the top 10 most populous countries, with countries on the y-axis and population on the x-axis. The code uses D3 v5 within a React framework, loading data from a CSV file and rendering SVG circles. It employs `d3.scaleLinear` and `d3.scaleBand` for scales, with `d3.axisBottom` and `d3.axisLeft` to generate axes, and formats tick labels using `d3.format`.

Jjiayuansun
79% match