Scientific Data Visualisation Bonus ICE- 3D Scatter Plot

100%

Scientific Data Visualisation Bonus ICE- 3D Scatter Plot

✓ Published0🌍 Public

Last edited Jul 7, 2022

Created on Jul 7, 2022

This example visualizes visitor counts across three museums—Avila Adobe, Firehouse, and Chinese American—as a 3D scatter plot. Each point represents a data row, with the marker’s position determined by the three numeric attributes. The visualization uses Plotly’s `scatter3d` trace type, rendered via `Plotly.newPlot` into a designated div. Data is loaded from a CSV file using `d3.csv`, with the `unpack` helper extracting each column into arrays for the x, y, and z coordinates. Axes are labeled with distinct colors and customized margins are applied.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes museum visitor data across four exhibits, cycling which museum is plotted on the x-axis every three seconds. Each dot represents a year (2014–2016) colored pink, green, or black, with its position determined by attendance at different Los Angeles museums. The visualization uses a reusable D3 scatterPlot module built with scaleLinear scales, axisBottom, and axisLeft to render axes and circles. Data is loaded via d3.csv from a GitHub-hosted CSV file, with setInterval triggering redraws that swap the x-axis column among AmericaTropical, Firehouse, ChineseAmerican, and AvilaAdobe.

SSravyaAnnadi

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

Animated scatter plot of Los Angeles museum attendance data, cycling through four different x-axis variables (Avila Adobe, Firehouse, Chinese American, and America Tropical) while mapping years to colored points. The visualization uses D3 v6 with a reusable `scatterPlot` module, SVG rendering, and `setInterval` to progressively swap the x-axis values. It includes a custom legend with year labels, axis labels, and a title, drawing from CSV data loaded via `d3.csv`.

SSravyaAnnadi

80% match

Loading thumbnail…

3d Scatter Plot Bonus ICE 11551417

This example shows a 3D scatter plot of insurance data, overlaying two traces: one maps age and sex against BMI, while the other maps the same age and sex axes against charges. The visualization uses Plotly’s `scatter3d` type, with markers rendered via the `Plotly.newPlot` API. Data is loaded asynchronously from a remote CSV using `d3.csv`, and the `unpack` function extracts columns for each trace. The layout collapses all margins, producing a frameless plot.

SSrujana390

79% match

Loading thumbnail…

Reusable scatter plot_ICE7

This reusable D3 scatter plot visualizes tourist visit data across three years (2019–2021) for various places, showing the relationship between 2021 and 2019 visitor numbers. The chart animates every two seconds, cycling the x-axis through each year's data while the y-axis remains fixed on 2019. Built with D3 v6, it uses `scaleLinear`, `extent`, and axis functions (`axisLeft`, `axisBottom`) within a custom `scatterPlot` function. SVG circles represent data points, with margins and radius configurable. Data loads from a CSV file parsed by `csv`, and the animation uses `setInterval` to update the x-value accessor and re-render.

Ssridhardubala106@gmail.com

79% match

Loading thumbnail…

3D Scatter plot using D3.js

This example shows a 3D scatter plot of two separate datasets from an ICE Bonus CSV file, rendered on a single Plotly chart. One trace maps ItemType, TotalRevenue, and Country while the other maps OrderDate, SalesChannel, and TotalProfit, with colored circular markers in 3D space. The code uses D3.js to load and parse the CSV via `d3.csv`, then passes the data through custom `unpack` functions to extract columns. Plotly’s `scatter3d` trace type and `Plotly.newPlot` render the interactive visualization in the `myDiv` element on an HTML page.

Ggayathrikavya

79% match

Loading thumbnail…

Bonus ICE Scatter plot using D3.js

This example displays agricultural data from India as a 3D scatter plot, with each trace mapping different variables—crop, production, and district on the first trace, and crop year, season, and area on the second. It uses the Plotly.js library to render the `scatter3d` markers, loading CSV data through D3.js v3’s `d3.csv` method. The code defines two marker traces with distinct colors and opacity, then plots them in a single `myDiv` container with zero margins for a clean view.

Aav.dj.2000@gmail.com

78% match

Loading thumbnail…

3D Bar Plot

This example displays two sets of three-dimensional scatter points from a CSV file, using colored markers to distinguish between datasets. The visualization leverages the Plotly JavaScript library through the `Plotly.newPlot` function to render an interactive 3D scene. The data is loaded remotely via `d3.csv`, and the visualization employs a scatter3d trace type with configurable marker size, opacity, and line properties. The scene is presented with zero margins to maximize the plotting area, and the renderable is provided through an SVG or web-based rendering approach.

Ssaijahnaviappineni

78% match

Loading thumbnail…

Bonus ICE Scatter plot using D3.js

This example shows a 3D scatter plot of agricultural data, plotting two distinct traces that map crop production and area against district names and seasons. The visualization uses Plotly’s `scatter3d` type within a single `Plotly.newPlot` call, while D3.js loads the CSV dataset via `d3.csv`. The first trace uses crop, production, and district as x, y, and z coordinates, while the second uses crop year, season, and area, with markers styled by opacity, size, and color.

SShishiraRudrabhatla

78% match