x3dom in D3

100%

✓ Published0🌍 Public

Last edited Feb 11, 2017

Created on Feb 11, 2017

This example combines D3.js with x3dom to render an interactive 3D scatterplot of 40 randomly generated points. Three coordinate axes are drawn using the custom `d3_x3dom_axis.x3domAxis` API, with colored lines for x, y, and z scales. A 3D scene is built by appending `x3d`, `scene`, and `viewpoint` elements, while points are plotted as spheres via appended `transform`, `shape`, and `sphere` elements. The code uses D3's `scaleLinear` for mapping data ranges and demonstrates direct DOM manipulation through D3 selections in an x3dom context.

AI-generated description

Demo for d3-x3dom-axis

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/fabid/'>fabid</a>'s block: <a href='http://bl.ocks.org/fabid/61cbfe14de686cc25c47'>d3 x3dom axes</a>

forked from <a href='http://bl.ocks.org/fabid/'>fabid</a>'s block: <a href='http://bl.ocks.org/fabid/acb5dc4961ffa741b52b'>d3 x3dom scatter</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3 x3dom demo

This demo shows a set of steel-blue 3D boxes arranged in a row, whose heights change every 2.5 seconds based on random data. Built with d3.js and x3dom, it uses D3’s data join and transition methods to update each box’s translation and scale attributes, while x3dom renders the WebGL scene. A viewpoint defines the camera angle, and the `setInterval` function triggers new random data generation for continuous animation.

Ssitaramchallapalli

75% match

Loading thumbnail…

D3 tutorial

This example shows a scatterplot of 50 randomly generated data points, with each point’s position and radius mapped using linear scales. The visualization demonstrates how D3.js 3.5.5 creates axes and scales for dynamic data, drawing circles as SVG elements. The x- and y-axes are rendered using `d3.svg.axis`, with tick formatting applied as percentages on the x-axis. The code uses `d3.scale.linear` for positioning and radius, and the data is generated on the fly with `Math.random`. The tutorial source is from alignedleft.com, and the SVG rendering approach is explicit in the markup.

CChristosT

72% match

Loading thumbnail…

Hello VizHub

An interactive 3D scatter plot and grid is rendered with D3.js, using randomly generated data points and a coordinate grid. The visualization displays a 3D space where points are colored using `d3.scaleOrdinal` and the `d3.schemeCategory20`, with a y-axis scale and labels. Users can click and drag to rotate the 3D scene, with the rotation logic driven by `d3.drag()` events and `_3d()` API calls for grid, point, and line strip shapes. This example demonstrates the use of D3’s 3D extension and custom event handling for dynamic, animated rendering.

FFlorro

72% match

Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片

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

71% match

Loading thumbnail…

D3 Zoom

This example demonstrates interactive zooming and panning on a scatterplot of 100 randomly positioned points. Users can scroll to zoom in and out within a scale extent of 0.5x to 4x, or click and drag to pan across the full-window SVG canvas. The visualization uses d3.zoom to attach zoom behavior to the root SVG element and applies the transform directly to that element’s `transform` attribute during the zoom event. Data is generated randomly with the `makeData` utility, and circles are bound and updated using D3’s data join pattern.

KKhanin Sisaengsuwanchai

71% match

Loading thumbnail…

44. D3 Axes Clean

This example shows a scatter plot of coordinate pairs plotted with D3.js version 4.5.0. It renders circles and red text labels in an SVG canvas, using `d3.scaleLinear` for x and y axes and `d3.scaleSqrt` for circle radius sizing based on the y-value. The X-axis is customized with `d3.axisBottom` and `tickValues` to display only four specific tick marks (0, 100, 250, 600), demonstrating how to reduce axis clutter.

Aamakanju@nyit.edu

71% match

Loading thumbnail…

40. D3 Scale Plot Large

This example presents a scatterplot of eleven data points using D3.js version 4.5.0, rendered as SVG circles with red text labels. Each point’s x and y coordinates are mapped to the plot area through linear scales (`d3.scaleLinear`), while a third scale determines the circle radius based on the y-value. The chart is resized to a larger 500x300 pixel canvas with padding, and labels display the raw coordinate pairs alongside each point.

Aamakanju@nyit.edu

71% match