d3 x3dom scatter

Demo for d3-x3dom-axis

Built with blockbuilder.org

forked from fabid's block: d3 x3dom axes

forked from fabid's block: d3 x3dom scatter

forked from hrishikesh91's block: d3 x3dom scatter

<!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.28.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>
  var makeSolid =  function(selection, color) {
  	selection.append("appearance").append("material").attr("diffuseColor", color || 	"black");
  	return selection;
	}

var width = 800, height = 400;
	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 x = d3.scaleLinear().domain([0, 2]).range([0, 107]);
  var y = d3.scaleLinear().domain([0, 10]).range([0, 126]);
  var z = d3.scaleLinear().range([0, 40]);
  var xAxis = d3_x3dom_axis.x3domAxis('x', 'z', x).tickSize(z.range()[1] - z.range()[0]).tickPadding(y.range()[0]);;
  var yAxis = d3_x3dom_axis.x3domAxis('y', 'z', y).tickSize(z.range()[1] - z.range()[0]);
  var yAxis2 = d3_x3dom_axis.x3domAxis('y', 'x', y).tickSize(x.range()[1] - x.range()[0]).tickFormat(function(d){return ''});
  var zAxis = d3_x3dom_axis.x3domAxis('z', 'x', y).tickSize(x.range()[1] - x.range()[0]);

var scene = x3d.append("scene");
	var view_pos = [80, 16, 80];
	var fov = 1;
	var view_or = [0, 1,0, .8];
	scene.append("viewpoint")
  	.attr("position", view_pos.join(" "))
  	.attr("orientation", view_or.join(" "))
  	.attr("fieldOfView", fov);

scene.append('group')
  	.attr('class', 'xAxis')
  	.call(xAxis)
  	.select('.domain').call(makeSolid, 'blue');
  scene.append('group')
  	.attr('class', 'yAxis')
  	.call(yAxis)
  	.select('.domain').call(makeSolid, 'red');
  scene.append('group')
  	.attr('class', 'yAxis')
  	.call(yAxis2)
  	.select('.domain').call(makeSolid, 'red');
  scene.append('group')
  	.attr('class', 'zAxis')
  	.call(zAxis)
  	.select('.domain');

</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.28.min.js