Skip to main content
SimilarExport ZIP
100%

BONUS ICE: 3D Scatter Plot

✓ Published0🌍 Public
Jjayavamsi
Last edited Apr 6, 2023
Created on Apr 6, 2023
Forked from D3 Starter

This 3D scatter plot visualizes Netflix subscription prices, mapping Year, Standard plan cost, and Premium plan cost across three axes. The data, loaded from a CSV via `d3.csv`, is rendered as purple circular markers using Plotly’s `scatter3d` trace type. Axes are labeled and styled with blue title fonts, and the chart is drawn into a div via `Plotly.newPlot`. The code uses both Plotly 2.9.0 and D3 3.5.17 libraries, with markers sized and outlined to enhance readability.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bonus ICE 3D Bar Chart

This example presents Netflix subscription prices for Basic, Standard, and Premium plans from 2016 to 2022 as an interactive 3D bar chart. The visualization uses the `d3.x3d.chart.barChartMultiSeries()` component from the d3-x3d library to render three grouped bars per year, with data loaded from a CSV file via `d3.csv`. The scene is displayed in an X3DOM container, combining D3.js for data parsing and the d3-3d extension for three-dimensional layout, allowing viewers to rotate and explore the price trends across plan tiers.

Jjayavamsi
85% match
Loading thumbnail…

Bonus ICE 3D Bar Chart

This example shows Netflix subscription price changes from 2016 to 2022 across three tiers—Basic, Standard, and Premium—as a 3D bar chart. The visualization uses the `d3.x3d.chart.barChartMultiSeries()` component to render the multi-series data, with D3 v5 loading the CSV and parsing rows. The chart is displayed within an X3DOM scene, and the bars are sized based on the numeric values from the dataset. Data is fetched from a GitHub Gist containing yearly costs for each plan.

Jjayavamsi
84% match
Loading thumbnail…

BONUS ICE - 1: 3D Scatter Plot

This example visualizes property price based on nearby stores and property age using a 3D scatter plot. The code loads CSV data via d3.csv, then plots three variables—PropertyYears on the x-axis, UnitPrice on the y-axis, and NearbyStores on the z-axis—as orange markers with green outlines using Plotly’s scatter3d trace type. The layout defines axis titles and colors, and the chart renders inside a designated div via Plotly.newPlot. Data comes from a GitHub gist, and the visualization emphasizes relationships among the three numeric dimensions.

Vviswak12
77% match
Loading thumbnail…

BONUS ICE 3D-ScatterPlot (Dhanusree Kodali)

This 3D scatter plot visualizes insurance charges as a function of age and BMI, with each point colored by the insured person’s region (southeast, southwest, northwest, northeast) using a custom four-color scale. The visualization uses Plotly.js’s `scatter3d` trace type to render markers within an interactive 3D scene. The code loads a CSV of insurance data via `d3.csv` and maps the `region` field to numeric color values, which are then passed to the `marker` object along with a `pl_colorscale`. Each axis is given a distinct pastel background color, while the chart itself is embedded in a simple HTML page with a pink background and styled title.

DDhanusree Kodali
76% match
Loading thumbnail…

BONUS ICE - 1: 3D Scatter Plot

This 3D scatter plot visualizes real estate prices as a function of house age and the number of nearby convenience stores. The Plotly `scatter3d` trace renders each property as a pink marker, with axes labeled for the three variables, all positioned within a minimal margin layout. The visualization loads CSV data from a GitHub Gist via D3's `d3.csv` parsing, then arrays of values are extracted and fed into the `Plotly.newPlot` API to generate the interactive chart.

RRajeevMukhesh
75% match
Loading thumbnail…

Bonus ICE

This interactive 3D scatter plot, built with Plotly and D3.js, visualizes electronic sales data from a CSV file hosted on GitHub. Two distinct traces display relationships between item and unit price, using green and yellow markers to differentiate the encoded dimensions. The code initializes the plot by loading data with `d3.csv`, then constructs scatter3d traces with specific marker styling and opacity, ultimately rendering the visualization into a designated HTML div.

SSaiSree0122
75% match
Loading thumbnail…

3d Scatter plot Bonus ICE

This 3D scatter plot visualizes video game sales data from a CSV file, plotting year, global sales, and publisher for one trace, and year, other sales, and publisher for a second trace. Built with Plotly’s `scatter3d` trace type and `Plotly.newPlot`, the visualization uses D3.js’s `d3.csv` to load the data and the `unpack` function to extract columns. Markers are styled with size, opacity, and line properties, rendered in an interactive 3D space within a single div.

MManohar Kowthavarapu
75% match
Loading thumbnail…

Bonus ICE - 3D Scatter plot - Manasa

This 3D scatter plot displays movie collections across countries, with each point representing a movie’s global, Indian, and United States earnings plotted against the year of release. The visualization uses Plotly’s `Plotly.newPlot` to render three scatter3d traces, colored green, red, and orange, respectively, while loading data via `d3.csv` from a GitHub-hosted CSV file. The layout defines axes for collection, movie, and year, with no additional margins.

MManasa891-git
74% match