lombard

<!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>

Modified http://bdon.org/js/d3.v2.js to a secure url

Modified http://bdon.org/js/Three.js to a secure url

https://bdon.org/js/d3.v2.js

https://bdon.org/js/Three.js