Published
Edited
Jul 3, 2019
Importers
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 Globeclx. Spinnable planetsPorting d3-3d scatterplot examplePorting 3d-force-graph rotation exampleclx. Porting spherical coordinatesclx. porting 3D Scatter Plot Using three.jsclx. Porting 3D Wireframe from OBJ FileThree.js Basics
3d Area chart - three.js
stats.domElement
area = {
render();
yield glRenderer.domElement
}
windowWidth = width
windowHeight = 500
graphDimensions = Object.assign({
w:1000,
d:2405,
h:800
})
vFOVRadians = 2 * Math.atan(windowWidth/2*1500)
fov=40
startPosition = new THREE.Vector3(0,0,3000)
camera ={
const cam = new THREE.PerspectiveCamera(fov,windowWidth/windowHeight,1,30000);
cam.position.set(startPosition.x,startPosition.y,startPosition.z);
return cam;
}
controls = {
const con = new THREE.OrbitControls(camera,glRenderer.domElement);
con.damping = 0.2;
con.addEventListener('change',render);
return con;
}
light = {
const lght = new THREE.DirectionalLight( 0xffffff) ;
lght.position.set( 0, 0, 1 );
return lght;
}
canvas = {
const cnvts = document.createElement('canvas') ;
cnvts.width = 128;
cnvts.height = 128;
return cnvts;
}
context = canvas.getContext('2d')
boundingGrid = {
const bg = new THREE.Object3D()
bg.add(newGridXY);
bg.add(newGridYZ);
bg.add(newGridXZ);
return bg;
}
glScene = {
const scene = new THREE.Scene();
scene.add(light);
scene.add(boundingGrid)
for(const line in lines){
if(line =='-500'){
const graphLine = new THREE.Line(lines[line],blacklineMat)
}else{
var graphLine = new THREE.Line(lines[line],lineMat)
}
graphLine.rotation.x = - Math.PI/2;
graphLine.position.y = -graphDimensions.h/2;
graphLine.rotation.z = Math.PI/2;
scene.add(graphLine);
}
scene.add(floor);
return scene;
}
depth = graphDimensions.w/2
widthDim = graphDimensions.d/2
height = graphDimensions.h/2
a =data.labels.y.length
b =data.labels.x.length
c =data.labels.z.length
newGridXY = {
const grid = createAGrid({
height:widthDim,
width:height,
linesHeight:b,
linesWidth:a,
//color:0xcccccc
color:'blue'
});
grid.position.z = -depth;
return grid;
}
newGridYZ = {
const grid = createAGrid({
height:widthDim,
width:depth,
linesHeight:b,
linesWidth:c,
color:'red'
});
grid.rotation.x = Math.PI/2;
grid.position.y = -height;
return grid;
}
newGridXZ = {
const grid = createAGrid({
height:depth,
width:height,
linesHeight:c,
linesWidth:a,
color:'green'
});
grid.position.x =widthDim;
grid.rotation.y = Math.PI/2;
return grid;
}
glRenderer = {
const glr = new THREE.WebGLRenderer();
glr.setPixelRatio(window.devicePixelRatio);
glr.setClearColor(0xf0f0f0);
glr.setSize(windowWidth,windowHeight);
return glr;
}
stats = {
const st = new Stats();
st.domElement.style.position = 'absolute';
st.domElement.style.bottom = '10px';
st.domElement.style.left= '10px';
return st;
}
function animate(){
requestAnimationFrame(animate) ;
controls.update()
}
render = function(){
camera.lookAt(glScene.position);
glRenderer.render(glScene,camera);
stats.update();
}
data = Object.assign({
labels: {
y: ["2%", "4%", "6%", "8%"],
x: ['', "\'14","\'13","\'12","\'11","\'10","\'09","\'08","\'07","\'06","\'05"],
z: ["1-month","3-month","6-month","1-year","2-year","3-year","5-year","7-year","10-year", "20-year","30-year"]
}
})
realData = {
return fetch('https://raw.githubusercontent.com/deathbearbrown/learning-three-js-blogpost/master/js/2005-2015.json')
.then(d=> d.json())
}
function createAGrid(opts){
const config = opts || {
height: 500,
width: 500,
linesHeight: 10,
linesWidth: 10,
color: 0xDD006C
};
const material = new THREE.LineBasicMaterial({
color: config.color,
opacity: 0.2
});
const stepw = 2* config.width/config.linesWidth;
const steph = 2 * config.height/config.linesHeight;
const gridGeo = new THREE.Geometry();
const gridObject = new THREE.Object3D();
gridGeo.vertices.push(new THREE.Vector3(config.height,100,0));
gridGeo.vertices.push(new THREE.Vector3(-config.height,100,0));
for(var i=-config.width;i<=config.width;i+=stepw){
gridGeo.vertices.push(new THREE.Vector3(-config.height,i,0));
gridGeo.vertices.push(new THREE.Vector3(config.height,i,0));
}
for(var i=-config.height;i<=config.height;i+=steph){
gridGeo.vertices.push(new THREE.Vector3(i,-config.width,0));
gridGeo.vertices.push(new THREE.Vector3(i,config.width,0));
}
const line = new THREE.Line(gridGeo,material,THREE.LinePiece);
gridObject.add(line);
return gridObject;
}
function labelAxis(width,data,direction){
const separator = 2 * width/data.length;
const p = {
x:0,y:0,z:0
}
const dobj = new THREE.Object3D();
for( let i=0;i<data.length;i++){
// const label = makeTextSprite(data[i]);
}
}
makeTextSprite = function(message, parameters){
if(parameters == undefined) parameters={};
var fontface = parameters['fontface'] || "Helvetica";
var fontsize = parameters['fontsize']|| 70;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = fontsize+"px "+fontface;
// get size data
var metrics = context.measureText(message);
var textWidth = metrics.width;
// text color
context.fillStyle = 'rgba(0,0,0,1)';
context.filltext(message,0, fontsize);
}
wireframedmaterial = new THREE.MeshBasicMaterial({
side:THREE.DoubleSide ,
vertexColors:THREE.VertexColors
})
lineMat = new THREE.LineBasicMaterial({color:0xffffff})
blacklineMat = new THREE.LineBasicMaterial({color:0x000000})
floorGeometry = floorGeometry_facecolors_lines.floorGeometry
colors = ["#eef4f8","#ddecf4","#cce5f0","#bcddec","#aed5e7","#a0cde2","#94c5dc","#89bcd6","#7eb4d0","#74abc9","#6aa2c2","#619abb","#5892b4","#4f8aad","#4781a6","#3f799f","#3a7195","#35688c","#326082","#2f5877","#2c506c","#243d52"]
faceColors = floorGeometry_facecolors_lines.faceColors
lines = floorGeometry_facecolors_lines.lines
floorGeometry_facecolors_lines = {
var result = {
faceColors:[],
lines:{},
floorGeometry:new THREE.PlaneGeometry(graphDimensions.w,graphDimensions.d,10,2405)
}
const faceColors = result.faceColors;
const lines = result.lines;
const floorGeometry = result.floorGeometry;
for(var i=0;i<floorGeometry.vertices.length;i++){
faceColors.push(colors[Math.round(realData[i][2]*4)]);
if(realData[i][2]==null){
//hack - says original author
floorGeometry.vertices[i].z='null';
}else{
floorGeometry.vertices[i].z = realData[i][2]*100;
if(!lines[floorGeometry.vertices[i].x]){
lines[floorGeometry.vertices[i].x] = new THREE.Geometry();
}
lines[floorGeometry.vertices[i].x].vertices.push(new THREE.Vector3(
floorGeometry.vertices[i].x,
floorGeometry.vertices[i].y,
realData[i][2]*100
))
}
}
for(var x=0;x<floorGeometry.faces.length;x++){
floorGeometry.faces[x].vertexColors[0] = new THREE.Color(faceColors[floorGeometry.faces[x].a])
floorGeometry.faces[x].vertexColors[1] = new THREE.Color(faceColors[floorGeometry.faces[x].b])
floorGeometry.faces[x].vertexColors[2] = new THREE.Color(faceColors[floorGeometry.faces[x].c])
}
return result;
}
floor = {
const f = new THREE.Mesh(floorGeometry)
f.rotation.x = -Math.PI/2;
f.position.y = -graphDimensions.h/2;
f.rotation.z = Math.PI/2
return f
}
THREEJS = require('three')
import {requireFromGithub} from '@bumbeishvili/fetcher'
THREE = OrbitControls
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.