Scatter Plot using D3.JS

100%

Scatter Plot using D3.JS

✓ Published0🌍 Public

Last edited Apr 6, 2023

Created on Apr 6, 2023

This example visualizes a 3D scatter plot of city-level economic indices, comparing cost of living, rent, local purchasing power, groceries, and restaurant prices across different cities. Two distinct traces plot each city as a marker, with hover text identifying the city name. The code uses the Plotly JavaScript API, specifically `Plotly.newPlot`, to render the chart, while D3.js (version 3.5.17) is used to load CSV data from a GitHub gist via `d3.csv`. The visualization demonstrates integrating D3 for data fetching with Plotly for 3D rendering.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot using D3.JS

This 3D scatter plot compares urban economic indicators across cities using two Plotly trace types drawn within a D3.js-loaded page. The first trace plots Cost of Living Index, Rent Index, and Local Purchasing Power Index, while the second maps Groceries Index, Cost of Living Plus Rent Index, and Restaurant Price Index. Both traces use `scatter3d` markers with hover text for city names. The code loads CSV data via `d3.csv`, unpacks columns with a helper function, and renders the visualization through `Plotly.newPlot`.

EElvis Araka

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

81% match

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes data from an ice company dataset, comparing new and used product values against company names and cities. Built with Plotly.js and D3.js, the visualization renders two separate 3D marker traces—one plotting New versus Used values by company, another plotting New versus Total Sales New by city. The code loads data from a GitHub gist CSV file using D3’s csv function, then constructs interactive 3D scatter plots with configurable marker sizes, opacity, and colors within a minimal-margin layout.

Hhm0421

80% match

Loading thumbnail…

3D Scatter plot using D3.js

This example presents an interactive 3D scatter plot built with Plotly.js and D3.js, visualizing agricultural crop data. It renders two marker traces from a CSV file: one mapping crop type, production, and district, the other correlating crop year, season, and area. The code uses `d3.csv` to load the dataset and `Plotly.newPlot` to draw the scatter3d traces within a DIV element. The visualization employs 3D markers with custom opacity and line styling to distinguish the two datasets, with the layout margins set to zero.

Ggayathrikavya

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

78% match

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes two distinct data series from a CSV file fetched via D3’s `d3.csv` function. Each series is rendered as a set of markers in three-dimensional space, using the Plotly.js `scatter3d` trace type, with the first trace appearing as the default marker style and the second using a green color and custom marker properties. The plot is displayed in a `myDiv` container using `Plotly.newPlot`, with margins set to zero. The data is sourced from a GitHub Gist, and the visualization relies on both D3 version 3.5.17 and Plotly 2.9.0.

Vvenkatajayanth03

77% match

Loading thumbnail…

Fork of 3D Scatter Plot

This 3D scatter plot visualizes economic indicators by mapping their x, y, and z values onto points rendered as colored sprites. It uses Three.js alongside D3’s scaling and color scheme functions to position and tint each data point. The scene rotates slowly via D3’s zoom behavior with panning, and the code loads data from a CSV file. The visualization runs on Canvas with WebGL, rendering animated, interactive 3D points.

Sshubhamsingh173

77% match

Loading thumbnail…

Scatter plot

This scatter plot displays city areas in square meters along the x-axis with city names on the y-axis, using a linear scale for area and a point scale for cities. The visualization renders purple circles with hover effects, and includes axis tick lines and labels for readability. The code uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a CSV file, with the chart drawn as an SVG.

Vvladvaculin

77% match