Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bringing Cities to Life Using Big Data & WebGL


Published on

We're creating ViziCities - a 3D city-visualisation platform using WebGL (Three.js) and a raft of other amazing technologies. We'll talk about how we're doing it all with open, big-data, the awesome possibilities that presents and how we've overcome the problems along the way. Think SimCity meets the real world!

Sign up for the beta at

Published in: Technology
  • Be the first to comment

Bringing Cities to Life Using Big Data & WebGL

  1. 1. Were going to be talking to you today about trying to bring real world cities to life using bigdata and the power of the web.
  2. 2. My name is Peter Smart…UX Design2517 miles 50 problemsconsult - ux for innovation and ethnographic research
  3. 3. My name is Rob…- I suppose you could call me a digital tinkerer. Part developer, part thinker, part designer. Ibasically love making and solving things with new technologies.- I spent the past 2 years at Mozilla working as a Technical Evangelist for Web technologies.- I left Mozilla back in January and since then I’ve been working on projects with Pete;including a real-time Twitter visualisation called Tweetmap, and…
  4. 4. ViziCities.It’s ViziCities that we’ll be talking about today; our attempt to use big data and Webtechnologies to visualise cities in a completely new way.- Well be looking at an overview of the project and the technologies were using- We’ll also be looking at the problems we encountered and how we overcame them.Pete will now explain the project in a little more detail…
  5. 5. ViziCities started as a personal project between Rob and I.- Started - Sim Citys data layers. Asked ourselves the question: could we use the make thisfor real life?- So thats where we started and move on from there. So its started as a personal project -we’ve been blown away by the response we’ve had- Regardless of the interest from companies - One thing which really blew us away was whenone of the senior developers in charge of Sim Citys data layers reached out to us to let usknow how much he loved what were doing. - heading in the right direction
  6. 6. So our objective with this project has been to use the power of the web to bring real worldcities to life.- So this is a pretty big aim and could obviously be done in so many ways- So our aim has been to have our project defined by three key areas - bring cities to life inthe way we want to
  7. 7. Data Visualisation. Play and Art.By way of introducing you - Going to touch on what each of these mean briefly…
  8. 8. Data Visualisation
  9. 9. The project started out of the realisation that the web is full of awesome, free open big data.- Our mission became to see if we could find ways to hack this data together to allow us tosee cities in new ways.- These are just some of the data sources weve come across. This data can be hard to findand access but once you find it, its pretty powerful.
  10. 10. Harnessing that big data has allowed to go from points on a canvas in WebGL…
  11. 11. to outlines…
  12. 12. to start seeing real world cities in 3d right in the browser.
  13. 13. So these were some early experiments of an 8km square of London in UK which includes bothbuildings and topological data such as parks and water features.But we didnt want to stop there. We want to be able to visualise other data on our cities bothlegacy data and live data.
  14. 14. But we didnt want to stop there. We want to be able to visualise other data on our cities bothlegacy data and live data.
  15. 15. So these experiments show population density data from the UKs census visualised as heatmaps and bar graphs over London.Shows how users can start to see cities in novel ways - Rob will be explaining more
  16. 16. The next defining objective of the project is Play.- What we dont want is to create a tool which purely for statisticians to view data ininteresting ways. What were looking to do is make this an experience anyone can findpleasure and joy in.
  17. 17. Were looking to create an immersive / almost game-like experience. This starts right fromthe way we visualise the data itself right the way through to the way you are able to interactwith the city itself.- For example we didnt want to rely purely on conventional data vis. techniques - we want toexperiment and propose novel ways of visualising and interacting with data to make thismore engaging and accessible- Early experiment behind me.
  18. 18. When it comes to play weve also been experimenting with the rich details of the city,including Artificial Intelligence.
  19. 19. So, the video behind me shows roughly 500 individual AIs following the road network ofcentral London.
  20. 20. The final key objective is Art.
  21. 21. Its got to look awesome!
  22. 22. There are lots of complex elements to the project, but our aim is to create an seamlessexperience with an aesthetic that invites users to immerse themselves in the cities.- So the example behind me shows how were starting to play with that by looking at postprocessing techniques such as ambient occlusion and a tilt shift effect to implyminiaturisation and allow users to feel like Gods lording over these cities and want to exploremore.
  23. 23. Rob is going to talk about some of the problems, how we’ve overcome them using thetechnologies, hopefully share some valuable lessons
  24. 24. One of the most interesting aspects to ViziCities is the technology involved.
  25. 25. We use a variety of technologies, all framed around JavaScript…- WebGL (Three.js)- Web Workers- Node.js- Web Audio API- Geospatial technologies (PostGIS, GeoJSON, etc)
  26. 26. Our first problem was actually finding usable data…- An important aspect what that data ideally needed to be free
  27. 27. Buildings were the first and most exciting challenge regarding data.- OpenStreetMap (OSM) has fairly high detail building outlines, but coverage is sparse andunpredictable.- Ordnance Survey (OS) has low detail building outlines for most of the UK available for free.
  28. 28. OS building data is split into tiles, which often means buildings have been split in two ormore pieces (fixed by merging all the pieces together with a custom algorithm).
  29. 29. Roads were slightly easier than buildings to gather…- OSM has highly accurate road data for free, though its actually too accurate and detailedfor our needs.- OS has good, simple road data – however, it has problems with bridges and tunnels.
  30. 30. Natural features were the last major non-statistical data that we had to find…- OSM has good coverage for natural features and is in quite high detail.- Rivers in OSM are much easier to use.- OS was useful for smaller, less detailed features like parks and forests.
  31. 31. Now we had the data, we had to convert it into a usable format…
  32. 32. To do that we used technologies like QGIS and PostGIS.QGIS was mainly for visualisation and PostGIS mainly for analysis and conversion betweendata formats.
  33. 33. The common data formats we use are shapefiles (as input) and GeoJSON (as output).- We looked into TopoJSON to save filesize but we wouldn’t actually benefit from using it(because features like buildings dont touch)- Instead, we needed to compress the GeoJSON as much as possible as its… verbose.
  34. 34. Now we had building and natural data in the right format, the next challenge was to visualiseit in 3D.- The technologies we use to do this are WebGL (Three.js) and D3.js.
  35. 35. The D3 geo library is used to convert from lonlat coordinates into screen-space coordinates.
  36. 36. From there we can turn 2D GeoJSON features into 3D extruded objects.
  37. 37. Basic 3D objects like buildings weren’t too hard. On the other hand, roads proved a bit of apain…- We tried various approaches, such as…
  38. 38. Experimenting with junction nodes
  39. 39. Connecting junction nodes using lines
  40. 40. Filling the voids between roads, effectively city blocks
  41. 41. Eventually settled on a simple approach of expanding building outlines to infer pavement andthus roads.
  42. 42. The void left between the pavement and other features results in a fairly simple and accuraterepresentation of roads without much of a performance hit.
  43. 43. Once we had geographic and man-made features rendering we moved onto visualisingstatistical data on top of the city…
  44. 44. We started with a simple approach to data layers that placed bars at every data point we hadat our disposal.- While impressive, this effect looked more like one of those toys full of pins that peoplemostly pressed their faces into.- It was visually confusing and failed to get across the data in the right way.
  45. 45. We moved on to a simplified approach in which we grouped the data points into largerclusters called based on definitions from the Office for National Statistics in the UK.- We also started experimenting with the idea of changing the colour of the bars dependingon their value. This was because the heights alone were hard to compare when in 3D andviewing at a tilted angle.
  46. 46. By combining the bars data layer with the original building layer we are able to give the userbetter context about the data that they’re looking at.- You’ll notice in this example that some of the bars are clipping into the building models.Some are hidden entirely as they are completely within a building.- To solve this we used a similar approach to SimCity which was to put the data on a separatelayer to the buildings, like how you would use z-index in CSS, or layers in Photoshop. Thismeant that the data always showed above the buildings and made it much easier to read.
  47. 47. What we quickly found was that bars just weren’t enough information to give an accuraterepresentation of data over a large space, like a city.- To do that we needed to implement something like a heatmap, in this case we implementeda Choropleth approach using the cluster areas defined by the Office for National Statistics.
  48. 48. When combining the Choropleth layer with the bars, the data becomes instantly moreunderstandable.- The Choropleth layer gives you a general idea of data represented over a geographic area…- and the bars give you a better idea of data at a specific point.- We also added a simple approach of using borough and neighbourhood outlines andplotting those on top of the data.- This provided new context to the data and suddenly made it a lot easier to compare variousareas of a city.
  49. 49. A more recent change that we’ve made to the data layers is the shape of the Choroplethcomponents.- Previously we were using outlines provided by the Office for National Statistics which,although useful from a data-science POV, were visually complicated and placed unnecessarystrain on the amount of vertices we needed to draw.- The latest approach has been to break the data down into a hexagon grid which, whilebeing easier to draw, has the added benefit of looking a lot nicer as well.[Pass to Pete re: design and UX problems]
  50. 50. What we quickly realised was that visualising entire cities in the browser, let alone with data,ai and post processing is a massive challenge. Up until now, these type of complex cityexperiences tended to have been offline applications or large software packages. Were tryingto do this in the browser at 60 fps.
  51. 51. offline - 60fps- As we started doing this we quickly came up against some massivechallenges surrounding performance.- It got to a stage where we felt like the challenge was insurmountable - going round incircles - We knew we needed to let users explore entire cities but rendering at that scale andcomplexity was just proving impossible. It was getting to a stage where we felt like giving up.- Bet some of the best moments of innovation come out of seemingly impossible challenges- Certainly the case for us
  52. 52. So our question was "How could we let users explore entire cities while maintainingperformance?"
  53. 53. What we realised is that we didnt have to visualise the entirety of a city at one time. Thesolution we landed on was the plinth...- The plinth was a moment of inspiration - we realised we could show entire cities while alsomanaging performance and maintaing a beautifully rich and detailed experience.- The way to imagine the plinth is like a magnifying glass. The plinth itself shows a 6kmsquare of a city. This allows users to zoom in, pan and interact with the city at street leveland take in the rich data and detail that will exist here. - However, a user will also be able to move the plinth around. So imagine moving themagnifying glass over other areas of the city and watching as each area came to life.- Now what the plinth lacks is context, so the second part of the solution is…
  54. 54. Slippy-maps- What we did was align the 3d data of our plinth to the same system used by most 2d mapson the internet and fused our 3d city with a 2d map. The result gives users a context forwhere they are in a city and allows them to move the plinth to explore other areas.- Now the beauty of this approach means more than just better performance.- Whereas before we were limited by the edge of a city/ area, we no longer have thatlimitation. This means that, as long as we have the data, we are able to visualise anywhere inworld.- Beyond that, it allows us to do some other pretty exciting things too - like explode the landapart and see other parts of cities that only 3D allows, such as the underground…! 
  55. 55. In closing, were just going to touch on the future for the platform.- Since publishing our first dev diary weve had everyone from Governments to largecorporate and individuals from the around the world getting in touch to let us know howexcited they are by what were doing.
  56. 56. Weve already got a great idea in our mind of what we wan this platform to do in terms ofdata viz and allowing people to explore cities in completely novel ways - some of which areup behind me.
  57. 57. However, if youve got an idea of something youd like to do with this, then wed love to hearfrom you!LEAP LEAP LEAP
  58. 58. So if youve got any questions, comments or thoughts please feel free to email us or tweet us.- Also we will soon have a beta program running - so if youd like to get early access to theproject before anyone else, visit the link above.- Thats all folks - any questions?