Skip to main content
SimilarExport ZIP
100%

3d surface

✓ Published0🌍 Public
SShuyu Zheng
Last edited Jan 13, 2021
Created on Jan 13, 2021
Forked from Hello VizHub

This example shows a 3D surface plot generated from mathematical formulas, with a menu to switch between three different datasets. The surface is rendered as an SVG path, with projected 3D coordinates transformed into 2D space. The code uses D3 v5 to bind data and create the SVG elements, while the surface geometry is derived from functions like sine and cosine applied to a grid of x and y values. Users can click list items to select a dataset, which updates the displayed surface.

AI-generated description

Ploting 3D surface from array. The original code comes from Paul Brunt's Block

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows a 3D surface plot of a mathematical function, where the height at each point is determined by a cosine wave based on distance from the origin, scaled by a random factor. Users can drag the surface to rotate it in three dimensions, or click the "update" button to generate a new surface with a different random amplitude. The visualization uses d3._3d to project and draw the surface as SVG paths, with d3-scale-chromatic's interpolateSpectral for coloring and d3.drag for interaction. Each update transitions the new surface in over one second, dynamically recalculating the color scale domain based on the new height range.

SShuyu Zheng
82% match
Loading thumbnail…

Untitled

An interactive 3D surface plot visualizes a mathematical function of two variables, rendered as animated SVG polygons that respond to drag gestures for rotation. The code uses the d3-3d library with d3.v4 to project points into 3D space, while `d3.drag()` handles mouse interaction to update rotation angles. Surface color varies by height using `d3.interpolateSpectral`. A button triggers `d3.randomUniform` to generate new function parameters, transitioning the surface over one second via D3 transitions.

Jjorelchan
76% match
Loading thumbnail…

Untitled

This visualization displays a 3D surface plot of mountain elevation data, with latitude and longitude coordinates mapped onto the x- and y-axes and elevation values represented on the z-axis. It uses Plotly’s `newPlot` API to render the interactive surface, while D3’s `csv` method fetches the dataset from a remote CSV file. The React and ReactDOM libraries manage the page structure, though the actual chart is rendered entirely by Plotly. The layout sets explicit pixel dimensions and margins, and the color gradient on the surface encodes elevation variations across the terrain.

Ssalimjivani
70% match
Loading thumbnail…

3D bar graph

This example displays a static 3D bar graph using D3 version 7, rendered within an HTML page. The visualization shows a simple three-dimensional bar chart, with the body text set to a large font size. The code imports the `select` function from D3 and uses it to target the `body` element, then sets its text content to “Hello D3 version 7,” demonstrating basic D3 selection and DOM manipulation. The visualization loads D3 from a CDN and runs through a bundled JavaScript file.

Kkakumanusreya
70% match
Loading thumbnail…

3D Bar Chart with d3.js

This example creates a 3D bar chart using the d3-3d extension in an SVG context, displaying categorical values as extruded cubes. It loads data from a Plotly datasets CSV file, then transforms it using d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with a category color scheme. The chart applies rotations via rotateX, rotateY, and rotateZ transforms to orient the 3D scene.

Vviswak12
69% match
Loading thumbnail…

3D Scatter Plot

A 3D scatter plot displays data points from a CSV dataset, mapping three quantitative dimensions to x, y, and z axes while using color to distinguish categorical groups. The visualization uses Three.js with WebGL rendering to create and animate sphere sprites, and D3.js for data loading, linear scaling, and ordinal color mapping. Points are continuously rotated through a slow animation, and users can pan with mouse interaction to change the viewing angle. The scene uses a perspective camera with sprite-based circle markers for each observation.

Wwaqastufail
69% match
Loading thumbnail…

Untitled

This example shows an interactive 3D scatterplot and grid rendered with SVG, where users can drag to rotate the scene. Randomly distributed points float above a shaded grid surface, with projected axes and labels. The visualization uses the d3-3d library to compute 3D-to-2D projections, with d3.drag() handling rotation updates. D3 v4 transitions animate the initial point appearance, while React manages the component structure.

Aavinash021997
69% match
Loading thumbnail…

D3 Shapes In action

This example demonstrates how to generate a line chart from random data points using D3's line generator. The code creates 200 points with x-coordinates increasing by 3 and y-coordinates randomly assigned between 0 and 100, then passes this array to `d3.line()` to produce a smooth path. The resulting SVG path element is styled with a gray stroke and no fill, and the file uses D3 version 7.8.5 with SVG rendering, as specified in the HTML and package configuration.

SSubhendu Karmakar
69% match