Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Scatterplot for peng bird dataset

✓ Published31🌍 Public
Bbepnye@gmail.com
Last edited Apr 30, 2024
Created on Apr 30, 2024

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.

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 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
95% 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
94% 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
94% 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
94% match
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
92% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for world dataset

This scatterplot visualizes the relationship between birth rate and calling code for countries in a 2023 world dataset, with each point’s radius encoding infant mortality. Built with React and animated via D3 v6 transitions, it uses SVG circles with hover interactions that display country names in a tooltip and enlarge stroke width. The code employs `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `.join('circle')` to render the visualization, pulling CSV data from a GitHub raw source.

QQuinn Sebso
89% 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
89% match
Loading thumbnail…

Ben Fork of Scatterplot for peng bird dataset

This example shows a scatterplot of the world-data-2023 dataset, where each circle represents a country, with horizontal position mapped to birth rate and vertical position to calling code. Circle radius encodes infant mortality rate. The visualization uses d3.csv to load the data and d3.scaleLinear with d3.axisBottom and d3.axisLeft to render the axes. Points are drawn as SVG circles with a mouseenter event logging data to the console. The chart is built with d3.v6 and rendered using SVG.

Cchris.shimotake@gmail.com
89% match