Skip to main content
SimilarExport ZIP
100%

Fork of TemperatureReport Scatterplot

✓ Published0🌍 Public
HHOURPRIMERA@GMAIL.COM
Last edited Apr 30, 2024
Created on Apr 30, 2024

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.

AI-generated description

CSCE 5320.002 Scientific Data Visualization (ICE-7)

Part-1 REUSABLE SCATTER PLOT

  • TejaSri KOtipalli (11659488)
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Responsive Scatter Plot

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.

KKiernan Nesslar
79% 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
78% 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
78% 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
78% 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
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
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot uses D3.js to visualize global population data, cycling through life expectancy, GDP per capita, population, and year on the x-axis every two seconds. The plot leverages `scaleLinear` for axes, animated circles with `attr`, and dynamic re-rendering via the `scatterPlot` component, which updates scales and axes through `svg.call()` as the x-value changes.

Ppavan vasamsetti
77% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between BMI and life expectancy across countries in 2021, with each circle representing a country. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the scales. Interactive hover effects trigger a tooltip that shows the country name, BMI, and life expectancy values. The chart is rendered as an SVG with animated transitions on circle hover, changing the fill color from steelblue to orange.

Ssravya7136@gmail.com
77% match