DZ takes data in 3 dimensions and transforms it to 2 dimensions.
DZ(3d) -> 2d
DZ works well with D3
- plotting equations with dots
- or with lines
- a teapot
- dna double helix
- DOF with SVG blur
- simple cube
- plane
- function plotting with points
- point cube
- euler formula
- orbiting ball
download dz.js and include it into your HTML
<script src="dz.js"></script>or, install via npm
npm install dz
DZ in combination with D3 isn't suited for plotting all times of 3 dimensional geometric shapes. For example, it wont know how to deal with surface intersections. In most 3D graphics environments, depth is computed per pixel but with DZ and D3, all our geometry is still SVG which is either entirely above or entirely bellow other SVG elements (ever both above and bellow as would be the case when projecting two intersecting planes.)
Here's a small example. Checkout example/orbit.html for a fully working demo.
// create a new perspective projection
var perspective = dz.projection.perspective()
// and configure the camera (aka, the "eyeball")
perspective.camera().position([0, 0, 1]).lookAt([0, 0, 0])
// create some 3d data
var data = [0, -1, -0.5] // a point at (0, -1, -0.5)
// projection of your data point onto the camera "film"
perspective(data) // -> [x, y]
// or also
perspective.x(data) // x coordinate of the 3D -> 2D projection
perspective.y(data) // y coordinate of the 3D -> 2D projectionNo documentation yet so for now have a look at the source code