Skip to main content
SimilarExport ZIP
100%

nshieldscc_Fork of Fork of Fork of Scatterplot for peng bird dataset

✓ Published0🌍 Public
Nnathan@shieldsonline.org
Last edited Apr 30, 2024
Created on Apr 30, 2024

This scatterplot displays the relationship between GDP per capita and tertiary education enrollment percentages across countries, using a simple point-based visualization. The chart encodes the data with green circles positioned by linear scales for both axes, with fixed domains set to accommodate the dataset's range. Built with D3 v6, the code loads CSV data from a GitHub repository, appends SVG elements to a div, and uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and circle selection joins to render the visualization. The fixed axis domains and small point radius reveal the raw distribution without interactivity or color encoding.

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

Fork 2

A scatter plot visualizes the relationship between GDP and CO2 emissions for ten major countries, with each point colored by country and hover interactions revealing exact values via tooltips. The chart uses D3.js v7 to load CSV data from GitHub, parse numeric values, and render SVG circles positioned by linear scales. Axes, tick formatting, and labels are generated with `d3.axisBottom` and `d3.axisLeft`, while a color ordinal scale assigns category colors to countries.

SSeema Shrestha
79% 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
79% 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
79% match
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

This example plots global economic growth using a scatter plot of GDP per capita against time. Each small blue circle represents a single country's GDP value for a given year. The visualization uses a logarithmic y-axis scale to handle the wide range of data values, revealing trends across nations from 1800 to 2100. The code combines React's state management with D3.js v7, using `scaleLog` for the axis, `scaleLinear` for time, and `csvParse` to transform the loaded Gapminder dataset into a long format for plotting.

Sskasliwal@wpi.edu
78% match
Loading thumbnail…

Fork of Scatter project

This scatter plot visualizes the relationship between country code (on the x-axis) and GDP (on the y-axis) for a dataset of international tourism receipts, with each country represented as a semi-transparent red circle. The visualization uses the D3 v5 library, specifically importing functions like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and scale the data. The data is loaded from a CSV file and processed in JavaScript, with the GDP values converted to numbers before being rendered as SVG circles within a 960x500 pixel canvas.

Rrallabandisushen@gmail.com
78% match
Loading thumbnail…

Fork of 6th visualisation 1

This scatter plot visualizes the relationship between population and GDP across countries, with each point colored by region and interactive tooltips showing country details. It uses D3 v7 to load CSV data from a GitHub repository, then renders an SVG chart with linear scales for both axes and an ordinal color scale based on region_id. The code employs d3.csv, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, and d3.axisLeft to construct axes, circles, and a categorical legend, all within a responsive layout.

Cchintamanenithp@gmail.com
77% 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
77% match