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

PETER@VIZICITIES.COM @PETEWSMART ROB@VIZICITIES.COM @ROBHAWKES

RESOURCES

ViziCities demoViziCities on GitHubVideos of ViziCities examplesThree.js WebGL libraryD3.js data visualisation libraryOpenStreetMapOpenStreetMap JSON APIOculus Rift virtual realityMyo wearable control system