Skip to main content
SimilarExport ZIP
100%

ICE 7 REUSABLE SCATTER PLOT

✓ Published0🌍 Public
Bbhargavinalamothu@gmail.com
Last edited Apr 1, 2025
Created on Apr 1, 2025

This interactive scatter plot visualizes the relationship between sleep duration and age, with each circle representing an individual data point sourced from a CSV file. Built using D3.js v6, the chart renders as an SVG and employs reusable chart patterns through a custom `scatterPlot` function with getter-setter methods. The visualization uses `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and includes labeled axes for sleep duration (x-axis) and age (y-axis).

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 REUSABLE SCATTER PLOT

This scatter plot visualizes the relationship between sleep hours and age for a small sample of individuals. It uses D3.js (v6) with SVG rendering, demonstrating a reusable function that accepts a selector and dataset to generate the chart. The code creates linear scales for both axes, adds labeled axes with tick marks, and renders red circles with white strokes as data points.

Bbhargavinalamothu@gmail.com
95% match
Loading thumbnail…

ICE 6 Scatter Plot Manasa V Jadda

This scatter plot visualizes sleep efficiency against age, with each circle colored by deep sleep stage and sized to reflect sleep duration and REM sleep percentage. It uses D3 v6’s `csv` loader to parse the sleep-efficiency dataset, `scaleLinear` for both axes, and `axisLeft`/`axisBottom` for tick marks. The SVG is rendered full-window with static circle markers, colored via a hardcoded switch on species-like values, and manually rotated axis labels styled with inline fonts.

MManasa891-git
86% match
Loading thumbnail…

ICE 7 LINE CHART

This line chart visualizes the relationship between age and sleep hours using five data points. The SVG rendering relies on d3.line to generate the path, with d3.scaleLinear mapping the age and sleep domains to pixel coordinates. Axes are added via d3.axisBottom and d3.axisLeft. The chart applies a steelblue stroke to the line and includes margins for layout.

Bbhargavinalamothu@gmail.com
84% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between sleep duration and age, with each point representing an individual’s reported hours of sleep plotted against their age. The visualization uses a reusable `scatterPlot` function built with D3 v6, which configures linear scales for both axes, draws circles with a fixed radius, and appends axis labels. Data is loaded asynchronously via `d3.csv` from a remote gist URL, with numeric parsing applied to the `Sleep Duration` and `Age` fields. The SVG fills the entire browser window, and the chart is rendered using standard D3 selections and joins.

Bbhargavinalamothu@gmail.com
83% match
Loading thumbnail…

Fork of Anv_ICE-6 Scatter plot

This scatter plot visualizes the relationship between age groups and their average deep sleep percentage, with each data point representing an individual. The visualization uses D3.js v7 within a React framework, rendering as an SVG. The code employs `d3.csv` to load the dataset, `d3.scaleLinear` for both axes, `d3.extent` to determine domains, and `d3.axisBottom` and `d3.axisLeft` for axes. A legend is added using color ticks. The data comes from a GitHub gist, and the page uses a light blue background with Arial font.

TTekmal-Bhavana
83% match
Loading thumbnail…

AREA CHAT for the ICE7

This area chart, built with D3 v6, visualizes the relationship between sleep hours and age for a small dataset of five individuals. The graphic displays sleep hours on the x-axis and age on the y-axis, using a filled gray area rendered as an SVG path with opacity. The chart employs `d3.scaleLinear` for both axes, `d3.area` with `d3.curveMonotoneX` for the smoothed area, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. The data is hardcoded within the script, and the visualization is rendered directly into the SVG element.

Bbhargavinalamothu@gmail.com
83% match
Loading thumbnail…

scatterplot

This scatter plot visualizes the relationship between sleep duration in hours and age in years, with each blue circle representing an individual data point. The chart plots sleep duration along the x-axis and age along the y-axis using d3.scaleLinear for both scales, rendering circles as SVG elements through d3.selectAll and data binding. Axes are generated with d3.axisBottom and d3.axisLeft, while data is loaded asynchronously from a CSV file via d3.csv from a GitHub gist.

VVignesh Nallamothu
82% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between sleep duration and age, with age on the y-axis and sleep duration on the x-axis, using data from a CSV file fetched from a GitHub gist. The visualization is built with D3 v6, rendering circles as SVG elements within a full-window canvas. The code implements a reusable scatter plot function with configurable width, height, margins, and radius, and uses D3's scaleLinear for axis scaling and axisLeft/axisBottom for the axes. Axis labels are added as text elements via SVG.

Bbhargavinalamothu@gmail.com
82% match