Scatter Plot using D3.JS

100%

Scatter Plot using D3.JS

✓ Published1🌍 Public

Last edited Apr 5, 2023

Created on Apr 5, 2023

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`.

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 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.

Kkottenikhil

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

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

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

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

74% match

Loading thumbnail…

3D Scatter Plot with Plotly.js

Two 3D scatter plots render inside a single Plotly.js chart on a web page. The first trace plots bill length, bill depth, and flipper length from a remote CSV loaded with `d3.csv`, styling markers with semi-transparent gray lines. The second trace plots flipper length, body mass, and sex, using solid gray circles with darker borders. The `scatter3d` trace type and `Plotly.newPlot` API generate the interactive three-dimensional visualization, with margins collapsed to zero via the layout object.

VVAbhiram99

74% match

Loading thumbnail…

3D Scatter Plot - Bonus ICE

A 3D scatter plot displays economic indicators for G20 countries from a CSV dataset, plotting inflation rate, population in millions, and GDP in billions. Each point represents a country, with hover text revealing its name, and duplicate marker traces render the same data with distinct visual styling. The visualization uses Plotly’s `scatter3d` type via `Plotly.newPlot`, while D3’s `csv` function loads and parses the data, with axes explicitly labeled through the layout’s scene configuration.

KKevin Raj

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

73% match