Skip to main content
SimilarExport ZIP
100%

Testing Ben Scatterplot

✓ Published0🌍 Public
FFremont
Last edited May 1, 2024
Created on May 1, 2024

This example shows a scatterplot of global country data, plotting birth rate against calling code, with the size of each circle encoding infant mortality. The visualization uses D3.js v6 to load CSV data from a GitHub repository, create linear scales for both axes, and render the SVG circles. Interactive mouseenter events log individual data points to the console, allowing inspection of specific country records. The chart relies on d3.csv for data loading, d3.scaleLinear for axis scaling, and d3.axisBottom and d3.axisLeft for generating the axes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
86% 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
84% 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
84% 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
83% 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
82% 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
82% 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
81% match
Loading thumbnail…

Scatter Plot

Using d3.csv to load population data for ten countries, this scatter plot displays each nation as a circle positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses d3.axisBottom and d3.axisLeft with custom tick formatting that abbreviates large numbers, while SVG circles are rendered with a fixed radius. Population values from the CSV are multiplied by 1000, and the chart includes labeled axes and a title.

Bben-chin-43
80% match