Skip to content

Instantly share code, notes, and snippets.

@pstuffa

pstuffa/.block

Last active December 3, 2017 22:30
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 pstuffa/15b4494aba8176f3af6afa7170716403 to your computer and use it in GitHub Desktop.
Save pstuffa/15b4494aba8176f3af6afa7170716403 to your computer and use it in GitHub Desktop.
Download ZIP
Twirl
Raw
.block
license: gpl-3.0
Raw
README.md
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>
<style>
body {
background: #ffab00 !important;
font-family: "Helvetica Neue", Arial;
font-weight: 100;
font-size: 50px;
}
</style>
<body>
<svg ></svg>
<script>
var data = []
, min = max = 50
, n = 400
, width = window.innerWidth
, height = window.innerHeight
, origin = [width/2, height/4]
, startAngle = Math.PI / 9
, beta = startAngle;
var svg = d3.select('svg')
.attr("width", width)
.attr("height", height)
.append('g');
var color = d3.scaleOrdinal()
.range(["#007f7e", "#ffab00", "#ff6500", "#018d73", "#ff4700"])
var rn = function(min, max){ return Math.round(d3.randomNormal(min, max + 1)()); };
var mx, mouseX;
data = createData(n);
function createData(n) {
var startData = []
for (var i = n; i >= 0; i--) {
startData.push({
x: rn(-min, max),
y: rn(-min, max),
z: rn(-min, max)
});
}
return startData;
}
var _3d = d3._3d()
.scale(2)
.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]);
d3.interval(function(elapsed) {
beta = elapsed / 800 * -1;
processData(_3d.rotateY(beta + startAngle)(data));
processData(_3d.rotateZ(beta + startAngle)(data));
}, 1)
function processData(data){
var points = svg.selectAll('circle').data(data, function(d, i) { return i});
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); })
.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); })
.on("mouseenter", function() {
d3.select(this)
.transition()
.duration(5000)
.ease(d3.easeElastic)
.attr("r", function() { return 100*Math.random() })
.style("stroke-dasharray", "2, 3, 4, 5, 6")
.transition()
.duration(1000)
.ease(d3.easeLinear)
.style("stroke-dasharray", "4, 5, 6, 7, 8")
.style("opacity", .01)
.duration(1000)
.transition().remove()
})
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