Skip to main content
SimilarExport ZIP
100%

bonus ice

✓ Published1🌍 Public
PPujitha14challagulla
Last edited Jul 5, 2022
Created on Jul 5, 2022
Forked from HTML Starter

This example shows a 3D scatter plot of the abbreviatus dataset, comparing calyx length, calyx width, and two corolla measurements. It uses Plotly’s `scatter3d` and `scatter2d` trace types to render points as markers with varying colors and opacity, loaded via `d3.csv` from a GitHub gist. The visualization is embedded in a React app using the Plotly.js CDN, with margins set to zero for a minimal layout.

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 bonus ice

This example presents a 3D scatter plot of the abbreviatus dataset, using Plotly’s `Plotly.newPlot` to render flower measurements. Two traces show different variable combinations: the first plots calyx length, calyx width, and corolla length in `scatter3d` style, while the second overlays calyx length, calyx width, and corolla width as `scatter3d` markers. Data is loaded via `d3.csv` from a GitHub gist, with marker styles customized through Plotly’s `marker` options for size, opacity, and color. The layout uses zero margins to focus on the plotted points.

PPujitha14challagulla
90% match
Loading thumbnail…

3D Scatter Plot - Bonus - ICE

This 3D scatter plot visualizes a berry lily dataset, displaying relationships between measurements like calyx length, width, and curlicue dimensions. The visualization uses Plotly.js to render two traces: one appears as a 2D scatter with the calyx length and width, while the other is a 3D scatter incorporating curlicue width. Markers are styled with distinct purple colors, sizes, and opacity. Data is loaded asynchronously using D3.js's `d3.csv` function from a remote GitHub gist containing the mobile dataset.

HHema1430
83% match
Loading thumbnail…

Fork of bonus ice

This visualization presents a 3D scatter plot of flower measurements, displaying both corolla length and corolla width against calyx dimensions in a single interactive view. The code uses the Plotly JavaScript library (plotly-2.9.0) with its `Plotly.newPlot` API to render two scatter traces: one 2D trace showing calyx length versus calyx width, and one 3D trace plotting calyx length, calyx width, and corolla width. Data is loaded from a CSV file hosted on GitHub using d3.csv, with the marker styling differentiating the two traces.

VVineela Reddy
83% match
Loading thumbnail…

Fork of Fork of bonus ice

This 3D scatter plot visualizes the Iris flower dataset, mapping calyx length and width against corolla length and width as separate traces. The visualization uses Plotly.js to render interactive 3D markers with adjustable opacity and size, with data loaded asynchronously via D3.js (v3) CSV parsing from a GitHub-hosted dataset. Two traces distinguish the different corolla measurements, while the layout removes all margins for a full-viewport presentation. The code utilizes Plotly.newPlot to render the chart inside a designated div, combining D3's data-handling capabilities with Plotly's 3D rendering engine.

Aajaysonu
79% match
Loading thumbnail…

ice

This example displays a 3D scatter plot of iris flower measurements, with points colored pink and green representing different dimensions of calyx and corolla features. The visualization uses the Plotly JavaScript library to render the chart, while D3.js handles loading the dataset from a remote CSV file via the `d3.csv` function. The code overlays two scatter traces, one configured as `scatter2d` and another as `scatter3d`, within a single plot area, though only the 3D trace is visible in the rendering.

VVineela Reddy
79% match
Loading thumbnail…

Fork of Fork of 3D Scatter Plot-BICE

This example shows a 3D scatter plot of the Berrylily dataset, plotting measurements of calyx length, calyx width, curlicue length, and curlicue width as markers. It uses two traces: one scatter2d trace for curlicue length and one scatter3d trace for curlicue width, styled with distinct marker colors and opacity. The code loads the data from a GitHub-hosted CSV file using d3.csv, then builds the plot with Plotly’s `newPlot` API. The visualization compares the two complementary dimensions across the flower measurements in a single interactive chart.

HHema1430
79% match
Loading thumbnail…

3D Scatter Plot(Revanth)

This 3D scatter plot visualizes the berrylily dataset, showing relationships between calyx length, calyx width, and both curlicue length and width. The visualization uses Plotly.js to render three-dimensional markers, with D3.js loading the CSV data from a GitHub gist. Two separate traces display different z-axis measurements, distinguished by marker colors and opacity, with all interactive rotation and zooming handled by Plotly's built-in 3D scene controls.

RRevanthGrreddy
79% match
Loading thumbnail…

Bonus ICE (3D Scatter Plot)

This example presents a 3D scatter plot of the classic Iris dataset, visualizing relationships between petal length, sepal length, and petal width. It uses Plotly’s `scatter3d` trace type to render the points with semi-transparent markers. The page loads Plotly 2.9.0 and D3 3.5.17 via CDN, and uses D3’s `csv` loader to fetch and parse the data from a gist, then passes the unpacked columns into the plot. The layout has zero margins for the chart.

AAashish Pandey
78% match