View
382
Download
8
Category
Preview:
DESCRIPTION
Imagine being able to explore any city in the world in 3D in your browser. Now imagine being able to overlay data onto your city - transport, crime, pollution, social data and weather - all live and in real time…and it was open source! In this session Peter and Robin will talk about how they're creating ViziCities, an open-source, 3D visualisation platform, combining cutting-edge web technologies with open data to create beautiful visualisations. If you can’t imagine it…imagine SimCity for real life. We’ll discuss the power that new types of visualisation present for all of us to better see, understand and make decisions in our worlds. We’ll guide you through the technologies we're using, including D3 and WebGL, the design approach we’re using and share some important lessons learnt along the way. By the end, we hope to have inspired you to start experimenting with these technologies to create beautiful visualisations of your own.
Citation preview
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
Recommended