d3 x3dom surface (no gradient)

d3 x3dom surface plot with color gradient

forked from fabid's block: d3 x3dom surface

<!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>
  <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;
	}

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.5;
  var cy = 0.9;
  var f = function(vx, vy) {return (vx - cx)*(vx - cx) + (vy - cy)*(vy - cy);};

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(X[i]), y(Y[j]), z(f(X[i], Y[j]))];
    });})

var flattened = d3.merge(data);
	var coordinates = d3.merge(flattened).join(' ');

var surfacesData = [{
    points: coordinates,
    faces: coordIndex.concat(coordIndexBack).join(' '),
  }]

var surfaces = scene.selectAll('.surface')
    .data(surfacesData);
  surfaces
    .enter()
    .append('shape')
    .append('indexedfaceset')
    .attr('coordIndex', function(d) { return d.faces} )
    .append("coordinate")
    .attr('point', function(d){ return d.points;});

</script>
</body>

Modified http://x3dom.org/download/1.7/x3dom.js to a secure url

https://x3dom.org/download/1.7/x3dom.js

https://d3js.org/d3.v4.0.0-alpha.50.min.js