Published
Edited
Jun 25, 2019
1 fork
6 stars
Blender RendersBumpy EarthScansGlobe.glThree.js - Transparent ObjectsThree.js - wooden bar chart3D Pie Chart 😈deck.gl Country Layersclx. Hello, 3D geographic terrains!clx. Hello, 3D geographic contours!3D bar chart portPopulation density in Georgiaclx. deck.gl GeoJsonLayer ExampleRealty Property Transactions in Georgiaclx. Deckgl HexagonLayerEmigration - Georgia (Country)clx. BikeTown PDXclx. Webgl Globe3d Area chart - three.jsclx. Spinnable planetsPorting d3-3d scatterplot examplePorting 3d-force-graph rotation exampleclx. Porting spherical coordinatesclx. Porting 3D Wireframe from OBJ FileThree.js Basics
clx. porting 3D Scatter Plot Using three.js
Also listed in…
Visualizations
renderer = {
var rend = new THREE.WebGLRenderer({
antialias: true
});
rend.setSize(w, h);
rend.setClearColor(0xEEEEEE, 1.0);
yield rend;
}
w = 960
h = 500
body = {
var camera = new THREE.PerspectiveCamera(45, w / h, 1, 10000);
camera.position.z = 200;
camera.position.x = -100;
camera.position.y = 100;
var scene = new THREE.Scene();
var scatterPlot = new THREE.Object3D();
scene.add(scatterPlot);
scatterPlot.rotation.y = 0;
function v(x, y, z) {
return new THREE.Vector3(x, y, z);
}
var unfiltered = [],
lowPass = [],
highPass = [];
var format = d3.format("+.3f");
var data = d3.csv("https://gist.githubusercontent.com/anonymous/229589e2e98139ef6b957bd5128711aa/raw/6f508353d77be60946b0db5ff1a53fb62a46d7c4/defaultData.csv", function (d) {
d.forEach(function (d,i) {
unfiltered[i] = {
x: +d.x,
y: +d.y,
z: +d.z
};
lowPass[i] = {
x: +d.lp_x,
y: +d.lp_y,
z: +d.lp_z
};
highPass[i] = {
x: +d.hp_x,
y: +d.hp_y,
z: +d.hp_z
}
})
var xExent = d3.extent(unfiltered, function (d) {return d.x; }),
yExent = d3.extent(unfiltered, function (d) {return d.y; }),
zExent = d3.extent(unfiltered, function (d) {return d.z; });
var vpts = {
xMax: xExent[1],
xCen: (xExent[1] + xExent[0]) / 2,
xMin: xExent[0],
yMax: yExent[1],
yCen: (yExent[1] + yExent[0]) / 2,
yMin: yExent[0],
zMax: zExent[1],
zCen: (zExent[1] + zExent[0]) / 2,
zMin: zExent[0]
}
var colour = d3.scale.category20c();
var xScale = d3.scale.linear()
.domain(xExent)
.range([-50,50]);
var yScale = d3.scale.linear()
.domain(yExent)
.range([-50,50]);
var zScale = d3.scale.linear()
.domain(zExent)
.range([-50,50]);
var lineGeo = new THREE.Geometry();
lineGeo.vertices.push(
v(xScale(vpts.xMin), yScale(vpts.yCen), zScale(vpts.zCen)), v(xScale(vpts.xMax), yScale(vpts.yCen), zScale(vpts.zCen)),
v(xScale(vpts.xCen), yScale(vpts.yMin), zScale(vpts.zCen)), v(xScale(vpts.xCen), yScale(vpts.yMax), zScale(vpts.zCen)),
v(xScale(vpts.xCen), yScale(vpts.yCen), zScale(vpts.zMax)), v(xScale(vpts.xCen), yScale(vpts.yCen), zScale(vpts.zMin)),
v(xScale(vpts.xMin), yScale(vpts.yMax), zScale(vpts.zMin)), v(xScale(vpts.xMax), yScale(vpts.yMax), zScale(vpts.zMin)),
v(xScale(vpts.xMin), yScale(vpts.yMin), zScale(vpts.zMin)), v(xScale(vpts.xMax), yScale(vpts.yMin), zScale(vpts.zMin)),
v(xScale(vpts.xMin), yScale(vpts.yMax), zScale(vpts.zMax)), v(xScale(vpts.xMax), yScale(vpts.yMax), zScale(vpts.zMax)),
v(xScale(vpts.xMin), yScale(vpts.yMin), zScale(vpts.zMax)), v(xScale(vpts.xMax), yScale(vpts.yMin), zScale(vpts.zMax)),
v(xScale(vpts.xMin), yScale(vpts.yCen), zScale(vpts.zMax)), v(xScale(vpts.xMax), yScale(vpts.yCen), zScale(vpts.zMax)),
v(xScale(vpts.xMin), yScale(vpts.yCen), zScale(vpts.zMin)), v(xScale(vpts.xMax), yScale(vpts.yCen), zScale(vpts.zMin)),
v(xScale(vpts.xMin), yScale(vpts.yMax), zScale(vpts.zCen)), v(xScale(vpts.xMax), yScale(vpts.yMax), zScale(vpts.zCen)),
v(xScale(vpts.xMin), yScale(vpts.yMin), zScale(vpts.zCen)), v(xScale(vpts.xMax), yScale(vpts.yMin), zScale(vpts.zCen)),
v(xScale(vpts.xMax), yScale(vpts.yMin), zScale(vpts.zMin)), v(xScale(vpts.xMax), yScale(vpts.yMax), zScale(vpts.zMin)),
v(xScale(vpts.xMin), yScale(vpts.yMin), zScale(vpts.zMin)), v(xScale(vpts.xMin), yScale(vpts.yMax), zScale(vpts.zMin)),
v(xScale(vpts.xMax), yScale(vpts.yMin), zScale(vpts.zMax)), v(xScale(vpts.xMax), yScale(vpts.yMax), zScale(vpts.zMax)),
v(xScale(vpts.xMin), yScale(vpts.yMin), zScale(vpts.zMax)), v(xScale(vpts.xMin), yScale(vpts.yMax), zScale(vpts.zMax)),
v(xScale(vpts.xCen), yScale(vpts.yMin), zScale(vpts.zMax)), v(xScale(vpts.xCen), yScale(vpts.yMax), zScale(vpts.zMax)),
v(xScale(vpts.xCen), yScale(vpts.yMin), zScale(vpts.zMin)), v(xScale(vpts.xCen), yScale(vpts.yMax), zScale(vpts.zMin)),
v(xScale(vpts.xMax), yScale(vpts.yMin), zScale(vpts.zCen)), v(xScale(vpts.xMax), yScale(vpts.yMax), zScale(vpts.zCen)),
v(xScale(vpts.xMin), yScale(vpts.yMin), zScale(vpts.zCen)), v(xScale(vpts.xMin), yScale(vpts.yMax), zScale(vpts.zCen)),
v(xScale(vpts.xMax), yScale(vpts.yMax), zScale(vpts.zMin)), v(xScale(vpts.xMax), yScale(vpts.yMax), zScale(vpts.zMax)),
v(xScale(vpts.xMax), yScale(vpts.yMin), zScale(vpts.zMin)), v(xScale(vpts.xMax), yScale(vpts.yMin), zScale(vpts.zMax)),
v(xScale(vpts.xMin), yScale(vpts.yMax), zScale(vpts.zMin)), v(xScale(vpts.xMin), yScale(vpts.yMax), zScale(vpts.zMax)),
v(xScale(vpts.xMin), yScale(vpts.yMin), zScale(vpts.zMin)), v(xScale(vpts.xMin), yScale(vpts.yMin), zScale(vpts.zMax)),
v(xScale(vpts.xMin), yScale(vpts.yCen), zScale(vpts.zMin)), v(xScale(vpts.xMin), yScale(vpts.yCen), zScale(vpts.zMax)),
v(xScale(vpts.xMax), yScale(vpts.yCen), zScale(vpts.zMin)), v(xScale(vpts.xMax), yScale(vpts.yCen), zScale(vpts.zMax)),
v(xScale(vpts.xCen), yScale(vpts.yMax), zScale(vpts.zMin)), v(xScale(vpts.xCen), yScale(vpts.yMax), zScale(vpts.zMin)),
v(xScale(vpts.xCen), yScale(vpts.yMin), zScale(vpts.zMin)), v(xScale(vpts.xCen), yScale(vpts.yMin), zScale(vpts.zMax))
);
var lineMat = new THREE.LineBasicMaterial({
color: 0x000000,
lineWidth: 1
});
var line = new THREE.Line(lineGeo, lineMat);
line.type = THREE.Lines;
scatterPlot.add(line);
var titleX = createText2D('-X');
titleX.position.x = xScale(vpts.xMin) - 12,
titleX.position.y = 5;
scatterPlot.add(titleX);
var valueX = createText2D(format(xExent[0]));
valueX.position.x = xScale(vpts.xMin) - 12,
valueX.position.y = -5;
scatterPlot.add(valueX);
var titleX = createText2D('X');
titleX.position.x = xScale(vpts.xMax) + 12;
titleX.position.y = 5;
scatterPlot.add(titleX);
var valueX = createText2D(format(xExent[1]));
valueX.position.x = xScale(vpts.xMax) + 12,
valueX.position.y = -5;
scatterPlot.add(valueX);
var titleY = createText2D('-Y');
titleY.position.y = yScale(vpts.yMin) - 5;
scatterPlot.add(titleY);
var valueY = createText2D(format(yExent[0]));
valueY.position.y = yScale(vpts.yMin) - 15,
scatterPlot.add(valueY);
var titleY = createText2D('Y');
titleY.position.y = yScale(vpts.yMax) + 15;
scatterPlot.add(titleY);
var valueY = createText2D(format(yExent[1]));
valueY.position.y = yScale(vpts.yMax) + 5,
scatterPlot.add(valueY);
var titleZ = createText2D('-Z ' + format(zExent[0]));
titleZ.position.z = zScale(vpts.zMin) + 2;
scatterPlot.add(titleZ);
var titleZ = createText2D('Z ' + format(zExent[1]));
titleZ.position.z = zScale(vpts.zMax) + 2;
scatterPlot.add(titleZ);
var mat = new THREE.ParticleBasicMaterial({
vertexColors: true,
size: 10
});
var pointCount = unfiltered.length;
var pointGeo = new THREE.Geometry();
for (var i = 0; i < pointCount; i ++) {
var x = xScale(unfiltered[i].x);
var y = yScale(unfiltered[i].y);
var z = zScale(unfiltered[i].z);
pointGeo.vertices.push(new THREE.Vector3(x, y, z));
console.log(pointGeo.vertices);
//pointGeo.vertices[i].angle = Math.atan2(z, x);
//pointGeo.vertices[i].radius = Math.sqrt(x * x + z * z);
//pointGeo.vertices[i].speed = (z / 100) * (x / 100);
pointGeo.colors.push(new THREE.Color().setRGB(
hexToRgb(colour(i)).r / 255, hexToRgb(colour(i)).g / 255, hexToRgb(colour(i)).b / 255
));
}
var points = new THREE.ParticleSystem(pointGeo, mat);
scatterPlot.add(points);
debugger;
renderer.render(scene, camera);
var paused = false;
var last = new Date().getTime();
var down = false;
var sx = 0,
sy = 0;
window.onmousedown = function(ev) {
down = true;
sx = ev.clientX;
sy = ev.clientY;
};
window.onmouseup = function() {
down = false;
};
window.onmousemove = function(ev) {
if (down) {
var dx = ev.clientX - sx;
var dy = ev.clientY - sy;
scatterPlot.rotation.y += dx * 0.01;
camera.position.y += dy;
sx += dx;
sy += dy;
}
}
var animating = false;
window.ondblclick = function() {
animating = !animating;
};
function animate(t) {
if (!paused) {
last = t;
if (animating) {
var v = pointGeo.vertices;
for (var i = 0; i < v.length; i++) {
var u = v[i];
console.log(u)
u.angle += u.speed * 0.01;
u.x = Math.cos(u.angle) * u.radius;
u.z = Math.sin(u.angle) * u.radius;
}
pointGeo.__dirtyVertices = true;
}
renderer.clear();
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
window.requestAnimationFrame(animate, renderer.domElement);
};
animate(new Date().getTime());
})
}
function v(x, y, z) {
return new THREE.Vector3(x, y, z);
}
function hexToRgb(hex) { //TODO rewrite with vector output
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
THREE = {
const THREE = await require("three@0.90.0/build/three.min.js")//@0.82.1/build/three.min.js");
if (!THREE.OrbitControls) { // If not previously loaded.
const module = window.module = { exports: undefined };
THREE.OrbitControls = await require('https://bundle.run/three-orbitcontrols@2.102.1');
}
return THREE;
}
function createText2D(text, color, font, size, segW, segH) {
var canvas = createTextCanvas(text, color, font, size);
var plane = new THREE.PlaneGeometry(canvas.width, canvas.height, segW, segH);
var tex = new THREE.Texture(canvas);
tex.needsUpdate = true;
var planeMat = new THREE.MeshBasicMaterial({
map: tex,
color: 0xffffff,
transparent: true
});
var mesh = new THREE.Mesh(plane, planeMat);
mesh.scale.set(0.5, 0.5, 0.5);
mesh.doubleSided = true;
return mesh;
}
function createTextCanvas(text, color, font, size) {
size = size || 16;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var fontStr = (size + 'px ') + (font || 'Arial');
ctx.font = fontStr;
var w = ctx.measureText(text).width;
var h = Math.ceil(size);
canvas.width = w;
canvas.height = h;
ctx.font = fontStr;
ctx.fillStyle = color || 'black';
ctx.fillText(text, 0, Math.ceil(size * 0.8));
return canvas;
}
d3 = require('d3@v3')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.