Published
Edited
May 12, 2019
2 forks
15 stars
data = [
{id:"BRA",color:'red',value:2},
{id:"MOZ",color:'green',value:0.8},
{id:"DEU",color:'yellow',value:1.2},
{id:"GEO",color:'green',value:0.8},
{id:"CHN",color:'red',value:2}
]
{ restartScenesCube;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 65, 1, 0.6, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 300, 300 );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 'green' } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 2;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
yield renderer.domElement
}
{
restartScenesLineDefault;
{
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 48, 1, 0.6, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 300, 300 );
camera.position.set(0,0,100);
camera.lookAt(new THREE.Vector3(0,0,0))
var geometry = new THREE.Geometry( 1, 1, 1 );
geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );
//geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
var material = new THREE.LineBasicMaterial( { color: 'blue' } );
var line = new THREE.Line( geometry, material );
scene.add( line );
camera.position.z = 52;
var animate = function () {
requestAnimationFrame( animate );
//line.rotation.x += 0.01;
line.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
yield renderer.domElement
}
}
{
restartScenesLineChallengeDataviz;
{
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 48, 1, 0.6, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 300, 300 );
camera.position.set(0,0,100);
camera.lookAt(new THREE.Vector3(0,0,0))
var material = new THREE.LineBasicMaterial( { color: 'pink' } );
var lines = [];
var total = 500;
var geometry = new THREE.Geometry( 1, 1, 1 );
data.forEach((point,i)=>{
geometry.vertices.push(new THREE.Vector3( i*10-20, point.value * 10-10, 0) );
})
var line = new THREE.Line( geometry, material );
lines.push(line);
scene.add( line );
camera.position.z = 52;
var animate = function () {
requestAnimationFrame( animate );
line.rotation.y += 0.001;
renderer.render( scene, camera );
};
animate();
const controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
yield renderer.domElement
}
}
{ restartScenesText;
{
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, 1, 0.6, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 300, 300 );
camera.position.set(0,0,100);
var loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json',function (font){
var message = "Hello three!";
var matLite = new THREE.MeshBasicMaterial({
color:'blue',
transparent:true,
opacity:0.8,
side:THREE.DoubleSide
})
var shapes = font.generateShapes(message,20);
var geometry = new THREE.ShapeBufferGeometry(shapes)
.translate( -70, 0, 0 );
var text = new THREE.Mesh( geometry, matLite );
text.position.z = -150;
scene.add( text );
animate();
});
camera.position.z = 40;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
yield renderer.domElement
}
}
GLTFLoader = requireFromGithub('https://gist.githubusercontent.com/bumbeishvili/56e34b4f943392e4fcc474c7d8a3c040/raw/061cca62e27276388de245d5e6bbd36d71506375/gltfloader.js','GLTFLoader')
import { requireFromGithub } from '@bumbeishvili/fetcher'
THREE = {
GLTFLoader;
const THREE = window.THREE = await require("three@0.99.0/build/three.min.js");
await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {});
THREE.GLTFLoader = GLTFLoader(THREE)
return window.THREE;
}
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.