Your SlideShare is downloading. ×
0
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WebVisions – ViziCities: Bringing Cities to Life Using Big Data

592

Published on

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 …

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.

1 Comment
2 Likes
Statistics
Notes
  • Looking really good, Rob! Are you in London next weekend? Fancy overlaying industrial pollution on to Vizicities or doing any other 3D vis on it? We have data on how business footprints join up & aggregate into corporations and aren't sure how to visualise it. http://www.envhack.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
592
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BRINGING CITIES TO LIFE USING BIG DATA AS SEEN IN VIZICITIESPRESENTED BY PETER SMART @PETEWSMART ROBIN HAWKES @ROBHAWKES
  • 2. REAL-WORLD CITIES IN 3D VIZICITIES
  • 3. UX DESIGNER PETER SMART
  • 4. UX DESIGNER PETER SMART
  • 5. DIGITAL TINKERER ROBIN HAWKES
  • 6. TWEET US @VIZICITIES
  • 7. NEXT WHAT IS VIZICITIES?
  • 8. Cities are chaotic, complex and awesome.
  • 9. NEXT GETTING STARTED
  • 10. NEXT TECHNOLOGY
  • 11. WEBGL THREE.JS
  • 12. NEXT CHALLENGES
  • 13. CHALLENGE DEFINING WHERE A CITY ACTUALLY ENDS
  • 14. CHALLENGE VISUALISING AN ENTIRE CITY
  • 15. CHALLENGE VISUALISING COMPLEX DATA
  • 16. Designers are the mediators of information.
  • 17. CHALLENGE GETTING CITY DATA FOR FREE
  • 18. CHALLENGE GETTING ACCURATE HEIGHT DATA
  • 19. varheight; varscalingFactor=(tags["building"]==="office")?1.45:1; if(tags.height){ height=this.toMeters(tags.height); }elseif(!height&&tags["building:height"]){ height=this.toMeters(tags["building:height"]); }elseif(!height&&tags.levels){ height=tags.levels*this.METERS_PER_LEVEL*scalingFactor<<0; }elseif(!height&&tags["building:levels"]){ height=tags["building:levels"]*this.METERS_PER_LEVEL*scalingFactor<<0; }elseif(tags["building"]){ height=10+Math.random()*10; } height*=this.geo.pixelsPerMeter;
  • 20. CHALLENGE TURNING 2D GEO DATA INTO 3D OBJECTS
  • 21. COORDINATE CONVERSION D3.JS
  • 22. vargeoCoords=[-0.01924,51.50358];//Centralpointas[lon,lat] vartileSize=256;//Pixelsizeofasinglemaptile varzoom=15;//Zoomlevel varprojection=d3.geo.mercator() .center(geoCoords)//Geographiccoordinatesofmapcentre .translate([0,0])//Pixelcoordinatesof.center() .scale(tileSize<<zoom);//Scalingvalue //PixellocationofHeathrowAirporttorelationtocentralpoint(geoCoords) varpixelValue=projection([-0.465567112,51.4718071791]);//Returns[x,y]
  • 23. varshape=newTHREE.Shape(); shape.moveTo(0,0); shape.lineTo(10,0); shape.lineTo(10,10); shape.lineTo(0,10); shape.lineTo(0,0);//Remembertoclosetheshape varheight=10; varextrudeSettings={amount:height,bevelEnabled:false}; vargeom=newTHREE.ExtrudeGeometry(shape,extrudeSettings); varmesh=newTHREE.Mesh(geom);
  • 24. NEXT USING VIZICITIES
  • 25. gitclonehttps://github.com/robhawkes/vizicities.git cdvizicities npminstall gruntdev ... cd/path/to/vizicities gruntserve
  • 26. <scriptsrc="js/vizi.min.js"></script> <script> </script> //Debugoutput VIZI.DEBUG=false; varcity=newVIZI.City(); city.init({ coords:[-0.01924,51.50358]//CanaryWharf });
  • 27. NEXT GETTING INVOLVED
  • 28. NEXT RESOURCES
  • 29. NEXT THE FUTURE
  • 30. VIRTUAL REALITY OCULUS RIFT
  • 31. NEXT ????
  • 32. NEXT MEMORY JOGGING
  • 33. THANK YOU FOR LISTENING SIGN UP AT VIZICITIES.COMCONTACT US PETER@VIZICITIES.COM @PETEWSMART ROB@VIZICITIES.COM @ROBHAWKES
  • 34. RESOURCES ViziCities demo ViziCities on GitHub Videos of ViziCities examples Three.js WebGL library D3.js data visualisation library OpenStreetMap OpenStreetMap JSON API Oculus Rift virtual reality Myo wearable control system

×