WebVisions – ViziCities: Bringing Cities to Life Using Big Data

1,036 views

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 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
1,036
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
6
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

WebVisions – ViziCities: Bringing Cities to Life Using Big Data

  1. 1. BRINGING CITIES TO LIFE USING BIG DATA AS SEEN IN VIZICITIESPRESENTED BY PETER SMART @PETEWSMART ROBIN HAWKES @ROBHAWKES
  2. 2. REAL-WORLD CITIES IN 3D VIZICITIES
  3. 3. UX DESIGNER PETER SMART
  4. 4. UX DESIGNER PETER SMART
  5. 5. DIGITAL TINKERER ROBIN HAWKES
  6. 6. TWEET US @VIZICITIES
  7. 7. NEXT WHAT IS VIZICITIES?
  8. 8. Cities are chaotic, complex and awesome.
  9. 9. NEXT GETTING STARTED
  10. 10. NEXT TECHNOLOGY
  11. 11. WEBGL THREE.JS
  12. 12. NEXT CHALLENGES
  13. 13. CHALLENGE DEFINING WHERE A CITY ACTUALLY ENDS
  14. 14. CHALLENGE VISUALISING AN ENTIRE CITY
  15. 15. CHALLENGE VISUALISING COMPLEX DATA
  16. 16. Designers are the mediators of information.
  17. 17. CHALLENGE GETTING CITY DATA FOR FREE
  18. 18. CHALLENGE GETTING ACCURATE HEIGHT DATA
  19. 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. 20. CHALLENGE TURNING 2D GEO DATA INTO 3D OBJECTS
  21. 21. COORDINATE CONVERSION D3.JS
  22. 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. 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. 24. NEXT USING VIZICITIES
  25. 25. gitclonehttps://github.com/robhawkes/vizicities.git cdvizicities npminstall gruntdev ... cd/path/to/vizicities gruntserve
  26. 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. 27. NEXT GETTING INVOLVED
  28. 28. NEXT RESOURCES
  29. 29. NEXT THE FUTURE
  30. 30. VIRTUAL REALITY OCULUS RIFT
  31. 31. NEXT ????
  32. 32. NEXT MEMORY JOGGING
  33. 33. THANK YOU FOR LISTENING SIGN UP AT VIZICITIES.COMCONTACT US PETER@VIZICITIES.COM @PETEWSMART ROB@VIZICITIES.COM @ROBHAWKES
  34. 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

×