Skip to main content
SimilarExport ZIP
100%

AnithaShivaramaiah(11537410) 3D Scatter plot using D3.js

✓ Published0🌍 Public
AAnitha Shivaramaiah
Last edited Apr 6, 2023
Created on Apr 5, 2023
Forked from HTML Starter

This example visualizes monthly expense data across two sets of three months using a 3D scatter plot. It displays two series of markers: one mapping April, August, and December expenses, and another mapping January, February, and March expenses, each with distinct colors, sizes, and opacity. The visualization is rendered using Plotly's `scatter3d` trace type via the `Plotly.newPlot` API, while the data is loaded and parsed with D3.js's `d3.csv` function from a GitHub Gist. Interactive 3D axes with customized background colors, grid lines, and titles represent the different expense categories.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

AnithaShivaramaiah (11537410) 3D Bar Chart with D3.js

This example shows monthly expenses from January through December for multiple expense categories as a 3D multi-series bar chart. The chart renders in an X3DOM scene, driven by the d3-x3d library alongside d3-3d, with D3 v5 loading CSV data from a GitHub gist. The code uses `d3.csv` to parse the data, `d3.select` to attach the chart to a div, and the `d3.x3d.chart.barChartMultiSeries()` component to generate the 3D visualization. Axes and scales are not explicitly customized, relying on the chart component’s defaults.

AAnitha Shivaramaiah
88% 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
78% match
Loading thumbnail…

Anitha Shivaramaiah (11537410) - ICE 7, Pie Chart

This pie chart visualizes monthly expenses by sorting the data by amount and displaying the top ten cost categories as colored slices with a legend listing each expense name and its dollar value. The chart is rendered as an SVG using D3 version 5, loading CSV data from a GitHub gist and leveraging `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for layout, shape generation, and color mapping. Mouseover events log the expense amount to the console.

AAnitha Shivaramaiah
78% match
Loading thumbnail…

Scatter Plot

This chart displays a monthly breakdown of expenses as a pie chart, with each slice representing a category and its corresponding value from the loaded CSV file. The visualization uses D3.js (v7) to load the data via `d3.csv`, compute angular positions with `d3.pie`, and render colored slices and labels using `d3.arc`. A legend on the right lists each category and its numeric amount, while the chart is drawn as SVG elements within a 900x500 viewport. The title clarifies the chart’s focus on monthly expenses.

Ppvvaishnavi93@gmail.com
77% 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
77% match
Loading thumbnail…

Anitha Shivaramaiah (11537410) - Line chart

This line chart displays earnings data from 2012 to 2023, plotting yearly cost values as a red path against a time-based x-axis and linear y-axis. The visualization loads CSV data from a GitHub gist, parses it with `d3.csv`, and renders using SVG inside a React framework. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the line is constructed via `d3.line` and scales using `d3.scaleTime` and `d3.scaleLinear`.

AAnitha Shivaramaiah
76% match
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
76% match
Loading thumbnail…

3d Scatter Plot Bonus ICE 11551417

This example shows a 3D scatter plot of insurance data, overlaying two traces: one maps age and sex against BMI, while the other maps the same age and sex axes against charges. The visualization uses Plotly’s `scatter3d` type, with markers rendered via the `Plotly.newPlot` API. Data is loaded asynchronously from a remote CSV using `d3.csv`, and the `unpack` function extracts columns for each trace. The layout collapses all margins, producing a frameless plot.

SSrujana390
75% match