D3 Examples - d3 x3dom surface plot with d3-x3dom-shape

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://x3dom.org/download/1.7/x3dom.js"></script>
  <script src="//d3js.org/d3.v4.0.0-alpha.50.min.js"></script>
  <script src="d3-x3dom-axis.min.js"></script>
  <script src="d3-x3dom-shape.min.js"></script>
  <link rel="stylesheet", href="https://x3dom.org/download/1.7/x3dom.css" type="text/css" inline>
    
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background: #fcfcfc}
    canvas {background: white;}
  </style>
</head>
​
<body>
  
    <script>
  function makeSolid(selection, color) {
    selection.append("appearance").append("material").attr("diffuseColor", color ||     "black");
    return selection;
    }
​
  function drawAxes(scene, x, y, z) {
    var xAxis = d3_x3dom_axis.x3domAxis('x', 'y', x).tickSize(z.range()[1] - z.range()[0]).tickPadding(y.range()[0]);;
    var yAxis = d3_x3dom_axis.x3domAxis('y', 'x', y).tickSize(z.range()[1] - z.range()[0]);
    var zAxis2 = d3_x3dom_axis.x3domAxis('z', 'y', z).tickSize(x.range()[1] - x.range()[0]).tickFormat(function(d){return ''});
    var zAxis = d3_x3dom_axis.x3domAxis('z', 'x', z).tickSize(x.range()[1] - x.range()[0]);
    scene.append('group')
      .attr('class', 'xAxis')
      .call(xAxis)
      .select('.domain').call(makeSolid, 'red');
    scene.append('group')
      .attr('class', 'yAxis')
      .call(yAxis)
      .select('.domain').call(makeSolid, 'blue');
   
    scene.append('group')
      .attr('class', 'zAxis')
      .call(zAxis)
      .select('.domain').call(makeSolid, 'green');
     scene.append('group')
      .attr('class', 'zAxis')
      .call(zAxis2)
      .select('.domain').call(makeSolid, 'green');
  }
    
  
  function initX3DomScene(selector, width, height) {
    var x3d = d3.select("body").append("x3d")
      .attr("width", width + 'px')
      .attr("height", height +'px' );
    d3.select('.x3dom-canvas')
      .attr("width", 2 * width)
      .attr("height", 2 *  height);
    var scene = x3d.append("scene");
    var view_pos = [30, 100, 30];
    var fov = 0.9;
    var view_or = [0.02, 1, 1.2, 2.8];
    scene.append("viewpoint")
      .attr("position", view_pos.join(" "))
      .attr("orientation", view_or.join(" "))
      .attr("fieldOfView", fov);
    return scene   
  }
  var width = 800, height = 400;
    
    
    var scene = initX3DomScene('body', width, height);
 
  var x = d3.scaleLinear().range([0, 40]);
  var y = d3.scaleLinear().range([0, 40]);
  var z = d3.scaleLinear().range([0, 40]);
    
  drawAxes(scene, x, y, z);
  
  var cx = 0.3;
  var cy = 0.8;
  var f = function(vx, vy) {return (vx - cx)*(vx - cx) + (vy - cy)*(vx - cx);};
  
  var X = d3.range(0, 1.05, 0.1);
  var Y = d3.range(0, 1.05, 0.1);
  var nx = X.length, ny = Y.length;
​
  var data = d3.range(nx).map(function(i) {return d3.range(ny).map(
    function(j){
      return [X[i],Y[j], f(X[i], Y[j])];
    });})
​
​
  var color =  d3.scaleLinear()
    .domain(d3.extent(d3.merge(data), function(d) {return d[2];}))
    .range(['blue', 'red'])
    .interpolate(d3.interpolateLab);
    
  var surface = d3_x3dom_shape.surface()
    .x(function(d) {return x(d[0]);})
    .y(function(d) {return y(d[1]);})
    .z(function(d) {return z(d[2]);})
    .color(function(d) {
      return d3.color(color(d[2]));
        });
​
   
  var surfaces = scene.selectAll('.surface')
    .data([data]);
  surfaces
    .enter()
    .append('shape')
    .append('indexedfaceset')
    .attr('coordIndex', surface)
    .append("coordinate")
    .attr('point', surface.coordinates);
​
 d3.selectAll('indexedFaceSet')
  .append('color')
  .attr('color', surface.colors);
​
​
    </script>
</body>
    