Untitled

100%

✓ Published0🌍 Public

Last edited Apr 4, 2023

Created on Apr 4, 2023

Forked from Untitled

A 3D scatter plot displays menu items across four categories—Main Course, Beverages, Desserts, and Appetizers—with each category as a separate trace. The x-axis shows orders count, y-axis shows total sales, and z-axis shows stock availability, using data loaded from a CSV file via `d3.csv`. The code uses Plotly’s `Plotly.newPlot` to render the chart, with markers sized and colored per category. The `unpack` function filters rows by `Menu_Category` to extract the corresponding values for each axis.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A 3D scatter plot visualizes five product categories—Garment, Electronics, Decoration, Fitness, and Footwear—using three axes: Number of Orders, Sales, and Available in Stock. Each category appears as a distinct colored marker, encoding the relationship between order volume, revenue, and inventory across the dataset. The code loads a CSV via d3.csv, filters rows by category using a custom unpack function, and constructs five Plotly trace objects of type scatter3d. These traces are passed to Plotly.newPlot, which renders the interactive chart inside the designated div with a minimal margin layout.

Llibramanju

85% match

Loading thumbnail…

ICE7 Reusable Scatter

This interactive scatter plot uses D3 v6 to visualize restaurant menu data, showing Total Sales against Orders Count with points colored by Menu Category. The visualization animates the X-axis, periodically toggling between Orders Count and Stock Availability using setInterval. Built with React-compatible reusable chart components, the example imports scatterPlot.js and the d3 csv, scaleLinear, axisLeft, and axisBottom APIs. SVG circles render with custom colors for Main Course, Beverages, Desserts, and Appetizers, alongside a manually constructed legend and axis labels.

MMahendraGullinkala

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

76% match

Loading thumbnail…

Untitled

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.

NNaveed945

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

76% match

Loading thumbnail…

Untitled

This example shows sales data for supermarket orders, broken down by city, with stacked bars representing categories like Furniture, Office Supplies, and Technology. A dropdown menu filters the display by customer segment, and a checkbox toggles between sorting bars by total sales or by city order. Built with React and D3 v5, it uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the SVG chart, with `transition` methods animating updates when filters change. The data comes from a CSV file containing individual order records.

Hhyejinid

76% match

Loading thumbnail…

Untitled

Eight data-driven cubes float in a 3D scatter plot, each colored by category and labeled with a product name. Users drag to rotate the scene. The visualization uses d3-3d to project cube faces, with d3.drag handling interaction and d3.transition animating label value changes from a hard-coded sales dataset.

MMahendraGullinkala

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

75% match