Skip to content

Instantly share code, notes, and snippets.

@Niekes

Niekes/.block

Last active February 6, 2018 06:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Niekes/d8007a5f71f45ab80a2977a8eb7ab3c9 to your computer and use it in GitHub Desktop.
Save Niekes/d8007a5f71f45ab80a2977a8eb7ab3c9 to your computer and use it in GitHub Desktop.
Download ZIP
d3-3d: 3D Point Cloud
Raw
.block
license: gpl-3.0
Raw
README.md

Another test of my 3D Plugin d3-3d for D3.js.

Raw
d3-3d.js
!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(t.d3=t.d3||{})}(this,function(t){"use strict";function r(t,r,e,n){var o=Math.cos(r),u=Math.sin(r),a=Math.cos(e),d=Math.sin(e),c=Math.cos(n),i=Math.sin(n),f=o*d*i-u*c,p=o*d*c+u*i,y=u*a,x=u*d*i+o*c,h=u*d*c-o*i,s=-d,z=a*i,j=a*c;return{x:o*a*t.x+f*-t.y+p*t.z,y:y*t.x+x*-t.y+h*t.z,z:s*t.x+z*-t.y+j*t.z}}function e(t,r,e,n,o){return r===x.ortho?{x:e[0]+n*t.x,y:e[1]+n*t.y}:r===x.persp?{x:e[0]+n*t.x/(t.z+o),y:e[1]+n*t.y/(t.z+o)}:void 0}function n(t,n,o,u,a,d,c,i){for(var f=t.length-1;f>=0;f--){var p=t[f];p.rotated=r({x:p.x,y:p.y,z:p.z},o,u,a),p.projected=e(p.rotated,n,d,c,i)}return t}function o(t,n,o,u,a,d,c,i){for(var f=t.length-1;f>=0;f--){var p=t[f],y=p[0],x=p[1];y.rotated=r({x:y.x,y:y.y,z:y.z},o,u,a),x.rotated=r({x:x.x,y:x.y,z:x.z},o,u,a),y.projected=e(y.rotated,n,d,c,i),x.projected=e(x.rotated,n,d,c,i),p.lng=Math.sqrt(Math.pow(x.rotated.x-y.rotated.x,2)+Math.pow(x.rotated.y-y.rotated.y,2)+Math.pow(x.rotated.z-y.rotated.z,2)),p.midPoint={x:(y.x+x.x)/2,y:(y.y+x.y)/2,z:(y.z+x.z)/2}}return t}function u(t,r,e,n,o,u,a,d){for(var c=t.length-1;c>=0;c--);return t}function a(t,r,e,n,o,u,a,d){for(var c=t.length-1;c>=0;c--);return t}function d(t,n,o,u,a,d,c,i){for(var f=t.length-1;f>=0;f--){var p=t[f],y=p[0],x=p[1],h=p[2];y.rotated=r({x:y.x,y:y.y,z:y.z},o,u,a),x.rotated=r({x:x.x,y:x.y,z:x.z},o,u,a),h.rotated=r({x:h.x,y:h.y,z:h.z},o,u,a),y.projected=e(y.rotated,n,d,c,i),x.projected=e(x.rotated,n,d,c,i),h.projected=e(h.rotated,n,d,c,i),p.area=1}return t}function c(t,r,e,n,o,u,a,d){for(var c=t.length-1;c>=0;c--);return t}function i(t,r,e,n,o,u,a,d){for(var c=t.length-1;c>=0;c--);return t}function f(t){return"M"+t.projected.x+","+t.projected.y+"m"+-t.radius+",0a"+t.radius+","+t.radius+",0,1,1,"+2*t.radius+",0a"+t.radius+","+t.radius+",0,1,1,-"+2*t.radius+",0"}function p(t){return"M"+t[0].projected.x+","+t[0].projected.y+"L"+t[1].projected.x+","+t[1].projected.y}function y(t){return"M"+t[0].projected.x+","+t[0].projected.y+"L"+t[1].projected.x+","+t[1].projected.y+"L"+t[2].projected.x+","+t[2].projected.y}var x={ortho:"ortho",persp:"persp"},h=function(){function t(t){return M[v](t,e,j,l,g,h,s,z)}var r=x.ortho,e=(x.persp,r),h=[0,0],s=1,z=1,j=0,l=0,g=0,v="POINTS",M={POINTS:n,LINES:o,LINES_LOOP:u,LINES_STRIP:a,TRIANGLES:d,TRIANGLES_STRIP:c,TRIANGLES_FAN:i},I={POINTS:f,LINES:p,TRIANGLES:y};return t.projection=function(r){return arguments.length?(e=r,t):e},t.origin=function(r){return arguments.length?(h=r,t):h},t.scale=function(r){return arguments.length?(s=r,t):s},t.distance=function(r){return arguments.length?(z=r,t):z},t.rotateZ=function(r){return arguments.length?(j=r,t):j},t.rotateY=function(r){return arguments.length?(l=r,t):l},t.rotateX=function(r){return arguments.length?(g=r,t):g},t.primitiveType=function(r){return arguments.length?(v=r,t):v},t.draw=function(t){return I[v](t)},t};t._3d=h,Object.defineProperty(t,"__esModule",{value:!0})});
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-3d.js"></script>
<body>
<svg width="960" height="500"></svg>
<script>
var data = [], min = max = 50;
var origin = [480, 250], startAngle = Math.PI/8, beta = startAngle;
var svg = d3.select('svg').call(d3.drag().on('drag', dragged).on('start', dragStart).on('end', dragEnd)).append('g');
var color = d3.scaleOrdinal(d3.schemeCategory10);
var rn = function(min, max){ return Math.round(d3.randomUniform(min, max + 1)()); };
var mx, mouseX;
for (var i = 300; i >= 0; i--) {
data.push({
x: rn(-min, max),
y: rn(-min, max),
z: rn(-min, max)
});
}
var _3d = d3._3d()
.scale(5)
.origin(origin)
.rotateX(startAngle)
.rotateY(startAngle)
.primitiveType('POINTS');
var data3D = _3d(data);
var extentZ = d3.extent(data3D, function(d){ return d.rotated.z });
var zScale = d3.scaleLinear().domain([extentZ[1]+10, extentZ[0]-10]).range([1, 8]);
function dragStart(){
mx = d3.event.x;
}
function dragged(){
mouseX = mouseX || 0;
beta = (d3.event.x - mx + mouseX) * Math.PI / 360 * (-1);
processData(_3d.rotateY(beta + startAngle)(data));
}
function dragEnd(){
mouseX = d3.event.x - mx + mouseX;
}
function processData(data){
var points = svg.selectAll('circle').data(data);
points
.enter()
.append('circle')
.merge(points)
.attr('fill', function(d, i){ return color(i); })
.attr('stroke', function(d, i){ return d3.color(color(i)).darker(0.5); })
.sort(function(a, b){ return d3.descending(a.rotated.z, b.rotated.z); })
.attr('cx', function(d){ return d.projected.x; })
.attr('cy', function(d){ return d.projected.y; })
.attr('r' , function(d){ return zScale(d.rotated.z); });
points.exit().remove();
}
processData(data3D);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment