R/3ddemoIRIS.R
In cddesja/D3plot: Create R Plots Using D3.js
Defines functions
irisDemo
Documented in
irisDemo
#' 3d demo https://gist.github.com/hlvoorhees/5986172
#'
#'@export
irisDemo <- function(...){
tmp <- paste0('<!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>
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/dev/x3dom.css"/>
</head>
<body>
<div id="divPlot"></div>
<script>
var rows = [{"x":5.1,"y":3.5,"z":1.4,"color":"setosa"},{"x":4.9,"y":3,"z":1.4,"color":"setosa"},{"x":4.7,"y":3.2,"z":1.3,"color":"setosa"},{"x":4.6,"y":3.1,"z":1.5,"color":"setosa"},{"x":5,"y":3.6,"z":1.4,"color":"setosa"},{"x":5.4,"y":3.9,"z":1.7,"color":"setosa"},{"x":4.6,"y":3.4,"z":1.4,"color":"setosa"},{"x":5,"y":3.4,"z":1.5,"color":"setosa"},{"x":4.4,"y":2.9,"z":1.4,"color":"setosa"},{"x":4.9,"y":3.1,"z":1.5,"color":"setosa"},{"x":5.4,"y":3.7,"z":1.5,"color":"setosa"},{"x":4.8,"y":3.4,"z":1.6,"color":"setosa"},{"x":4.8,"y":3,"z":1.4,"color":"setosa"},{"x":4.3,"y":3,"z":1.1,"color":"setosa"},{"x":5.8,"y":4,"z":1.2,"color":"setosa"},{"x":5.7,"y":4.4,"z":1.5,"color":"setosa"},{"x":5.4,"y":3.9,"z":1.3,"color":"setosa"},{"x":5.1,"y":3.5,"z":1.4,"color":"setosa"},{"x":5.7,"y":3.8,"z":1.7,"color":"setosa"},{"x":5.1,"y":3.8,"z":1.5,"color":"setosa"},{"x":5.4,"y":3.4,"z":1.7,"color":"setosa"},{"x":5.1,"y":3.7,"z":1.5,"color":"setosa"},{"x":4.6,"y":3.6,"z":1,"color":"setosa"},{"x":5.1,"y":3.3,"z":1.7,"color":"setosa"},{"x":4.8,"y":3.4,"z":1.9,"color":"setosa"},{"x":5,"y":3,"z":1.6,"color":"setosa"},{"x":5,"y":3.4,"z":1.6,"color":"setosa"},{"x":5.2,"y":3.5,"z":1.5,"color":"setosa"},{"x":5.2,"y":3.4,"z":1.4,"color":"setosa"},{"x":4.7,"y":3.2,"z":1.6,"color":"setosa"},{"x":4.8,"y":3.1,"z":1.6,"color":"setosa"},{"x":5.4,"y":3.4,"z":1.5,"color":"setosa"},{"x":5.2,"y":4.1,"z":1.5,"color":"setosa"},{"x":5.5,"y":4.2,"z":1.4,"color":"setosa"},{"x":4.9,"y":3.1,"z":1.5,"color":"setosa"},{"x":5,"y":3.2,"z":1.2,"color":"setosa"},{"x":5.5,"y":3.5,"z":1.3,"color":"setosa"},{"x":4.9,"y":3.6,"z":1.4,"color":"setosa"},{"x":4.4,"y":3,"z":1.3,"color":"setosa"},{"x":5.1,"y":3.4,"z":1.5,"color":"setosa"},{"x":5,"y":3.5,"z":1.3,"color":"setosa"},{"x":4.5,"y":2.3,"z":1.3,"color":"setosa"},{"x":4.4,"y":3.2,"z":1.3,"color":"setosa"},{"x":5,"y":3.5,"z":1.6,"color":"setosa"},{"x":5.1,"y":3.8,"z":1.9,"color":"setosa"},{"x":4.8,"y":3,"z":1.4,"color":"setosa"},{"x":5.1,"y":3.8,"z":1.6,"color":"setosa"},{"x":4.6,"y":3.2,"z":1.4,"color":"setosa"},{"x":5.3,"y":3.7,"z":1.5,"color":"setosa"},{"x":5,"y":3.3,"z":1.4,"color":"setosa"},{"x":7,"y":3.2,"z":4.7,"color":"versicolor"},{"x":6.4,"y":3.2,"z":4.5,"color":"versicolor"},{"x":6.9,"y":3.1,"z":4.9,"color":"versicolor"},{"x":5.5,"y":2.3,"z":4,"color":"versicolor"},{"x":6.5,"y":2.8,"z":4.6,"color":"versicolor"},{"x":5.7,"y":2.8,"z":4.5,"color":"versicolor"},{"x":6.3,"y":3.3,"z":4.7,"color":"versicolor"},{"x":4.9,"y":2.4,"z":3.3,"color":"versicolor"},{"x":6.6,"y":2.9,"z":4.6,"color":"versicolor"},{"x":5.2,"y":2.7,"z":3.9,"color":"versicolor"},{"x":5,"y":2,"z":3.5,"color":"versicolor"},{"x":5.9,"y":3,"z":4.2,"color":"versicolor"},{"x":6,"y":2.2,"z":4,"color":"versicolor"},{"x":6.1,"y":2.9,"z":4.7,"color":"versicolor"},{"x":5.6,"y":2.9,"z":3.6,"color":"versicolor"},{"x":6.7,"y":3.1,"z":4.4,"color":"versicolor"},{"x":5.6,"y":3,"z":4.5,"color":"versicolor"},{"x":5.8,"y":2.7,"z":4.1,"color":"versicolor"},{"x":6.2,"y":2.2,"z":4.5,"color":"versicolor"},{"x":5.6,"y":2.5,"z":3.9,"color":"versicolor"},{"x":5.9,"y":3.2,"z":4.8,"color":"versicolor"},{"x":6.1,"y":2.8,"z":4,"color":"versicolor"},{"x":6.3,"y":2.5,"z":4.9,"color":"versicolor"},{"x":6.1,"y":2.8,"z":4.7,"color":"versicolor"},{"x":6.4,"y":2.9,"z":4.3,"color":"versicolor"},{"x":6.6,"y":3,"z":4.4,"color":"versicolor"},{"x":6.8,"y":2.8,"z":4.8,"color":"versicolor"},{"x":6.7,"y":3,"z":5,"color":"versicolor"},{"x":6,"y":2.9,"z":4.5,"color":"versicolor"},{"x":5.7,"y":2.6,"z":3.5,"color":"versicolor"},{"x":5.5,"y":2.4,"z":3.8,"color":"versicolor"},{"x":5.5,"y":2.4,"z":3.7,"color":"versicolor"},{"x":5.8,"y":2.7,"z":3.9,"color":"versicolor"},{"x":6,"y":2.7,"z":5.1,"color":"versicolor"},{"x":5.4,"y":3,"z":4.5,"color":"versicolor"},{"x":6,"y":3.4,"z":4.5,"color":"versicolor"},{"x":6.7,"y":3.1,"z":4.7,"color":"versicolor"},{"x":6.3,"y":2.3,"z":4.4,"color":"versicolor"},{"x":5.6,"y":3,"z":4.1,"color":"versicolor"},{"x":5.5,"y":2.5,"z":4,"color":"versicolor"},{"x":5.5,"y":2.6,"z":4.4,"color":"versicolor"},{"x":6.1,"y":3,"z":4.6,"color":"versicolor"},{"x":5.8,"y":2.6,"z":4,"color":"versicolor"},{"x":5,"y":2.3,"z":3.3,"color":"versicolor"},{"x":5.6,"y":2.7,"z":4.2,"color":"versicolor"},{"x":5.7,"y":3,"z":4.2,"color":"versicolor"},{"x":5.7,"y":2.9,"z":4.2,"color":"versicolor"},{"x":6.2,"y":2.9,"z":4.3,"color":"versicolor"},{"x":5.1,"y":2.5,"z":3,"color":"versicolor"},{"x":5.7,"y":2.8,"z":4.1,"color":"versicolor"},{"x":6.3,"y":3.3,"z":6,"color":"virginica"},{"x":5.8,"y":2.7,"z":5.1,"color":"virginica"},{"x":7.1,"y":3,"z":5.9,"color":"virginica"},{"x":6.3,"y":2.9,"z":5.6,"color":"virginica"},{"x":6.5,"y":3,"z":5.8,"color":"virginica"},{"x":7.6,"y":3,"z":6.6,"color":"virginica"},{"x":4.9,"y":2.5,"z":4.5,"color":"virginica"},{"x":7.3,"y":2.9,"z":6.3,"color":"virginica"},{"x":6.7,"y":2.5,"z":5.8,"color":"virginica"},{"x":7.2,"y":3.6,"z":6.1,"color":"virginica"},{"x":6.5,"y":3.2,"z":5.1,"color":"virginica"},{"x":6.4,"y":2.7,"z":5.3,"color":"virginica"},{"x":6.8,"y":3,"z":5.5,"color":"virginica"},{"x":5.7,"y":2.5,"z":5,"color":"virginica"},{"x":5.8,"y":2.8,"z":5.1,"color":"virginica"},{"x":6.4,"y":3.2,"z":5.3,"color":"virginica"},{"x":6.5,"y":3,"z":5.5,"color":"virginica"},{"x":7.7,"y":3.8,"z":6.7,"color":"virginica"},{"x":7.7,"y":2.6,"z":6.9,"color":"virginica"},{"x":6,"y":2.2,"z":5,"color":"virginica"},{"x":6.9,"y":3.2,"z":5.7,"color":"virginica"},{"x":5.6,"y":2.8,"z":4.9,"color":"virginica"},{"x":7.7,"y":2.8,"z":6.7,"color":"virginica"},{"x":6.3,"y":2.7,"z":4.9,"color":"virginica"},{"x":6.7,"y":3.3,"z":5.7,"color":"virginica"},{"x":7.2,"y":3.2,"z":6,"color":"virginica"},{"x":6.2,"y":2.8,"z":4.8,"color":"virginica"},{"x":6.1,"y":3,"z":4.9,"color":"virginica"},{"x":6.4,"y":2.8,"z":5.6,"color":"virginica"},{"x":7.2,"y":3,"z":5.8,"color":"virginica"},{"x":7.4,"y":2.8,"z":6.1,"color":"virginica"},{"x":7.9,"y":3.8,"z":6.4,"color":"virginica"},{"x":6.4,"y":2.8,"z":5.6,"color":"virginica"},{"x":6.3,"y":2.8,"z":5.1,"color":"virginica"},{"x":6.1,"y":2.6,"z":5.6,"color":"virginica"},{"x":7.7,"y":3,"z":6.1,"color":"virginica"},{"x":6.3,"y":3.4,"z":5.6,"color":"virginica"},{"x":6.4,"y":3.1,"z":5.5,"color":"virginica"},{"x":6,"y":3,"z":4.8,"color":"virginica"},{"x":6.9,"y":3.1,"z":5.4,"color":"virginica"},{"x":6.7,"y":3.1,"z":5.6,"color":"virginica"},{"x":6.9,"y":3.1,"z":5.1,"color":"virginica"},{"x":5.8,"y":2.7,"z":5.1,"color":"virginica"},{"x":6.8,"y":3.2,"z":5.9,"color":"virginica"},{"x":6.7,"y":3.3,"z":5.7,"color":"virginica"},{"x":6.7,"y":3,"z":5.2,"color":"virginica"},{"x":6.3,"y":2.5,"z":5,"color":"virginica"},{"x":6.5,"y":3,"z":5.2,"color":"virginica"},{"x":6.2,"y":3.4,"z":5.4,"color":"virginica"},{"x":5.9,"y":3,"z":5.1,"color":"virginica"}] ;
d3.select("html").style("height","1200px").style("width","1000px")
d3.select("body").style("height","1200px").style("width","1000px")
d3.select("#divPlot").style("width", "1200px").style("height", "1000px")
var x3d = d3.select("#divPlot")
.append("x3d")
.style( "width", "1000px" )
.style( "height", "600px")
.style( "border", "none" )
var scene = x3d.append("scene")
scene.append("orthoviewpoint")
.attr( "centerOfRotation", [0, 0, 0])
.attr( "fieldOfView", [-10, -10, 15, 15])
.attr( "orientation", [-0.5, 1, 0.2, 1.12*Math.PI/4])
.attr( "position", [6, 6, 15])
// var rows = initializeDataGrid();
var axisRange = [0, 12];
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", "black")
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", "Helvetica")
.attr("justify", "END MIDDLE" )
}
// Assign key to axis, creating or updating its ticks, grid lines, and labels.
var cirColor = d3.scale.category10();
function drawAxis( axisIndex, key, duration ) {
var scale = d3.scale.linear()
.domain( [1,8] ) // demo data range
.range( axisRange )
scales[axisIndex] = scale;
var numTicks = 5;
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", "Helvetica")
.attr("shape-rendering", "crispEdges")
.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", "red")
// 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", "black")
.attr("diffuseColor", function(rows) { return cirColor(rows.color); })
.append("title")
.text(function(rows){
return rows.color;
});
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", none)
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( plotData( defaultDuration ), defaultDuration );
</script>
</body>
</html>
')
d3plot:::show_d3(tmp, arguments)
}
cddesja/D3plot documentation built on Aug. 3, 2022, 7:39 p.m.
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
Defines functions irisDemo
Documented in irisDemo
#' 3d demo https://gist.github.com/hlvoorhees/5986172
#'
#'@export
irisDemo <- function(...){
tmp <- paste0('<!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>
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/dev/x3dom.css"/>
</head>
<body>
<div id="divPlot"></div>
<script>
var rows = [{"x":5.1,"y":3.5,"z":1.4,"color":"setosa"},{"x":4.9,"y":3,"z":1.4,"color":"setosa"},{"x":4.7,"y":3.2,"z":1.3,"color":"setosa"},{"x":4.6,"y":3.1,"z":1.5,"color":"setosa"},{"x":5,"y":3.6,"z":1.4,"color":"setosa"},{"x":5.4,"y":3.9,"z":1.7,"color":"setosa"},{"x":4.6,"y":3.4,"z":1.4,"color":"setosa"},{"x":5,"y":3.4,"z":1.5,"color":"setosa"},{"x":4.4,"y":2.9,"z":1.4,"color":"setosa"},{"x":4.9,"y":3.1,"z":1.5,"color":"setosa"},{"x":5.4,"y":3.7,"z":1.5,"color":"setosa"},{"x":4.8,"y":3.4,"z":1.6,"color":"setosa"},{"x":4.8,"y":3,"z":1.4,"color":"setosa"},{"x":4.3,"y":3,"z":1.1,"color":"setosa"},{"x":5.8,"y":4,"z":1.2,"color":"setosa"},{"x":5.7,"y":4.4,"z":1.5,"color":"setosa"},{"x":5.4,"y":3.9,"z":1.3,"color":"setosa"},{"x":5.1,"y":3.5,"z":1.4,"color":"setosa"},{"x":5.7,"y":3.8,"z":1.7,"color":"setosa"},{"x":5.1,"y":3.8,"z":1.5,"color":"setosa"},{"x":5.4,"y":3.4,"z":1.7,"color":"setosa"},{"x":5.1,"y":3.7,"z":1.5,"color":"setosa"},{"x":4.6,"y":3.6,"z":1,"color":"setosa"},{"x":5.1,"y":3.3,"z":1.7,"color":"setosa"},{"x":4.8,"y":3.4,"z":1.9,"color":"setosa"},{"x":5,"y":3,"z":1.6,"color":"setosa"},{"x":5,"y":3.4,"z":1.6,"color":"setosa"},{"x":5.2,"y":3.5,"z":1.5,"color":"setosa"},{"x":5.2,"y":3.4,"z":1.4,"color":"setosa"},{"x":4.7,"y":3.2,"z":1.6,"color":"setosa"},{"x":4.8,"y":3.1,"z":1.6,"color":"setosa"},{"x":5.4,"y":3.4,"z":1.5,"color":"setosa"},{"x":5.2,"y":4.1,"z":1.5,"color":"setosa"},{"x":5.5,"y":4.2,"z":1.4,"color":"setosa"},{"x":4.9,"y":3.1,"z":1.5,"color":"setosa"},{"x":5,"y":3.2,"z":1.2,"color":"setosa"},{"x":5.5,"y":3.5,"z":1.3,"color":"setosa"},{"x":4.9,"y":3.6,"z":1.4,"color":"setosa"},{"x":4.4,"y":3,"z":1.3,"color":"setosa"},{"x":5.1,"y":3.4,"z":1.5,"color":"setosa"},{"x":5,"y":3.5,"z":1.3,"color":"setosa"},{"x":4.5,"y":2.3,"z":1.3,"color":"setosa"},{"x":4.4,"y":3.2,"z":1.3,"color":"setosa"},{"x":5,"y":3.5,"z":1.6,"color":"setosa"},{"x":5.1,"y":3.8,"z":1.9,"color":"setosa"},{"x":4.8,"y":3,"z":1.4,"color":"setosa"},{"x":5.1,"y":3.8,"z":1.6,"color":"setosa"},{"x":4.6,"y":3.2,"z":1.4,"color":"setosa"},{"x":5.3,"y":3.7,"z":1.5,"color":"setosa"},{"x":5,"y":3.3,"z":1.4,"color":"setosa"},{"x":7,"y":3.2,"z":4.7,"color":"versicolor"},{"x":6.4,"y":3.2,"z":4.5,"color":"versicolor"},{"x":6.9,"y":3.1,"z":4.9,"color":"versicolor"},{"x":5.5,"y":2.3,"z":4,"color":"versicolor"},{"x":6.5,"y":2.8,"z":4.6,"color":"versicolor"},{"x":5.7,"y":2.8,"z":4.5,"color":"versicolor"},{"x":6.3,"y":3.3,"z":4.7,"color":"versicolor"},{"x":4.9,"y":2.4,"z":3.3,"color":"versicolor"},{"x":6.6,"y":2.9,"z":4.6,"color":"versicolor"},{"x":5.2,"y":2.7,"z":3.9,"color":"versicolor"},{"x":5,"y":2,"z":3.5,"color":"versicolor"},{"x":5.9,"y":3,"z":4.2,"color":"versicolor"},{"x":6,"y":2.2,"z":4,"color":"versicolor"},{"x":6.1,"y":2.9,"z":4.7,"color":"versicolor"},{"x":5.6,"y":2.9,"z":3.6,"color":"versicolor"},{"x":6.7,"y":3.1,"z":4.4,"color":"versicolor"},{"x":5.6,"y":3,"z":4.5,"color":"versicolor"},{"x":5.8,"y":2.7,"z":4.1,"color":"versicolor"},{"x":6.2,"y":2.2,"z":4.5,"color":"versicolor"},{"x":5.6,"y":2.5,"z":3.9,"color":"versicolor"},{"x":5.9,"y":3.2,"z":4.8,"color":"versicolor"},{"x":6.1,"y":2.8,"z":4,"color":"versicolor"},{"x":6.3,"y":2.5,"z":4.9,"color":"versicolor"},{"x":6.1,"y":2.8,"z":4.7,"color":"versicolor"},{"x":6.4,"y":2.9,"z":4.3,"color":"versicolor"},{"x":6.6,"y":3,"z":4.4,"color":"versicolor"},{"x":6.8,"y":2.8,"z":4.8,"color":"versicolor"},{"x":6.7,"y":3,"z":5,"color":"versicolor"},{"x":6,"y":2.9,"z":4.5,"color":"versicolor"},{"x":5.7,"y":2.6,"z":3.5,"color":"versicolor"},{"x":5.5,"y":2.4,"z":3.8,"color":"versicolor"},{"x":5.5,"y":2.4,"z":3.7,"color":"versicolor"},{"x":5.8,"y":2.7,"z":3.9,"color":"versicolor"},{"x":6,"y":2.7,"z":5.1,"color":"versicolor"},{"x":5.4,"y":3,"z":4.5,"color":"versicolor"},{"x":6,"y":3.4,"z":4.5,"color":"versicolor"},{"x":6.7,"y":3.1,"z":4.7,"color":"versicolor"},{"x":6.3,"y":2.3,"z":4.4,"color":"versicolor"},{"x":5.6,"y":3,"z":4.1,"color":"versicolor"},{"x":5.5,"y":2.5,"z":4,"color":"versicolor"},{"x":5.5,"y":2.6,"z":4.4,"color":"versicolor"},{"x":6.1,"y":3,"z":4.6,"color":"versicolor"},{"x":5.8,"y":2.6,"z":4,"color":"versicolor"},{"x":5,"y":2.3,"z":3.3,"color":"versicolor"},{"x":5.6,"y":2.7,"z":4.2,"color":"versicolor"},{"x":5.7,"y":3,"z":4.2,"color":"versicolor"},{"x":5.7,"y":2.9,"z":4.2,"color":"versicolor"},{"x":6.2,"y":2.9,"z":4.3,"color":"versicolor"},{"x":5.1,"y":2.5,"z":3,"color":"versicolor"},{"x":5.7,"y":2.8,"z":4.1,"color":"versicolor"},{"x":6.3,"y":3.3,"z":6,"color":"virginica"},{"x":5.8,"y":2.7,"z":5.1,"color":"virginica"},{"x":7.1,"y":3,"z":5.9,"color":"virginica"},{"x":6.3,"y":2.9,"z":5.6,"color":"virginica"},{"x":6.5,"y":3,"z":5.8,"color":"virginica"},{"x":7.6,"y":3,"z":6.6,"color":"virginica"},{"x":4.9,"y":2.5,"z":4.5,"color":"virginica"},{"x":7.3,"y":2.9,"z":6.3,"color":"virginica"},{"x":6.7,"y":2.5,"z":5.8,"color":"virginica"},{"x":7.2,"y":3.6,"z":6.1,"color":"virginica"},{"x":6.5,"y":3.2,"z":5.1,"color":"virginica"},{"x":6.4,"y":2.7,"z":5.3,"color":"virginica"},{"x":6.8,"y":3,"z":5.5,"color":"virginica"},{"x":5.7,"y":2.5,"z":5,"color":"virginica"},{"x":5.8,"y":2.8,"z":5.1,"color":"virginica"},{"x":6.4,"y":3.2,"z":5.3,"color":"virginica"},{"x":6.5,"y":3,"z":5.5,"color":"virginica"},{"x":7.7,"y":3.8,"z":6.7,"color":"virginica"},{"x":7.7,"y":2.6,"z":6.9,"color":"virginica"},{"x":6,"y":2.2,"z":5,"color":"virginica"},{"x":6.9,"y":3.2,"z":5.7,"color":"virginica"},{"x":5.6,"y":2.8,"z":4.9,"color":"virginica"},{"x":7.7,"y":2.8,"z":6.7,"color":"virginica"},{"x":6.3,"y":2.7,"z":4.9,"color":"virginica"},{"x":6.7,"y":3.3,"z":5.7,"color":"virginica"},{"x":7.2,"y":3.2,"z":6,"color":"virginica"},{"x":6.2,"y":2.8,"z":4.8,"color":"virginica"},{"x":6.1,"y":3,"z":4.9,"color":"virginica"},{"x":6.4,"y":2.8,"z":5.6,"color":"virginica"},{"x":7.2,"y":3,"z":5.8,"color":"virginica"},{"x":7.4,"y":2.8,"z":6.1,"color":"virginica"},{"x":7.9,"y":3.8,"z":6.4,"color":"virginica"},{"x":6.4,"y":2.8,"z":5.6,"color":"virginica"},{"x":6.3,"y":2.8,"z":5.1,"color":"virginica"},{"x":6.1,"y":2.6,"z":5.6,"color":"virginica"},{"x":7.7,"y":3,"z":6.1,"color":"virginica"},{"x":6.3,"y":3.4,"z":5.6,"color":"virginica"},{"x":6.4,"y":3.1,"z":5.5,"color":"virginica"},{"x":6,"y":3,"z":4.8,"color":"virginica"},{"x":6.9,"y":3.1,"z":5.4,"color":"virginica"},{"x":6.7,"y":3.1,"z":5.6,"color":"virginica"},{"x":6.9,"y":3.1,"z":5.1,"color":"virginica"},{"x":5.8,"y":2.7,"z":5.1,"color":"virginica"},{"x":6.8,"y":3.2,"z":5.9,"color":"virginica"},{"x":6.7,"y":3.3,"z":5.7,"color":"virginica"},{"x":6.7,"y":3,"z":5.2,"color":"virginica"},{"x":6.3,"y":2.5,"z":5,"color":"virginica"},{"x":6.5,"y":3,"z":5.2,"color":"virginica"},{"x":6.2,"y":3.4,"z":5.4,"color":"virginica"},{"x":5.9,"y":3,"z":5.1,"color":"virginica"}] ;
d3.select("html").style("height","1200px").style("width","1000px")
d3.select("body").style("height","1200px").style("width","1000px")
d3.select("#divPlot").style("width", "1200px").style("height", "1000px")
var x3d = d3.select("#divPlot")
.append("x3d")
.style( "width", "1000px" )
.style( "height", "600px")
.style( "border", "none" )
var scene = x3d.append("scene")
scene.append("orthoviewpoint")
.attr( "centerOfRotation", [0, 0, 0])
.attr( "fieldOfView", [-10, -10, 15, 15])
.attr( "orientation", [-0.5, 1, 0.2, 1.12*Math.PI/4])
.attr( "position", [6, 6, 15])
// var rows = initializeDataGrid();
var axisRange = [0, 12];
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", "black")
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", "Helvetica")
.attr("justify", "END MIDDLE" )
}
// Assign key to axis, creating or updating its ticks, grid lines, and labels.
var cirColor = d3.scale.category10();
function drawAxis( axisIndex, key, duration ) {
var scale = d3.scale.linear()
.domain( [1,8] ) // demo data range
.range( axisRange )
scales[axisIndex] = scale;
var numTicks = 5;
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", "Helvetica")
.attr("shape-rendering", "crispEdges")
.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", "red")
// 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", "black")
.attr("diffuseColor", function(rows) { return cirColor(rows.color); })
.append("title")
.text(function(rows){
return rows.color;
});
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", none)
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( plotData( defaultDuration ), defaultDuration );
</script>
</body>
</html>
')
d3plot:::show_d3(tmp, arguments)
}
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
Embedding an R snippet on your website
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.