Skip to main content
SimilarExport ZIP
100%

Bonus ICE scatter plot

✓ Published0🌍 Public
DDan Waters
Last edited Mar 12, 2022
Created on Mar 12, 2022
Forked from HTML Starter

This visualization displays the classic Iris dataset as an interactive 3D scatter plot, plotting sepal length, sepal width, and petal length along the three axes. Points are rendered as markers with semi-transparency and subtle grey outlines to help reveal overlapping clusters. The chart is built using Plotly’s JavaScript API via `Plotly.newPlot`, called from within a D3.js callback that loads the CSV data using `d3.csv`. The layout margins are set to zero, maximizing the plot area within the 800×800 pixel container.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bonus ICE - 3D Scatter Plot

This 3D scatter plot visualizes the classic Iris dataset, displaying sepal and petal dimensions in a three-dimensional space. The project uses Plotly.js (version 2.9.0) to render an interactive scatter3d chart within an HTML page, while D3.js (version 3.5.17) is used to fetch and parse the remote CSV data via the `d3.csv` method. Colors encode the three Iris species, mapped through a custom colorscale. The code also configures axis titles, background colors, and explicit margins to create a clean presentation of the data.

NNaveen Kumar
93% 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
92% match
Loading thumbnail…

ICE-6 Iris Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal length as a scatter plot of circles. The code uses D3 v7 to load the CSV data, parse numeric fields, and create linear scales for the axes. SVG is used for rendering, with axes and labels generated via `axisLeft` and `axisBottom`. The viewport dimensions determine the chart size, and margin-based spacing positions the axis labels and plot area, creating a clean, full-screen scatter plot.

DDan Waters
90% match
Loading thumbnail…

Bonus ICE (3D Scatter Plot)

This 3D scatter plot visualizes the Iris dataset, mapping petal length, sepal length, and petal width onto the x, y, and z axes. Each flower sample appears as a single marker with semi-transparent points and subtle gray outlines. The visualization uses Plotly’s `scatter3d` trace type, loaded via the Plotly.js library, while D3.js fetches the CSV data from a GitHub gist. Margins are set to zero for a clean, full-canvas presentation, with no axes or labels configured.

AAnjan Shrestha
90% match
Loading thumbnail…

ICE-BONUS_SCATTERPLOT_IRIS

This interactive 3D scatterplot visualizes the classic Iris dataset, encoding sepal length, petal length, and sepal width along three axes. Each point is colored by species, with a wireframe grid providing spatial reference. The visualization supports drag-based rotation to explore the data from any angle. Built with D3.js v4 and the d3-3d plugin, it projects 3D coordinates to SVG paths and circles, leveraging a drag behavior to update rotations and animate transitions. The Iris data is imported from an external CSV file.

PPY09052021
89% match
Loading thumbnail…

ScatterPlot_ICE6

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species (setosa, versicolor, or virginica). The axes are labeled with sepal length and petal length, though the data encoding uses petal dimensions for positioning and sepal dimensions as circle radii. Built with React and d3.v6, the example loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for scales, and renders SVG circles with attributes driven by the parsed numeric fields. Axis generation uses `axisLeft` and `axisBottom`.

Bbindusreeja
88% match
Loading thumbnail…

Iris 3D Scatter Plot

This example visualizes the Iris dataset as an interactive 3D scatter plot using Plotly's `scatter3d` trace. It plots sepal length, sepal width, and petal length on the three axes, with each flower represented by a single marker point. The visualization loads data from a local CSV file using D3’s `csv` function and renders the plot inside a dedicated `div` element. The code defines a single trace with fixed marker styling, including size, color, and opacity, and applies minimal plot margins through the layout object.

PPlatoch
87% match
Loading thumbnail…

ICE_7_Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements while coloring each point by species. The chart cycles through four different x-axis variables on a timer, updating the axes and labels dynamically with animated transitions. Built with D3 v6, it uses SVG rendering with custom scales, axes, and legend elements. The code leverages d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.csv to load and process the data, with a reusable scatterPlot function handling the chart structure.

Nnithish-1999
87% match