hive/html/d3js/scatter_plot_3d.js
// Update the data points (spheres) and stems.
Update the data points (spheres) and stems.
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;
    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")
    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]])})
    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 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 ; 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" ) 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 ] ] ) } ) 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 ] ] ) ] ; } ) }
Update the data points (spheres) and stems.
Update the data points ( spheres ) and stems .
// Draw a sphere at each x,y,z coordinate. // Does not work on Chrome; use transform instead //.attr("radius", sphereRadius) // 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. 