Skip to content

Instantly share code, notes, and snippets.

@hlvoorhees

hlvoorhees/README.md

Last active March 12, 2023 07:55
Show Gist options
  • Save hlvoorhees/5986172 to your computer and use it in GitHub Desktop.
Save hlvoorhees/5986172 to your computer and use it in GitHub Desktop.
Download ZIP
3D scatter plot using d3, x3dom
Raw
README.md

Example 3D scatter plot implemented using d3 and x3dom.

Raw
index.html
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>3D Scatter Plot</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://x3dom.org/x3dom/dist/x3dom-full.js"></script>
<script type="text/javascript" src="scatter_plot_3d_demo.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/dev/x3dom.css"/>
</head>
<body>
<div id="divPlot"></div>
<script>
d3.select('html').style('height','100%').style('width','100%')
d3.select('body').style('height','100%').style('width','100%')
d3.select('#divPlot').style('width', "500px").style('height', "500px")
scatterPlot3d( d3.select('#divPlot'));
</script>
</body>
</html>
Raw
scatter_plot_3d_demo.js
// Create a 3d scatter plot within d3 selection parent.
function scatterPlot3d( parent )
{
var x3d = parent
.append("x3d")
.style( "width", parseInt(parent.style("width"))+"px" )
.style( "height", parseInt(parent.style("height"))+"px" )
.style( "border", "none" )
var scene = x3d.append("scene")
scene.append("orthoviewpoint")
.attr( "centerOfRotation", [5, 5, 5])
.attr( "fieldOfView", [-5, -5, 15, 15])
.attr( "orientation", [-0.5, 1, 0.2, 1.12*Math.PI/4])
.attr( "position", [8, 4, 15])
var rows = initializeDataGrid();
var axisRange = [0, 10];
var scales = [];
var initialDuration = 0;
var defaultDuration = 800;
var ease = 'linear';
var time = 0;
var axisKeys = ["x", "y", "z"]
// Helper functions for initializeAxis() and drawAxis()
function axisName( name, axisIndex ) {
return ['x','y','z'][axisIndex] + name;
}
function constVecWithAxisValue( otherValue, axisValue, axisIndex ) {
var result = [otherValue, otherValue, otherValue];
result[axisIndex] = axisValue;
return result;
}
// Used to make 2d elements visible
function makeSolid(selection, color) {
selection.append("appearance")
.append("material")
.attr("diffuseColor", color||"black")
return selection;
}
// Initialize the axes lines and labels.
function initializePlot() {
initializeAxis(0);
initializeAxis(1);
initializeAxis(2);
}
function initializeAxis( axisIndex )
{
var key = axisKeys[axisIndex];
drawAxis( axisIndex, key, initialDuration );
var scaleMin = axisRange[0];
var scaleMax = axisRange[1];
// the axis line
var newAxisLine = scene.append("transform")
.attr("class", axisName("Axis", axisIndex))
.attr("rotation", ([[0,0,0,0],[0,0,1,Math.PI/2],[0,1,0,-Math.PI/2]][axisIndex]))
.append("shape")
newAxisLine
.append("appearance")
.append("material")
.attr("emissiveColor", "lightgray")
newAxisLine
.append("polyline2d")
// Line drawn along y axis does not render in Firefox, so draw one
// along the x axis instead and rotate it (above).
.attr("lineSegments", "0 0," + scaleMax + " 0")
// axis labels
var newAxisLabel = scene.append("transform")
.attr("class", axisName("AxisLabel", axisIndex))
.attr("translation", constVecWithAxisValue( 0, scaleMin + 1.1 * (scaleMax-scaleMin), axisIndex ))
var newAxisLabelShape = newAxisLabel
.append("billboard")
.attr("axisOfRotation", "0 0 0") // face viewer
.append("shape")
.call(makeSolid)
var labelFontSize = 0.6;
newAxisLabelShape
.append("text")
.attr("class", axisName("AxisLabelText", axisIndex))
.attr("solid", "true")
.attr("string", key)
.append("fontstyle")
.attr("size", labelFontSize)
.attr("family", "SANS")
.attr("justify", "END MIDDLE" )
}
// Assign key to axis, creating or updating its ticks, grid lines, and labels.
function drawAxis( axisIndex, key, duration ) {
var scale = d3.scale.linear()
.domain( [-5,5] ) // demo data range
.range( axisRange )
scales[axisIndex] = scale;
var numTicks = 8;
var tickSize = 0.1;
var tickFontSize = 0.5;
// ticks along each axis
var ticks = scene.selectAll( "."+axisName("Tick", axisIndex) )
.data( scale.ticks( numTicks ));
var newTicks = ticks.enter()
.append("transform")
.attr("class", axisName("Tick", axisIndex));
newTicks.append("shape").call(makeSolid)
.append("box")
.attr("size", tickSize + " " + tickSize + " " + tickSize);
// enter + update
ticks.transition().duration(duration)
.attr("translation", function(tick) {
return constVecWithAxisValue( 0, scale(tick), axisIndex ); })
ticks.exit().remove();
// tick labels
var tickLabels = ticks.selectAll("billboard shape text")
.data(function(d) { return [d]; });
var newTickLabels = tickLabels.enter()
.append("billboard")
.attr("axisOfRotation", "0 0 0")
.append("shape")
.call(makeSolid)
newTickLabels.append("text")
.attr("string", scale.tickFormat(10))
.attr("solid", "true")
.append("fontstyle")
.attr("size", tickFontSize)
.attr("family", "SANS")
.attr("justify", "END MIDDLE" );
tickLabels // enter + update
.attr("string", scale.tickFormat(10))
tickLabels.exit().remove();
// base grid lines
if (axisIndex==0 || axisIndex==2) {
var gridLines = scene.selectAll( "."+axisName("GridLine", axisIndex))
.data(scale.ticks( numTicks ));
gridLines.exit().remove();
var newGridLines = gridLines.enter()
.append("transform")
.attr("class", axisName("GridLine", axisIndex))
.attr("rotation", axisIndex==0 ? [0,1,0, -Math.PI/2] : [0,0,0,0])
.append("shape")
newGridLines.append("appearance")
.append("material")
.attr("emissiveColor", "gray")
newGridLines.append("polyline2d");
gridLines.selectAll("shape polyline2d").transition().duration(duration)
.attr("lineSegments", "0 0, " + axisRange[1] + " 0")
gridLines.transition().duration(duration)
.attr("translation", axisIndex==0
? function(d) { return scale(d) + " 0 0"; }
: function(d) { return "0 0 " + scale(d); }
)
}
}
// Update the data points (spheres) and stems.
function plotData( duration ) {
if (!rows) {
console.log("no rows to plot.")
return;
}
var x = scales[0], y = scales[1], z = scales[2];
var sphereRadius = 0.2;
// Draw a sphere at each x,y,z coordinate.
var datapoints = scene.selectAll(".datapoint").data( rows );
datapoints.exit().remove()
var newDatapoints = datapoints.enter()
.append("transform")
.attr("class", "datapoint")
.attr("scale", [sphereRadius, sphereRadius, sphereRadius])
.append("shape");
newDatapoints
.append("appearance")
.append("material");
newDatapoints
.append("sphere")
// Does not work on Chrome; use transform instead
//.attr("radius", sphereRadius)
datapoints.selectAll("shape appearance material")
.attr("diffuseColor", 'steelblue' )
datapoints.transition().ease(ease).duration(duration)
.attr("translation", function(row) {
return x(row[axisKeys[0]]) + " " + y(row[axisKeys[1]]) + " " + z(row[axisKeys[2]])})
// Draw a stem from the x-z plane to each sphere at elevation y.
// This convention was chosen to be consistent with x3d primitive ElevationGrid.
var stems = scene.selectAll(".stem").data( rows );
stems.exit().remove();
var newStems = stems.enter()
.append("transform")
.attr("class", "stem")
.append("shape");
newStems
.append("appearance")
.append("material")
.attr("emissiveColor", "gray")
newStems
.append("polyline2d")
.attr("lineSegments", function(row) { return "0 1, 0 0"; })
stems.transition().ease(ease).duration(duration)
.attr("translation",
function(row) { return x(row[axisKeys[0]]) + " 0 " + z(row[axisKeys[2]]); })
.attr("scale",
function(row) { return [1, y(row[axisKeys[1]])]; })
}
function initializeDataGrid() {
var rows = [];
// Follow the convention where y(x,z) is elevation.
for (var x=-5; x<=5; x+=1) {
for (var z=-5; z<=5; z+=1) {
rows.push({x: x, y: 0, z: z});
}
}
return rows;
}
function updateData() {
time += Math.PI/8;
if ( x3d.node() && x3d.node().runtime ) {
for (var r=0; r<rows.length; ++r) {
var x = rows[r].x;
var z = rows[r].z;
rows[r].y = 5*( Math.sin(0.5*x + time) * Math.cos(0.25*z + time));
}
plotData( defaultDuration );
} else {
console.log('x3d not ready.');
}
}
initializeDataGrid();
initializePlot();
setInterval( updateData, defaultDuration );
}
@chihlee
Copy link

chihlee commented Feb 10, 2015

This is cool. How would you add a legend?

@drakezhard
Copy link

Really freaking awesome thanks for posting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment