D3 Examples - lombard

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <script src="https://bdon.org/js/d3.v2.js"></script>
    <script src="https://bdon.org/js/three.js"></script>
  </head>
  <body>
    <section>
      <div id="chart">
      </div>
    </section>
    <script>
          var scene, camera, renderer;
          var height_scale = 0.25;
​
          //origin around the wiggly part of Lombard street
          var proj = d3.geo.albers().scale(1500000).origin([-122.419507966555,37.80201405584843]).parallels([37.0, 38.0]).translate([0,0]);
​
          document.addEventListener( 'mousemove', onDocumentMouseMove, false );
​
          init();
          animate();
​
          function init() {
            container = document.createElement( 'div' );
            document.getElementById('chart').appendChild( container );
            scene = new THREE.Scene();
            camera = new THREE.OrthographicCamera(-180, 180, 100, -100, -300, 300);
            renderer = new THREE.WebGLRenderer({antialias: true});
            camera.position.z = 10;
            camera.position.y = 10;
            camera.position.x = 10;
            scene.add( camera );
​
            renderer.setSize(800, 400);
            container.appendChild( renderer.domElement );
​
            material = new THREE.MeshLambertMaterial( { color: 0xbbbbbb, opacity: 0.5 } );
            material.vertexColors = true;
            var lineMaterial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 2 } );
​
            parent = new THREE.Object3D();
            scene.add( parent );
​
            var directionalLight = new THREE.DirectionalLight(0xffffff);
            directionalLight.position.set(10,10,10);
            scene.add(directionalLight);
​
            d3.json("lombard.json", function(json) {
              for(var linestring in json) {
​
              var geometry = new THREE.Geometry();
              var lineGeometry = new THREE.Geometry();
              var coords = json[linestring]['coordinates'];
​
              for(var c in coords) {
                var projected = proj(coords[c]);
                var elevation = coords[c][2];
                var normed_elev = elevation * height_scale;
                geometry.vertices.push(new THREE.Vertex( new THREE.Vector3( projected[0], normed_elev, projected[1])));
                lineGeometry.vertices.push(new THREE.Vertex( new THREE.Vector3( projected[0], normed_elev, projected[1])));
              };
​
              // Add all the points going backwards, but at elevation 0
              for(var i=coords.length-1; i>=0; i--) {
                var projected2 = proj(coords[i]);
                geometry.vertices.push(new THREE.Vertex( new THREE.Vector3( projected2[0], 0, projected2[1])));
              }
​
              // Add the first point to the end to create a closed geometry
              var projected3 = proj(coords[0]);
              geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(projected3[0], projected3[2] * height_scale, projected3[1])));
​
              // Zip up faces
              for(var x = 0; x < coords.length - 1; x++) {
                geometry.faces.push(new THREE.Face3(x,2*coords.length-x-1,x+1, null));
                geometry.faces.push(new THREE.Face3(x+1, 2*coords.length-x-1,2*coords.length-x-2, null));
              }
              geometry.computeFaceNormals(true);
​
              var line = new THREE.Line(lineGeometry, lineMaterial);
              parent.add(line);
​
              var mesh = new THREE.Mesh( geometry, material);
              mesh.castShadow = true;
              mesh.doubleSided = true;
              parent.add(mesh);
            }
​
        
          });
        }
​
        function animate() {
          requestAnimationFrame( animate );
          render();
        }
​
        function render() {
          camera.lookAt( scene.position );
          renderer.render(scene, camera);
        }
​
        function onDocumentMouseMove( event ) {
            mouseX = event.clientX - window.innerWidth / 2;
            parent.rotation.y = Math.sin( mouseX/1000 ) * 5;
        }
​
        function rotateRight() {
          parent.rotation.y = parent.rotation.y + Math.PI/100;
        }
​
        function rotateLeft() {
          parent.rotation.y = parent.rotation.y - Math.PI/100;
        }
    </script>
  </body>
</html>
​
    