Published
Edited
Jul 3, 2019
Importers
6 stars
Network Data VisualizationBrainBrowser - Volume ViewerBrainBrowser - Volume Viewer ColoredBrainBrowser - Surface ViewerSimple stacked bar chartUS Map - State Grid - Metro transitions on canvasBumpy EarthHeatmap GridScatterPlotD3 V7 Org Chart - last updated at 2022 AugD3 v6 force graph with natural drag attractionCollapsible radial dendrogramSimple d3.v6 TimelinePolygon Over MapboxSingle row bar with labelsArea & Line chartData driven range sliderThree.js - wooden bar chartd3.v5 Org Chart - last updated at Jun 20223D Pie Chart 😈GDP SimulationInchlibData driven range slidersdeck.gl Country Layers3D bar chart portclx. porting 3D Scatter Plot Using three.jsclx. Porting spherical coordinatesPorting 3d-force-graph rotation examplePorting d3-3d scatterplot exampleclx. Spinnable planetsPopulation density in Georgiaclx. deck.gl GeoJsonLayer ExampleRealty Property Transactions in Georgiaclx. Deckgl HexagonLayerEmigration - Georgia (Country)D3 + Rough + Indie Flower
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
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
