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 http://vizicities.com

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…

8. Data Visualisation

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?