WebVisions – ViziCities: Bringing Cities to Life Using Big Data
-
Upload
robin-hawkes -
Category
Data & Analytics
-
view
381 -
download
8
description
Transcript of WebVisions – ViziCities: Bringing Cities to Life Using Big Data
BRINGING CITIES TO LIFE USING BIG DATAAS SEEN IN
VIZICITIESPRESENTED BY
PETER SMART @PETEWSMART ROBIN HAWKES @ROBHAWKES
REAL-WORLD CITIES IN 3D
VIZICITIES
UX DESIGNER
PETER SMART
UX DESIGNER
PETER SMART
DIGITAL TINKERER
ROBIN HAWKES
TWEET US
@VIZICITIES
NEXT
WHAT IS VIZICITIES?
Cities are chaotic, complexand awesome.
NEXT
GETTING STARTED
NEXT
TECHNOLOGY
WEBGL
THREE.JS
NEXT
CHALLENGES
CHALLENGE
DEFINING WHERE ACITY ACTUALLY ENDS
CHALLENGE
VISUALISING ANENTIRE CITY
CHALLENGE
VISUALISINGCOMPLEX DATA
Designers are the mediatorsof information.
CHALLENGE
GETTING CITY DATAFOR FREE
CHALLENGE
GETTING ACCURATEHEIGHT DATA
var height;var scalingFactor = (tags["building"] === "office") ? 1.45 : 1;
if (tags.height) { height = this.toMeters(tags.height);} else if (!height && tags["building:height"]) { height = this.toMeters(tags["building:height"]);} else if (!height && tags.levels) { height = tags.levels * this.METERS_PER_LEVEL * scalingFactor <<0;} else if (!height && tags["building:levels"]) { height = tags["building:levels"] * this.METERS_PER_LEVEL * scalingFactor <<0;} else if (tags["building"]) { height = 10 + Math.random() * 10;}
height *= this.geo.pixelsPerMeter;
CHALLENGE
TURNING 2D GEO DATAINTO 3D OBJECTS
COORDINATE CONVERSION
D3.JS
var geoCoords = [-0.01924, 51.50358]; // Central point as [lon, lat]var tileSize = 256; // Pixel size of a single map tilevar zoom = 15; // Zoom level var projection = d3.geo.mercator() .center(geoCoords) // Geographic coordinates of map centre .translate([0, 0]) // Pixel coordinates of .center() .scale(tileSize << zoom); // Scaling value // Pixel location of Heathrow Airport to relation to central point (geoCoords)var pixelValue = projection([-0.465567112, 51.4718071791]); // Returns [x, y]
var shape = new THREE.Shape();shape.moveTo(0, 0);shape.lineTo(10, 0);shape.lineTo(10, 10);shape.lineTo(0, 10);shape.lineTo(0, 0); // Remember to close the shape var height = 10;var extrudeSettings = { amount: height, bevelEnabled: false }; var geom = new THREE.ExtrudeGeometry( shape, extrudeSettings );var mesh = new THREE.Mesh(geom);
NEXT
USING VIZICITIES
git clone https://github.com/robhawkes/vizicities.gitcd vizicitiesnpm installgrunt dev
...
cd /path/to/vizicitiesgrunt serve
<script src="js/vizi.min.js"></script>
<script>
</script>
// Debug output VIZI.DEBUG = false;
var city = new VIZI.City(); city.init({ coords: [-0.01924, 51.50358] // Canary Wharf });
NEXT
GETTING INVOLVED
NEXT
RESOURCES
NEXT
THE FUTURE
VIRTUAL REALITY
OCULUS RIFT
NEXT
????
NEXT
MEMORY JOGGING
THANK YOU FOR LISTENINGSIGN UP AT
VIZICITIES.COMCONTACT US
[email protected] @PETEWSMART [email protected] @ROBHAWKES
RESOURCES
ViziCities demoViziCities on GitHubVideos of ViziCities examplesThree.js WebGL libraryD3.js data visualisation libraryOpenStreetMapOpenStreetMap JSON APIOculus Rift virtual realityMyo wearable control system