Skip to content
D3.js plugin for 3d visualization
JavaScript
Branch: master
Clone or download
Latest commit d7fee6f Jan 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets add text Sep 11, 2017
src fix issue #2 May 27, 2018
test fix Rectangular 3d surface #1 Feb 24, 2018
.eslintrc.json first commit May 27, 2017
.gitignore add coverage Sep 12, 2017
.npmignore add coverage Sep 12, 2017
LICENSE first commit May 27, 2017
README.md typo May 27, 2018
d3-3d.sublime-project dont show node mod Aug 10, 2017
index.js first commit May 27, 2017
package-lock.json ... May 27, 2018
package.json allow to import as esnext module in the browser Oct 9, 2018

README.md

d3-3d

d3-3d is meant for 3d visualizations. d3-3d allows the projection of 3d data onto the screen in the webbrowser. It is specially designed to work with d3.js.

License npm version Donate with PayPal

See more examples.

Installing

If you use npm, npm install d3-3d. You can also download the latest release. Otherwise use unpkg to get the latest release. For example:

<script src="https://unpkg.com/d3-3d/build/d3-3d.js"></script>

For a specific version:

<script src="https://unpkg.com/d3-3d@version/build/d3-3d.js"></script>

For the minified version:

<script src="https://unpkg.com/d3-3d@version/build/d3-3d.min.js"></script>

API Reference

Overview

d3-3d uses the browser's coordinate system and orthographic projection to display your data on the screen. It will calculate the centroid for all elements and the orientation for your polygons. Due to the fact that SVG isn't very 3d compatible d3-3d adds 3d transformations to SVG.

With d3-3d you can easily visualize your 3d data.

var data3D = [ [[0,-1,0],[-1,1,0],[1,1,0]] ];

var triangles3D = d3._3d()
    .scale(100)
    .origin([480, 250])
    .shape('TRIANGLE');

var projectedData = triangles3D(data3D);

init(projectedData);

function init(data){

    var triangles = svg.selectAll('path').data(data);

    // add your logic here...

}

# d3._3d() <>

Constructs a new function object with the default settings.

Shapes

Depending on the shape the input data array has to be accordingly to the shape.

  • POINT A point is represented by the <circle> element. It does not have a draw function because it can be represented as a <circle>. The input data array has to be an array of points where each point has three coordinates which can be accessed via the x, y and z accessors.
  • LINE A line is represented by the <line> element. It does not have a draw function because it can be represented as a <line>. The input data array has to be an array of lines where each line is defined by a start- and an endpoint.
  • LINE_STRIP A continuous line is represented by the <path> element. The input data array has to be an array of points. Every point will be connected to the next point in the input data array.
  • TRIANGLE A triangle represented by the <path> element. The input data array has to be an array of triangles where each triangle is defined by three points in counter-clockwise order.
  • PLANE A plane is represented by the <path> element. The input data array has to be an array of planes where each plane is defined by four points in counter-clockwise order.
  • GRID A grid is represented by x planes. The input data array has to be an array of points. The shape function aspects the amount of points per row as a second argument. d3-3d will construct planes out of the passed data. NOTE: A grid has to have always the same number of points per row. Otherwise the code will break.
  • SURFACE equivalent to GRID
  • CUBE A grid is represented by 4 planes. The input data array has to be an array of cubes where each cube is defined by 8 vertices. To get the orientation and centroid calculation right you should pass in the data like so:

cube

# _3d.shape(shape) <>

Default: 'POINT'

Sets the shape to shape. If shape is not specified the current shape will be returned.

If shape is specified, sets the shape to the specified shape and returns the d3-3d function object. If shape is not specified, returns the current shape.

var triangles3D = d3._3d().shape('TRIANGLE');

# _3d.x([x]) <>

If x is specified, sets the x accessor to the specified function or number and returns the d3-3d function object. If x is not specified, returns the current x accessor, which defaults to:

function x(p) {
    return p[0];
}

This function will be invoked for each point in the input data array.

# _3d.y([y]) <>

If y is specified, sets the y accessor to the specified function or number and returns the d3-3d function object. If y is not specified, returns the current y accessor, which defaults to:

function y(p) {
    return p[1];
}

This function will be invoked for each point in the input data array.

# _3d.z([z]) <>

If z is specified, sets the z accessor to the specified function or number and returns the d3-3d function object. If z is not specified, returns the current z accessor, which defaults to:

function z(p) {
    return p[2];
}

This function will be invoked for each point in the input data array.

# _3d.scale(scale) <>

Default: 1

If scale is specified, sets the scale to the specified number and returns the d3-3d function object. If scale is not specified, returns the current scale.

# _3d.rotateX(angle) <>

Default: 0

If angle is specified, sets rotateX to the specified number and returns the d3-3d function object. If angle is not specified, returns the current angle.

# _3d.rotateY(angle) <>

Default: 0

If angle is specified, sets rotateY to the specified number and returns the d3-3d function object. If angle is not specified, returns the current angle.

# _3d.rotateZ(angle) <>

Default: 0

If angle is specified, sets rotateZ to the specified number and returns the d3-3d function object. If angle is not specified, returns the current angle.

# _3d.rotateCenter(point) <>

Default: [0, 0, 0]

If point is specified, sets rotateCenter to the specified point and returns the d3-3d function object. If rotateCenter is not specified, returns the current rotateCenter.

# _3d.sort(a,b) <>

Sorts the elements accordingly to the z coordinate of the calculated centroid.

# _3d.draw(shape) <>

Constructs a string for the SVG <path> element. Depending on the shape this function will take care how the elements get drawn. For instance, if you choose 'TRIANGLE' d3-3d aspects that you want to draw a triangle with three points and each point has three coordinates. The _3d.draw method will draw a triangle with these three points. If you want to draw a plane, you have to pass in four points and so on.

You can’t perform that action at this time.