d3 x3dom surface plot with d3-x3dom-shape

README.md

Demo for d3-x3dom-axis

Built with blockbuilder.org

forked from fabid's block: d3 x3dom scatter

d3-x3dom-axis.min.js

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3_x3dom_axis=t.d3_x3dom_axis||{})}(this,function(t){"use strict";function n(t,n,e){function l(a){function l(t){var n;switch(t){case"x":n=[1,0,0];break;case"y":n=[0,1,0];break;case"z":n=[0,0,1]}return n}function d(t){var n;switch(t){case"x":n=[1,1,0,Math.PI];break;case"y":n=[0,0,0,0];break;case"z":n=[0,1,1,Math.PI]}return n}var f,m,h,k,g=null==c?e.ticks?e.ticks.apply(e,o):e.domain():c,y=null==s?e.tickFormat?e.tickFormat.apply(e,o):r:s,x=e.range(),b=x[0],v=x[x.length-1],j=a.selection?a.selection():a;f=l(t),h=l(n),m=d(t),k=d(n);var A=j.selectAll("transform").data([null]),z=j.selectAll(".tick").data(g,e).order(),L=z.exit(),_=z.enter().append("transform").attr("translation",function(t){return f.map(function(n){return e(t)*n}).join(" ")}).attr("class","tick"),D=z.select(".tickLine"),F=z.select("billboard");A=A.merge(A.enter().append("transform").attr("rotation",m.join(" ")).attr("translation",f.map(function(t){return t*(b+v)/2}).join(" ")).append("shape").call(i).attr("class","domain")),z=z.merge(_),D=D.merge(_.append("transform"));var I=_.append("transform");I.attr("translation",h.map(function(t){return-t*p})).append("billboard").attr("axisOfRotation","0 0 0").append("shape").call(i).append("text").attr("string",y).append("fontstyle").attr("size",1).attr("family","SANS").attr("style","BOLD").attr("justify","MIDDLE "),F=F.merge(I),L.remove(),A.append("cylinder").attr("radius",.1).attr("height",v-b),D.attr("translation",h.map(function(t){return t*u/2}).join(" ")).attr("rotation",k.join(" ")).attr("class","tickLine").append("shape").call(i).append("cylinder").attr("radius",.05).attr("height",u)}var o=[],c=null,s=null,u=1,p=1;return l.scale=function(t){return arguments.length?(e=t,l):e},l.ticks=function(){return o=a.call(arguments),l},l.tickArguments=function(t){return arguments.length?(o=null==t?[]:a.call(t),l):o.slice()},l.tickValues=function(t){return arguments.length?(c=null==t?null:a.call(t),l):c&&c.slice()},l.tickFormat=function(t){return arguments.length?(s=t,l):s},l.tickSize=function(t){return arguments.length?(u=+t,l):u},l.tickPadding=function(t){return arguments.length?(p=+t,l):p},l}var e="0.0.1",a=Array.prototype.slice,r=function(t){return t},i=function(t,n){return t.append("appearance").append("material").attr("diffuseColor",n||"black"),t};t.version=e,t.x3domAxis=n});

d3-x3dom-shape.min.js

