ice

100%

✓ Published1🌍 Public

Last edited Apr 6, 2023

Created on Apr 6, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ice

This animated scatter plot cycles through different visualizations of the Iris dataset, shifting the x-axis to display different flower measurements every two seconds. The reusable chart component, built with d3.scaleLinear, d3.axisLeft, and d3.axisBottom, renders colored circles representing three species. The animation uses setInterval to call scatterPlot with new parameters, while font styling comes from the Share Tech typeface. Data is loaded from a GitHub-hosted CSV.

Ppreethamkesa

86% match

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

86% 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

85% match

Loading thumbnail…

ICE 7- Iris Data

This scatter plot visualizes the Iris dataset, showing petal length and width for three species of iris flowers, each colored distinctly. The visualization uses D3 v6 within a plain HTML page, employing `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and SVG circles for data points. Data is loaded asynchronously from a CSV via `d3.csv` and parsed into numeric values. The plot encodes species identity through color, with a simple switch statement mapping each species to a specific hue.

YYbg99

84% match

Loading thumbnail…

ICE 6

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes, with each point colored by species. It uses D3 v6 to load CSV data, apply linear scales, and render SVG circles with axes and labels. The code demonstrates `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and the `join` method for binding data to SVG elements. The chart includes custom tick styling and a simplified color scheme for the three iris species.

AAmar09nath

84% 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

84% match

Loading thumbnail…

ICE 7 - Reusable D3 ScatterPlot.

This example presents an animated scatterplot of the Iris dataset, cycling through different petal and sepal measurements on the x-axis while the y-axis remains fixed on sepal length. The visualization uses D3 v6 within a React framework, rendering SVG circles whose colors correspond to iris species. A reusable `scatterPlot` function, built with `scaleLinear`, `axisLeft`, and `axisBottom`, handles the axes and marks, while `setInterval` triggers periodic updates to the x-axis mapping. The code also includes custom legend labels and axis titles generated dynamically.

NNaveen Kumar

84% match

Loading thumbnail…

Bonus ICE scatter plot

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.

DDan Waters

84% match