Skip to content

Instantly share code, notes, and snippets.

@trinary

trinary/README.md

Last active November 8, 2015 23:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save trinary/da5fe39eac5eed0cb60a to your computer and use it in GitHub Desktop.
Save trinary/da5fe39eac5eed0cb60a to your computer and use it in GitHub Desktop.
Download ZIP
x3dom + d3
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
</head>
<body>
<script>
(function() {
var width = 960, height = 540, n = 10, max = 100;
var x3d = d3.select("body").append("x3d")
.attr("width", width)
.attr("height", height);
var scene = x3d.append("scene");
var dataScale = d3.scale.linear().domain([0,1]).range([0,max]);
var x = d3.scale.linear().domain([0,n]).range([-5, 5]);
var y = d3.scale.linear().domain([0,100]).range([0.01, 5]);
var data = d3.range(n).map((i) => dataScale(Math.random()));
var shapes = scene.selectAll("transform")
.data(data)
.enter()
.append("transform")
.attr("translation", (d, i) => `${x(i)} ${ y(d)/2} 0` )
.append("shape");
shapes.append("appearance")
.append("material")
.attr("diffuseColor", "0.2 0.2 0.8");
shapes.append("box")
.attr("size", (d,i) => `0.2 ${y(d)} 0.2`);
}());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment