Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
NNaveed945
Last edited Jul 7, 2022
Created on Jul 6, 2022
Forked from Hello VizHub

This example displays a 3D scatter plot of a grocery store dataset, with cost price, profit, and selling price mapped to the X, Y, and Z axes. It loads Plotly.js from a CDN to render the interactive `scatter3d` chart, while D3.js is used to fetch and parse the CSV data from a GitHub gist. Each point is styled with a fixed size, opacity, and subtle line color, and the plot layout customizes axis titles with blue fonts. The code demonstrates combining external libraries for data loading and visualization in a single page.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A 3D scatter plot displays the relationship between product cost price and selling price using purple circles. The visualization uses D3.js v4 with an SVG rendering approach, mapping cost price to the x-axis and selling price to the y-axis through linear scales. Data is loaded via `d3.csv` from a GitHub-hosted dataset. The chart employs `d3.axisBottom` and `d3.axisLeft` for axes, while circles are appended with `attr` for positioning and styling, though the title's "3D" aspect is not implemented in the code.

VVineela Reddy
82% match
Loading thumbnail…

Untitled

The visualization plots three dimensions of retail data as a 3D scatter plot, showing the relationship between average total sales, average price per unit, and average operating profit for various U.S. states. Data is loaded from a local CSV file using `d3.csv`, then trace1 is constructed with marker styling and rendered via Plotly’s `Plotly.newPlot`. The layout configures axis titles for each dimension within a scene, while margins are disabled. The example uses Plotly 2.20.0 and D3 3.5.17 libraries.

RRamya19-hub
81% match
Loading thumbnail…

Untitled

This example shows a 3D scatter plot comparing two datasets, each displayed as a set of markers with distinct visual styling. It loads the `3d-scatter.csv` file from the Plotly datasets repository via D3’s CSV parser, then unpacks the x, y, and z coordinates for each trace using the `unpack` function. The visualization renders two `scatter3d` traces filled with circles of a fixed size, varied opacity, and either a light outline or solid gray color. The layout eliminates all margins, and the chart is drawn in the `myDiv` element using Plotly’s `newPlot` API.

LLG0498
81% match
Loading thumbnail…

Untitled

This example renders a 3D scatter plot from a CSV dataset using Plotly.js within a D3 v6-loaded HTML page. It visualizes two series of coordinates—x1/y1/z1 and x2/y2/z2—as distinct marker groups with differing colors and opacity. The code loads data via D3’s `d3.csv` and transforms rows using a custom `unpack` function to extract columns for the Plotly traces, which are configured as `scatter3d` markers. The layout margins are set to zero to maximize the plot area.

Ssalimjivani
80% match
Loading thumbnail…

Untitled

This example displays a 3D scatter plot with two sets of markers, each representing a distinct series of data points. It uses Plotly.js to render the visualization, with a D3 CSV loader fetching the dataset from a GitHub Gist. The code defines two traces—one with default styling and another with gray markers—and plots them across x, y, and z coordinates. The layout removes all margins, and the chart is embedded in a designated div element.

SSaahithi49
80% match
Loading thumbnail…

Fork of Untitled

This example shows a 2D scatter plot of product cost versus selling price, with each product represented as a small purple circle. The x-axis encodes cost price and the y-axis encodes selling price, both using linear scales. The code loads CSV data from a GitHub gist via `d3.csv` and renders the plot as SVG circles using `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for axes. Despite the title mentioning "3D," the visualization is strictly two-dimensional, with axis labels added via HTML divs.

VVineela Reddy
79% match
Loading thumbnail…

Untitled

This example displays a 3D scatter plot of car sales data, with month, number sold, and price plotted along the three axes. It renders two distinct marker traces, one with a default style and another with a grey color and circular symbols, allowing for comparison. The visualization is built using Plotly’s `newPlot` API, which draws the chart into a designated `div` within an HTML page. The data is loaded asynchronously via `d3.csv` from a remote CSV file, and rows are transformed into arrays using a custom `unpack` helper function.

GGogineni44
79% match
Loading thumbnail…

Untitled

This example displays two sets of three-dimensional scatter points from the Plotly `3d-scatter.csv` dataset. It shows the distribution of data points in x, y, and z coordinates, comparing two distinct groups differentiated by marker style—one with translucent, bordered circles and another with solid gray circles. The code uses the Plotly JavaScript library, called via `Plotly.newPlot`, along with `d3.csv` to fetch and parse the data. The `unpack` function extracts each coordinate column for the traces. A zero-margin layout removes all surrounding space.

LLG0498
79% match