Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of Scatterplot for peng bird dataset

✓ Published0🌍 Public
Cc_peimann@coloradocollege.edu
Last edited May 14, 2024
Created on May 13, 2024

This interactive chart displays changes in life expectancy over time for a selected country, alongside the global average trend. A dropdown menu lets users choose a country, triggering a new SVG line chart with axes and a legend. The visualization uses D3.js v6 to load CSV data, compute yearly averages, and render paths via `d3.line` and scales. It is built with React and renders using SVG, with data sourced from a GitHub-hosted CSV.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This example displays a scatter plot of country-level data from the world-data-2023.csv file, plotting life expectancy on the x-axis and birth rate on the y-axis. The visualization uses D3 v6’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to parse the data, map the scales, and render SVG circles with color-coded markers. Despite a title referencing penguin species, the code actually maps each circle’s color based on a species field, while axis labels incorrectly reference flipper length and body mass, reflecting a mismatch between the intended and actual data display.

HHOURPRIMERA@GMAIL.COM
89% match
Loading thumbnail…

Fork of Fork of Scatterplot for peng bird dataset

This example visualizes country-level data from the world-data-2023 CSV, plotting birth rate on the x-axis against calling code on the y-axis, with circle radius encoding infant mortality. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.axisBottom/axisLeft to render them. Circles are drawn using SVG with d3’s join method, styled in teal, and log data to the console on mouseenter. The chart is built in React with d3.v6, rendering in a fixed 900x400 SVG canvas.

Bbepnye@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatterplot maps each country’s birth rate against its calling code, with circle radius scaled by infant mortality, using data from the world-data-2023.csv dataset. The code employs d3.scaleLinear for both axes and d3.axisBottom/axisLeft to render ticks, while d3.csv fetches the remote data. Circles are drawn with SVG via d3.select and .join, and mouseenter events log the underlying data points. The visualization reveals an unorthodox pairing of unrelated numeric attributes, producing a largely arbitrary distribution across the 900×400 pixel SVG canvas.

Cc_peimann@coloradocollege.edu
87% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This example displays a scatterplot of country-level data from the World Data 2023 CSV, mapping birth rate against calling code, with circle radius representing infant mortality. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the scales. SVG circles are generated with d3.selectAll and joined data, filled with a single teal color. The chart includes mouseenter event handlers that log the data point to the console, though no tooltip or interactivity is visible in the rendered output.

Cchris.shimotake@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Scatterplot for peng bird dataset

This example displays a scatterplot of the world-data-2023 dataset, plotting each country’s birth rate against its calling code, with the radius of each circle representing infant mortality. The visualization uses D3 v4’s `d3.csv` to load the remote data, then builds scales with `d3.scaleLinear` and renders circles and axes using SVG selection methods like `append` and `call`. The data is sourced from a GitHub-hosted CSV file, and the chart is rendered as static SVG with a fixed color fill.

Kkaijavanzante@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatterplot displays relationships between birth rate, maternal mortality ratio, and fertility rate for countries, using color to encode fertility. Built with D3 v6, it reads CSV data from GitHub, creates an SVG canvas, and positions circles using linear scales for the axes. A color scale maps fertility values from orange to blue, and circles change appearance on hover, logging event data to the console.

KKiernan Nesslar
85% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatterplot visualizes the relationship between birth rate, calling code, and infant mortality across countries using the world-data-2023 dataset. Each circle’s x-position maps to birth rate, its y-position to calling code, and its radius encodes infant mortality, colored uniformly in teal. Built with d3.v6, the code uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft`, appending SVG circles via `d3.select` and `.join`. The data is loaded from a remote CSV using `d3.csv`, with hover events logging data to the console.

HHOURPRIMERA@GMAIL.COM
84% match
Loading thumbnail…

Fork of GapMinder (CP341 Style)

This visualization presents a fork of the classic GapMinder chart, displaying country-level GDP per capita against average lifespan across time. The left panel shows a scatterplot of circles scaled by population, while the right panel traces each country’s lifespan trajectory over years. Users control the year via a slider and filter by continent through a dropdown. Built with React and D3 v6, the code uses `d3.scaleLog`, `d3.axisBottom`, and `lineGenerator` for SVG rendering. Data comes from a JSON file, with hover tooltips and historical annotations displayed via custom event handlers.

Kkaijavanzante@gmail.com
82% match