Bringing Cities to Life Using Big Data & WebGL
18 likes6,509 views
The document discusses a project called Vizicities, aimed at using big data and web technologies to visualize real-world cities in innovative ways through data visualization, play, and art. The project employs various technologies, including JavaScript and WebGL, to overcome challenges related to data accessibility and visualization performance. It highlights the journey of creating an immersive experience while engaging users and facilitating exploration of urban environments.
![A more recent change that we’ve made to the data layers is the shape of the Choropleth
components.
- 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 unnecessary
strain on the amount of vertices we needed to draw.
- The latest approach has been to break the data down into a hexagon grid which, while
being easier to draw, has the added benefit of looking a lot nicer as well.
[Pass to Pete re: design and UX problems]](https://image.slidesharecdn.com/bringingcitiestolifeusingbigdatawebtechnologies-130425052943-phpapp01/85/Bringing-Cities-to-Life-Using-Big-Data-WebGL-49-320.jpg)
Bringing Cities to Life Using Big Data & WebGL
- 1. We're going to be talking to you today about trying to bring real world cities to life using big data and the power of the web.
- 2. My name is Peter Smart… UX Design 2517 miles 50 problems consult - ux for innovation and ethnographic research
- 3. My name is Rob… - I suppose you could call me a digital tinkerer. Part developer, part thinker, part designer. I basically 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. ViziCities. It’s ViziCities that we’ll be talking about today; our attempt to use big data and Web technologies to visualise cities in a completely new way. - We'll be looking at an overview of the project and the technologies we're 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. ViziCities started as a personal project between Rob and I. - Started - Sim City's data layers. Asked ourselves the question: could we use the make this for real life? - So that's 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 when one of the senior developers in charge of Sim City's data layers reached out to us to let us know how much he loved what we're doing. - heading in the right direction
- 6. So our objective with this project has been to use the power of the web to bring real world cities 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 in the way we want to
- 7. Data Visualisation. Play and Art. By way of introducing you - Going to touch on what each of these mean briefly…
- 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 to see cities in new ways. - These are just some of the data sources we've come across. This data can be hard to find and access but once you find it, its pretty powerful.
- 10. Harnessing that big data has allowed to go from points on a canvas in WebGL…
- 11. to outlines…
- 12. to start seeing real world cities in 3d right in the browser.
- 13. So these were some early experiments of an 8km square of London in UK which includes both buildings and topological data such as parks and water features. But we didn't want to stop there. We want to be able to visualise other data on our cities both legacy data and live data.
- 14. But we didn't want to stop there. We want to be able to visualise other data on our cities both legacy data and live data.
- 15. So these experiments show population density data from the UKs census visualised as heat maps and bar graphs over London. Shows how users can start to see cities in novel ways - Rob will be explaining more
- 16. The next defining objective of the project is Play. - What we don't want is to create a tool which purely for statisticians to view data in interesting ways. What we're looking to do is make this an experience anyone can find pleasure and joy in.
- 17. We're looking to create an immersive / almost game-like experience. This starts right from the way we visualise the data itself right the way through to the way you are able to interact with the city itself. - For example we didn't want to rely purely on conventional data vis. techniques - we want to experiment and propose novel ways of visualising and interacting with data to make this more engaging and accessible - Early experiment behind me.
- 18. When it comes to play we've also been experimenting with the rich details of the city, including Artificial Intelligence.
- 19. So, the video behind me shows roughly 500 individual AIs following the road network of central London.
- 20. The final key objective is Art.
- 21. It's got to look awesome!
- 22. There are lots of complex elements to the project, but our aim is to create an seamless experience with an aesthetic that invites users to immerse themselves in the cities. - So the example behind me shows how we're starting to play with that by looking at post processing techniques such as ambient occlusion and a tilt shift effect to imply miniaturisation and allow users to feel like Gods lording over these cities and want to explore more.
- 23. Rob is going to talk about some of the problems, how we’ve overcome them using the technologies, hopefully share some valuable lessons
- 24. One of the most interesting aspects to ViziCities is the technology involved.
- 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. Our first problem was actually finding usable data… - An important aspect what that data ideally needed to be free
- 27. Buildings were the first and most exciting challenge regarding data. - OpenStreetMap (OSM) has fairly high detail building outlines, but coverage is sparse and unpredictable. - Ordnance Survey (OS) has low detail building outlines for most of the UK available for free.
- 28. OS building data is split into tiles, which often means buildings have been split in two or more pieces (fixed by merging all the pieces together with a custom algorithm).
- 29. Roads were slightly easier than buildings to gather… - OSM has highly accurate road data for free, though it's actually too accurate and detailed for our needs. - OS has good, simple road data – however, it has problems with bridges and tunnels.
- 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. Now we had the data, we had to convert it into a usable format…
- 32. To do that we used technologies like QGIS and PostGIS. QGIS was mainly for visualisation and PostGIS mainly for analysis and conversion between data formats.
- 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 don't touch) - Instead, we needed to compress the GeoJSON as much as possible as it's… verbose.
- 34. Now we had building and natural data in the right format, the next challenge was to visualise it in 3D. - The technologies we use to do this are WebGL (Three.js) and D3.js.
- 35. The D3 geo library is used to convert from lonlat coordinates into screen-space coordinates.
- 36. From there we can turn 2D GeoJSON features into 3D extruded objects.
- 37. Basic 3D objects like buildings weren’t too hard. On the other hand, roads proved a bit of a pain… - We tried various approaches, such as…
- 38. Experimenting with junction nodes
- 39. Connecting junction nodes using lines
- 40. Filling the voids between roads, effectively city blocks
- 41. Eventually settled on a simple approach of expanding building outlines to infer pavement and thus roads.
- 42. The void left between the pavement and other features results in a fairly simple and accurate representation of roads without much of a performance hit.
- 43. Once we had geographic and man-made features rendering we moved onto visualising statistical data on top of the city…
- 44. We started with a simple approach to data layers that placed bars at every data point we had at our disposal. - While impressive, this effect looked more like one of those toys full of pins that people mostly pressed their faces into. - It was visually confusing and failed to get across the data in the right way.
- 45. We moved on to a simplified approach in which we grouped the data points into larger clusters 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 depending on their value. This was because the heights alone were hard to compare when in 3D and viewing at a tilted angle.
- 46. By combining the bars data layer with the original building layer we are able to give the user better 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 separate layer to the buildings, like how you would use z-index in CSS, or layers in Photoshop. This meant that the data always showed above the buildings and made it much easier to read.
- 47. What we quickly found was that bars just weren’t enough information to give an accurate representation of data over a large space, like a city. - To do that we needed to implement something like a heatmap, in this case we implemented a Choropleth approach using the cluster areas defined by the Office for National Statistics.
- 48. When combining the Choropleth layer with the bars, the data becomes instantly more understandable. - 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 and plotting those on top of the data. - This provided new context to the data and suddenly made it a lot easier to compare various areas of a city.
- 49. A more recent change that we’ve made to the data layers is the shape of the Choropleth components. - 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 unnecessary strain on the amount of vertices we needed to draw. - The latest approach has been to break the data down into a hexagon grid which, while being easier to draw, has the added benefit of looking a lot nicer as well. [Pass to Pete re: design and UX problems]
- 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 city experiences tended to have been offline applications or large software packages. We're trying to do this in the browser at 60 fps.
- 51. offline - 60fps- As we started doing this we quickly came up against some massive challenges surrounding performance. - It got to a stage where we felt like the challenge was insurmountable - going round in circles - We knew we needed to let users explore entire cities but rendering at that scale and complexity 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. So our question was "How could we let users explore entire cities while maintaining performance?"
- 53. What we realised is that we didn't have to visualise the entirety of a city at one time. The solution we landed on was the plinth... - The plinth was a moment of inspiration - we realised we could show entire cities while also managing 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 6km square of a city. This allows users to zoom in, pan and interact with the city at street level and 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 the magnifying 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. Slippy-maps - What we did was align the 3d data of our plinth to the same system used by most 2d maps on the internet and fused our 3d city with a 2d map. The result gives users a context for where 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 that limitation. This means that, as long as we have the data, we are able to visualise anywhere in world. - Beyond that, it allows us to do some other pretty exciting things too - like explode the land apart and see other parts of cities that only 3D allows, such as the underground…!
- 55. In closing, we're just going to touch on the future for the platform. - Since publishing our first dev diary we've had everyone from Governments to large corporate and individuals from the around the world getting in touch to let us know how excited they are by what we're doing.
- 56. We've already got a great idea in our mind of what we wan this platform to do in terms of data viz and allowing people to explore cities in completely novel ways - some of which are up behind me.
- 57. However, if you've got an idea of something you'd like to do with this, then we'd love to hear from you! LEAP LEAP LEAP
- 58. So if you've 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 you'd like to get early access to the project before anyone else, visit the link above. - That's all folks - any questions?