Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
DDineshK2602
Last edited Apr 6, 2023
Created on Apr 5, 2023
Forked from HTML Starter

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.

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 3D Scatter Plot

This fork of a 3D scatter plot visualizes sleep metrics from a CSV dataset, plotting sleep duration, sleep efficiency, and deep sleep percentage as points in three-dimensional space using the Plotly.js library (specifically the `Plotly.newPlot` API). Two overlapping marker traces render the same data with differing color schemes, line styles, and opacities, creating a contrast between highlighted and muted points. The visualization loads its data via `d3.csv` from a remote GitHub Gist and embeds the chart in a simple HTML page with a zero-margin layout, focusing purely on the interactive 3D representation.

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

BONUS ICE

This interactive 3D scatter plot visualizes the relationships between age, deep sleep percentage, and awakenings. Each red circular marker represents a data point, with its position along the three axes corresponding to the three variables. The visualization uses the Plotly.js library to render the 3D scene and D3.js to fetch and parse the CSV data from a GitHub gist. The chart allows users to explore the dataset by rotating and zooming into the plot, with axis labels clearly indicating the variables.

Hhm0421
83% match
Loading thumbnail…

Fork of Bonus ICE - 3D Scatter plot - Manasa-1

This 3D scatter plot visualizes the relationship between sleep duration, REM sleep percentage, and deep sleep percentage, using data from a sleep-efficiency CSV file fetched from GitHub. The visualization uses Plotly.js to render the interactive `scatter3d` trace, with D3.js handling CSV parsing via `Plotly.d3.csv` and data extraction through the custom `unpack` function. Each point represents a sleep record, colored and sized uniformly, with axes labeled for all three variables.

MManasa891-git
83% match
Loading thumbnail…

Scatter Plot of Sleep Efficiency Dataset

This scatter plot visualizes the relationship between age and sleep efficiency using a dataset loaded from a GitHub-hosted CSV file. The visualization shows individual data points as red markers, with age plotted on the x-axis and sleep efficiency on the y-axis. The implementation uses Plotly.js, specifically the `Plotly.d3.csv` method to parse the remote data and `Plotly.newPlot` to render the interactive chart. The code defines a single scatter trace with marker styling and a layout that includes axis titles and a chart heading.

MManasa891-git
82% match
Loading thumbnail…

Fork of Fork of Bonus ICE Scatter plot using D3.js

This example creates a 3D scatter plot with two traces, each mapping different agricultural data columns from a CSV file. The first trace plots Crop, Production, and District_Name, while the second plots Crop_Year, Season, and Area. It uses D3.js to load the CSV data via `d3.csv` and Plotly.js to render the interactive `scatter3d` chart inside a `myDiv` element, with margins set to zero.

PPedram
80% match