Skip to main content
SimilarExport ZIP
100%

Fork of Anv_ICE-6 Scatter plot

✓ Published0🌍 Public
TTekmal-Bhavana
Last edited Mar 23, 2023
Created on Mar 23, 2023

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.

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 Reusable D3 Scatter Plot

This scatter plot shows the relationship between an individual's sleep duration in hours and their age in years, with each data point represented as a steelblue circle. The visualization is built using D3 v6, where the code fetches a text dataset from a GitHub gist, parses the CSV-formatted data, and scales the values linearly for both axes. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with explicit margins defining the plotting area, and the plot is rendered as an SVG element within the HTML page.

Bbhargavinalamothu@gmail.com
85% 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
85% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between age and sleep duration, showing sleep duration on the x-axis and age on the y-axis. It uses d3.csv to load data from a remote GitHub gist, d3.scaleLinear for x and y scales, and d3.axisLeft and d3.axisBottom to render axes. The visualization is built with d3 v6, rendering circles to an SVG, with the chart size that adapts to the window dimensions.

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

Fork of Fork of BONUS ICE 1: 3D Scatter Plot

This example visualizes the relationship between age, sleep duration, and sleep efficiency as a 3D scatter plot. Each point represents an individual, with yellow markers outlined in black, positioned along three axes that display the variables. The code loads CSV data from a GitHub gist using D3’s `d3.csv` function, then constructs the trace with Plotly’s `scatter3d` type and renders it via the `Plotly.newPlot` API. Axis titles and marker styling are configured through the layout and trace objects.

DDineshK2602
84% match
Loading thumbnail…

Fork of scatterplot

This scatterplot visualizes the relationship between sleep duration and age, plotting each data point as a blue circle. It uses d3.csv to load a remote dataset, then applies d3.scaleLinear to map the data to pixel coordinates on an SVG canvas. Axes are generated with d3.axisBottom and d3.axisLeft, and labels for the x-axis, y-axis, and title are added using SVG text elements. The chart fills the entire browser window, with margins defined for the axes and labels.

Kkshravyak.2001@gmail.com
83% 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
83% match
Loading thumbnail…

ICE 7 REUSABLE SCATTER PLOT

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).

Bbhargavinalamothu@gmail.com
83% match