Skip to main content
SimilarExport ZIP
100%

Fork of Responsive Scatter Plot

✓ Published0🌍 Public
KKiernan Nesslar
Last edited Apr 30, 2024
Created on Apr 30, 2024

This fork of a responsive scatter plot displays the relationship between birth rate and maternal mortality ratio across countries, using world data from 2023. It loads a CSV file with `d3.csv`, filters out incomplete records, and renders circles with a linear scale for each axis. The chart adapts to its container size through `observeResize` from `@curran/responsive-axes`, which updates the SVG dimensions and scales automatically. The code uses D3 v7 selections and `scaleLinear` for positioning, with reusable axis components handling labels and offsets.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

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

Fork of Responsive Scatter Plot - Simple

This responsive scatter plot visualizes the relationship between country population and urban population using world data from 2023. Each circle represents a country, with its color determined by the first letter of the country name via the `d3.scaleOrdinal` color scale. The visualization uses `d3.csv` to load data and `d3.scaleLinear` for axis scaling. Hovering over a data point triggers a tooltip displaying the country name, implemented through `d3.select` and event handlers for mouseover, mousemove, and mouseout.

Ggmemail3@gmail.com
81% 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
81% 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…

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

Fork of Interactive Scatter Plot

This interactive scatter plot explores relationships between variables like GDP, CPI, and birth rate across countries, with each point representing a country and colored by continent. Users can switch the x- and y-axis variables via dropdown menus and click legend entries to highlight specific continents. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and the `axes` helper from `@curran/responsive-axes`, with hover tooltips showing country names. Data comes from the World Data 2023 CSV, and the visualization updates dynamically through D3's data joins and transition methods.

Gg_beck@coloradocollege.edu
80% match
Loading thumbnail…

Fork of TemperatureReport Scatterplot

This reusable scatter plot visualizes the relationship between birth rate and life expectancy. It displays each data point as a circle, with the x-axis representing birth rate and the y-axis representing life expectancy. Data is loaded from a GitHub gist using `d3.csv`, and the plot is constructed with the D3.js v7 library. The visualization uses SVG rendering, with axes generated by `d3.axisBottom` and `d3.axisLeft`, while circles are appended using the standard `selectAll` and `data` methods.

HHOURPRIMERA@GMAIL.COM
79% match