!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(n.d3_x3dom_shape=n.d3_x3dom_shape||{})}(this,function(n){"use strict";function t(n,t){return n.append("appearance").append("material").attr("diffuseColor",t||"black"),n}function r(n){return function(){return n}}function u(){function n(n){var r="";return n.forEach(function(n,o){r=r+t(n,o)+" "+u(n,o)+" "+e(n,o)+" "}),r}var t=function(n){return n[0]},u=function(n){return n[1]},e=function(n){return n[2]},o=r([1,1]);return n.scale=function(n){var t="";return n.map(function(n){t=o(n).join(" ")+" "}),t},n.circleSection=f,n.s=function(t){return arguments.length?(o="function"==typeof t?t:r(t),n):o},n.x=function(u){return arguments.length?(t="function"==typeof u?u:r(+u),n):t},n.y=function(t){return arguments.length?(u="function"==typeof t?t:r(+t),n):u},n.z=function(t){return arguments.length?(e="function"==typeof t?t:r(+t),n):e},n}function e(){function n(n){var t=n.length,r=n[0].length,u=Array.apply(0,Array(t-1)).map(function(n,t){return Array.apply(0,Array(r-1)).map(function(n,u){var e=u+t*r;return[e,e+r,e+r+1,e+1,e,-1]})}),e=Array.apply(0,Array(t-1)).map(function(n,t){return Array.apply(0,Array(r-1)).map(function(n,u){var e=u+t*r;return[e,e+1,e+r+1,e+r,e,-1]})});return o(u.concat(e))}var t=function(n){return n[0]},u=function(n){return n[1]},e=function(n){return n[2]},c=r("white");return n.coordinates=function(n){var r=n.map(function(n,r){return n.map(function(n,o){return[t(n,r,o),u(n,r,o),e(n,r,o)]})});return o(r)},n.colors=function(n){var t=n.map(function(n,t){return n.map(function(n,r){var u=c(n,t,r);return""+Math.round(u.r/2.55)/100+" "+Math.round(u.g/2.55)/100+" "+Math.round(u.b/2.55)/100})});return o(t)},n.x=function(u){return arguments.length?(t="function"==typeof u?u:r(+u),n):t},n.y=function(t){return arguments.length?(u="function"==typeof t?t:r(+t),n):u},n.z=function(t){return arguments.length?(e="function"==typeof t?t:r(+t),n):e},n.color=function(t){return arguments.length?(c="function"==typeof t?t:r(+t),n):c},n}function o(n){return n.reduce(function(n,t){return n.concat(t)},[]).reduce(function(n,t){return n.concat(t)},[]).join(" ")}var c="0.0.1",f="-0.5,0,-0.4998779296875,0.005615234375,-0.4995880126953125,0.012359619140625,-0.4990234375,0.021484375,-0.4980926513671875,0.032806396484375,-0.4967041015625,0.046142578125,-0.4947662353515625,0.061309814453125,-0.4921875,0.078125,-0.4888763427734375,0.096405029296875,-0.4847412109375,0.115966796875,-0.4796905517578125,0.136627197265625,-0.4736328125,0.158203125,-0.4664764404296875,0.180511474609375,-0.4581298828125,0.203369140625,-0.4485015869140625,0.226593017578125,-0.4375,0.25,-0.4250335693359375,0.273406982421875,-0.4110107421875,0.296630859375,-0.3953399658203125,0.319488525390625,-0.3779296875,0.341796875,-0.3586883544921875,0.363372802734375,-0.3375244140625,0.384033203125,-0.3143463134765625,0.403594970703125,-0.2890625,0.421875,-0.2615814208984375,0.438690185546875,-0.2318115234375,0.453857421875,-0.1996612548828125,0.467193603515625,-0.1650390625,0.478515625,-0.1278533935546875,0.487640380859375,-0.0880126953125,0.494384765625,-0.0454254150390625,0.498565673828125,0,0.5,0.0880126953125,0.494384765625,0.1278533935546875,0.487640380859375,0.1650390625,0.478515625,0.1996612548828125,0.467193603515625,0.2318115234375,0.453857421875,0.2615814208984375,0.438690185546875,0.2890625,0.421875,0.3143463134765625,0.403594970703125,0.3375244140625,0.384033203125,0.3586883544921875,0.363372802734375,0.3779296875,0.341796875,0.3953399658203125,0.319488525390625,0.4110107421875,0.296630859375,0.4250335693359375,0.273406982421875,0.4375,0.25,0.4485015869140625,0.226593017578125,0.4581298828125,0.203369140625,0.4664764404296875,0.180511474609375,0.4736328125,0.158203125,0.4796905517578125,0.136627197265625,0.4847412109375,0.115966796875,0.4888763427734375,0.096405029296875,0.4921875,0.078125,0.4947662353515625,0.061309814453125,0.4967041015625,0.046142578125,0.4980926513671875,0.032806396484375,0.4990234375,0.021484375,0.4995880126953125,0.012359619140625,0.4998779296875,0.005615234375,0.4999847412109375,0.001434326171875,0.5,0,0.4998779296875,-0.005615234375,0.4995880126953125,-0.012359619140625,0.4990234375,-0.021484375,0.4980926513671875,-0.032806396484375,0.4967041015625,-0.046142578125,0.4947662353515625,-0.061309814453125,0.4921875,-0.078125,0.4888763427734375,-0.096405029296875,0.4847412109375,-0.115966796875,0.4796905517578125,-0.136627197265625,0.4736328125,-0.158203125,0.4664764404296875,-0.180511474609375,0.4581298828125,-0.203369140625,0.4485015869140625,-0.226593017578125,0.4375,-0.25,0.4250335693359375,-0.273406982421875,0.4110107421875,-0.296630859375,0.3953399658203125,-0.319488525390625,0.3779296875,-0.341796875,0.3586883544921875,-0.363372802734375,0.3375244140625,-0.384033203125,0.3143463134765625,-0.403594970703125,0.2890625,-0.421875,0.2615814208984375,-0.438690185546875,0.2318115234375,-0.453857421875,0.1996612548828125,-0.467193603515625,0.1650390625,-0.478515625,0.1278533935546875,-0.487640380859375,0.0880126953125,-0.494384765625,0.0454254150390625,-0.498565673828125,0,-0.5,-0.0880126953125,-0.494384765625,-0.1278533935546875,-0.487640380859375,-0.1650390625,-0.478515625,-0.1996612548828125,-0.467193603515625,-0.2318115234375,-0.453857421875,-0.2615814208984375,-0.438690185546875,-0.2890625,-0.421875,-0.3143463134765625,-0.403594970703125,-0.3375244140625,-0.384033203125,-0.3586883544921875,-0.363372802734375,-0.3779296875,-0.341796875,-0.3953399658203125,-0.319488525390625,-0.4110107421875,-0.296630859375,-0.4250335693359375,-0.273406982421875,-0.4375,-0.25,-0.4485015869140625,-0.226593017578125,-0.4581298828125,-0.203369140625,-0.4664764404296875,-0.180511474609375,-0.4736328125,-0.158203125,-0.4796905517578125,-0.136627197265625,-0.4847412109375,-0.115966796875,-0.4888763427734375,-0.096405029296875,-0.4921875,-0.078125,-0.4947662353515625,-0.061309814453125,-0.4967041015625,-0.046142578125,-0.4980926513671875,-0.032806396484375,-0.4990234375,-0.021484375,-0.4995880126953125,-0.012359619140625,-0.4998779296875,-0.005615234375,-0.4999847412109375,-0.001434326171875,-0.5,0";n.version=c,n.makeSolid=t,n.line=u,n.surface=e});

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="http://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="http://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>

thumbnail.png