Skip to main content
SimilarExport ZIP
100%

Question 4

✓ Published0🌍 Public
Jjaswanthreddy2715@gmail.com
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from HTML Starter

This bubble chart displays the relationship between GDP per capita, life expectancy, and population for countries across continents, with each circle’s size encoding population and color distinguishing continents. Built with D3.js v4 and rendered as SVG, it includes an interactive tooltip that shows the country name on hover, while highlighting and dimming by continent using CSS class selectors. The chart loads CSV data from a GitHub repository, uses `d3.scaleSqrt` for bubble sizing, `d3.scaleOrdinal` with `d3.schemeSet1` for colors, and animates opacity transitions for hover effects.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Question 4

This bubble chart compares GDP per capita and life expectancy for five countries, with bubble size scaled to population. The visualization uses D3 v5’s `d3.scaleLinear` for both axes, `d3.scaleSqrt` for bubble radii, and `d3.axisBottom`/`d3.axisLeft` to render ticks. Data loads from a CSV, and each circle’s position maps GDP on the x-axis and life expectancy on the y-axis, with country labels overlaid. SVG rendering with `circle` and `text` elements shows population, wealth, and health outcomes in a single static view.

Ppavanbellam@my.unt.edu
89% match
Loading thumbnail…

Activity6_Question4

This D3.js v7 bubble chart visualizes the relationship between GDP per capita, life expectancy, and population for countries in 2007, with bubbles positioned by GDP (on a log scale) and life expectancy, while bubble size encodes population. The chart uses `d3.scaleLog`, `d3.scaleSqrt`, and `d3.scaleOrdinal` to map data attributes, and renders in SVG with hover tooltips built via `d3.select` and the `.join` operator. Data is loaded from a CSV file containing country-level indicators, and the visualization includes legends for bubble size and continent color coding.

Mmaneeshraja47@gmail.com
89% match
Loading thumbnail…

Question4

This bubble chart visualizes the correlation between GDP per capita, life expectancy, and population area ratio across 20 countries, with each bubble’s size encoding population density and color identifying the country. The chart uses d3.csv() to load data from bubblechart.csv and renders circles via d3.scaleLinear for axes and bubble sizing, with a d3.scaleOrdinal and d3.schemeCategory10 for color mapping. Interactive tooltips are implemented with D3 event handlers (mouseover, mousemove, mouseleave) that display country details, while a static legend lists all countries beside color-coded dots.

Aajaykumarseelam@my.unt.edu
89% match
Loading thumbnail…

Activity6_Question 4

This D3.js bubble chart visualizes the correlation between GDP per capita, life expectancy, and population for 25 countries. The x-axis represents GDP in USD, the y-axis shows life expectancy in years, while bubble size encodes population in millions, and color distinguishes each country. The visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color assignment, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Interactive tooltips appear on mouseover, displaying detailed country data, implemented with SVG `circle` elements and HTML div overlays. A legend with sample circles and labels explains the population scale.

Nnikhilthoutu24@gmail.com
89% match
Loading thumbnail…

activity7_task4

This bubble chart compares GDP per capita with life expectancy for countries worldwide, where each circle’s size reflects population and its color denotes continent. Hovering over a bubble reveals a tooltip with the country name, while focusing on a continent dims all other bubbles to highlight that group. The visualization uses d3.v4 with SVG rendering, d3-scale-chromatic for color schemes, and interactive CSS transitions for hover effects. Data is loaded from a remote CSV file, and scales are defined using d3.scaleLinear and d3.scaleSqrt.

AArungopal Andalam
88% match
Loading thumbnail…

Activity-6_Question-4.9

This D3.js bubble chart plots 50 countries by GDP per capita on the x‑axis and life expectancy on the y‑axis. Each circle’s area is proportional to population, and color encodes geographic region. Hovering highlights a bubble and shows a tooltip with exact country statistics. The visualization uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble radius, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG for rendering.

Mmalisettisaisumanth@gmail.com
88% match
Loading thumbnail…

Question4_Bubble chart

This bubble chart visualizes the correlation between GDP per capita, life expectancy, and population-area ratio for 20 countries. Each circle’s position maps GDP and life expectancy, while its radius encodes population density, with color distinguishing nations. Data is loaded via `d3.csv` from `bubblechart.csv`. The visualization uses `d3.scaleLinear` for axes and size, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG circles with interactive tooltips on mouseover. A legend identifies each country.

Jjayanthbalina@gmail.com
87% match
Loading thumbnail…

Activity-6_Question4

This bubble chart shows the correlation between GDP per capita, life expectancy, and population area ratio across 20 countries. Each circle’s position encodes GDP and life expectancy, while its size represents population density, with color distinguishing nations. A tooltip reveals exact values on hover. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG circles with mouse event handlers for interactivity. Data comes from `bubblechart.csv`, rendered with standard SVG elements and a categorical legend.

RRISHIK KURIKELLY
87% match