H.P.A.Q Housing Prices And Air Quality
Interaction Design Jamie Maguire, Nichole Dwight, & Dave Jones
1 In the beginning of our project we really liked the idea of producing a piece of civic technology. This was after we looked into different examples of civic technology in one of our lectures. Civic technology could be any kind of technology used to enable engagement or participation among members of the public. It can be used to improve citizen communications and government infrastructure and most importantly, do good. We thought that it would be an interesting project to design something using politics and political engagement as a theme. Expanding on this, we felt that using a form of interactive, aesthetically pleasing media such as
Research 3D models could be a good tool for creating our project. The first thing we had to do was decide on who to design for. The primary problem for us was decided which demographic to choose, as politics affects everyone on a day to day basis. When designer Antonio Gould led a workshop for us, I asked him: how would you decide on a target demographic when you have identified a problem to which there are multiple groups of people to design for? Antonio’s insights were very helpful. He offered us a set of questions to ask in order to determine who is most appropriate to design for:
Which target audience do you have more experience with? Which can we do the best job for? Are there other projects based at any of the audiences? How accessible are the groups when it comes to research? Do we have expertise in designing for any of these groups? Are any of these groups already well served? Be critical why you have chosen a target audience. Whilst deciding on who to design for, we released a survey to the public via Twitter and Facebook asking people about how engaged they felt with politics, and how accessible they thought political data was. The average ages of our responses were between 18 and 35 and there was a strong theme of mistrust and confusion in regards to politics and accessible data. Many people wanted to engage more with
politics, but either didn’t know how or who to trust. Our responses were very interesting and problems such as fake news stories and unreliable sources were highlighted a lot. Once we had processed our results, using the questions set out by Antonio Gould we first decided that we would design for people in our own age bracket (18-25) as we have more experience with this demographic and groups of people are far more available for interviews, user testing and further research. However, we decided that we would design something with a low barrier to entry that could potentially be used by people of a wider age range. This is because politics truly affects everyone, and we do not want to exclude people of any age.
Drawing from our research, our insights were that people do not have a lot of trust when it comes to politics. It is almost an automatic response to dismiss what a politician says as dishonest, severely biased or omitting pieces of the truth. Taking these insights, we believed that a product that works towards making politics transparent would be a great way to improve political engagement and participation from people. Our initial idea was to use data taken from the They Work For You API, and use 3D visualisations to compare different pieces of data in a visually engaging way. It could be things like displaying the rates of homelessness in Bristol and comparing them to how often Bristol MPs attended debates about homelessness. Unfortunately, we quickly
realised that the data provided by the API was ambiguous, and upon further research we discovered that it was often very difficult and controversial to draw conclusions based on such data, as it was not reliable and did not tell the whole story. We interviewed several people about what topics are most important to them when it comes to elections and holding MPs accountable. Two recurring answers were housing prices and air pollution. Upon further investigation, we found out that air pollution is a very important topic in Bristol, and that Bristol council has set up stations around the city to measure air pollution each day and this data is available for the public to download.
With this data available, we felt it would be very interesting to compare air pollution in different parts of Bristol with other statistics, and see if there were any patterns. We decided to use the Zoopla API to get the average housing prices of the areas in Bristol which are having their air pollution levels measured.
Once we had the two sets of data - air pollution levels and housing prices, we needed to decided on what we could create that would encourage engagement and participation from the public.
2
Design Brief
We are creating a piece of civic technology in the form on an online tool. Using this tool, people can look up data about the city of Bristol which will be presented as 3D visualisations. This data will be primarily levels of air pollution displayed on a 3D map of Bristol separated by constituencies, currently comparisons will be made between levels of air pollution and housing prices. If we were to expand the project, we would later bring in political data. Our project is needed as way to empower people and help raise levels of political and environmental engagement. By comparing air pollution levels with housing prices, people may discover correlations and
feel inclined to contact their local MPs, thus raising their political engagement. We live in an age of misinformation. Social media sites are well known for circulation fake news stories and thus many people are led to believe false truths regarding sensitive political topics. By designing an accessible, low barrier to entry tool, our tool will be usable by a wide variety of people. We hope our project will resonate particularly with people who are politically disengaged. People may be concerned at the correlation between housing prices and pollution thus inspiring them to contact and influence there MP’s.
Our biggest constraint is what data is publicly available to us via APIs. We have access to political data via the ‘they work for you’ API, however we have decided to postpone using it as the data can be quite ambiguous and we are not sure it would be responsible to draw conclusions from the data provided.
constituencies. On this city we will show levels of air pollution in comparison to housing pricing around different areas of the city. We would primarily be showing pollutants such as nitrogen dioxide in the air with particle effects. Building and distributing 3D models of houses to represent different prices.
Device support – as our project is built using Three. js, making it support a wider range of devices would be an extension to the application later.
We have allocated Tuesdays to meeting as a group at one of our houses. We use this time to both discuss and produce parts of our project, updating our blog as we go along. This allows us to get feedback each Thursday on the progress we have made in the previous meeting that week.
We are creating a highfidelity prototype which will display a 3D model of Bristol, divided by its
3
Introduction
For this project we initially decided we would like to focus on political information and the accessibility of this information. Initially we looked at data from the We Work For You website, wanting to compare debates to action taken on those debates. Through our research and attempts to use the data, we found that it was ambiguous and hard to compare. This lead us to look for new data that could be tied to politics. Some of the best data available to us
was pollution data, we felt this was an important and often controversial topic within politics as well as people’s everyday lives. This along with suggestions from lecturers lead us to choose housing data as a comparison to the pollution data that was available to us. With this research and direction we began working on building the 3D visualization taking into consideration our initial focus, the need to make information reliable, easily accessible and shareable.
First Steps One of our first problems was the scope of the project. In our previous concept where we would comparing debates, we wanted the scope to be nation wide. However, we were not constrained by the pollution data. As we only had access to pollution data from bristol, our scope for the prototype remained small. Though in hindsight this may have been the best option as there was already a large amount of data from the 6 pollution points in bristol. With such a large amount of data available from such a small area the task became more about how we would separate the data set into easily understandable partitions
4
for the general public to understand, compare and share. As we strive for accessibility, making all the data available may have been overwhelming, turning people away and making them disinterested in the topic. We decided to partition the map into constituencies, this would hopefully create a stronger connection between pollution, housing prices and politics. Inspiring people to contact their MP’s if they felt unhappy with the pollution in their area and compare to the amount of action taking in other areas with different levels of house pricing.
5
Map & Data
In order to create the map within the Three.js scene, we needed access to either real coordinate points of the constituency boundaries and convert them to a localised 3D world, or we could find an existing map of the boundaries. We did the latter and luckily came across GeoJSON[1], which provided us with a customisable svg. It could be broken down into nation wide, cities, constituencies, and wards. We had a hunch that the SVG path points could be used in a 3D sense, luckily they did convert to XY coordinates and create the vertices to outline Bristol city and its four constituencies.
The pollution data bars are created by looping through the JSON file containing the monthly averages of pollution amounts per location. The value given in the data is then divided by 20 to keep the numbers manageable but still all equivalent to their initial scale. This prevents the bars from becoming so large they go out of scope of the camera. The resulting value is then set as the Y scale for the bar, thus, increasing the height. For the months that did not have data recorded from the council, we have put in a placeholder value of 0.1, this shows up in the application as very flat pillars in that given location.
The sidebar on the left is a legend showing which colour relates to which location, this was done because using the raycaster to intersect objects allowing the user to interact with the 3D scene directly was creating massive performance issues. The user can rotate the map around, but zooming and clicking on pillars and houses to learn more has been removed from the functionality of the application. The sidebar also displays the average housing price of that area for the year of 2016, the bar is also updated with every user input, via the month slider or choosing a new pollutant. When the bar is displaying a pollutants value as 0.1, this means the council did not record data for that month.
Big Small Data After importing the necessary mapping information for bristol and dividing the map up into constituencies we looked again at the data we had available to us. It was still far too much to handle on a single map. Initially we looked at dividing the information further into smaller areas of bristol or even streets. This however would be tasking on the applications performance. As this was a prototype and our main focus was about the accessibility of information rather than the amount of information available, we decided to cut the pollution data down to six sensor points located at six streets one from each constituency. We also wanted to keep the data
6
consistent for each point. Some sensors had nearly two years of data however, as all sensor points had at least a year’s worth of pollution readings. Due to this we reduced all other data sets down to just a year’s worth of data. Taking the data size reduction a step further we then obtained an average pollution reading for each month’s weekly average at each sensor point. This amount of data was now usable, understandable and mappable. Compiling the data into months rather than days or hours as we had originally considered meant that the user interface could be made more usable.
7
User Interface
As previously mentioned our user interface was heavily influenced by the way we planned to present our data. Consisting of a slider with months and the ability to choose the pollution type to be displayed. The three. js visualization then dynamically displays that information atop of the map previously mentioned. The simplicity in the interface allows for exploration of all the data, making it easy to compare two types of pollution or pollution from two points in time as well as the housing
price average for that time period. Having such a simple user interface also allows people to find very specific data much more easily than currently possible through a multitude of web searches. Although the interface is small for time being it could be expanded to accommodate far larger sets of data or data sets that have far more variety. Using sliders as a time comparison tool and specific options to pick key points the user wants to see almost any data could be mapped in a similar way.
Shareablity The sharable aspects of the application, stemmed from the need to provide reliable accessible information. False information is often shared on the internet and it can be hard to tackle this. This is often due to how data is presented, in a form that can be boring and disengaging. In order to have reliable information shared as much as false information is shared it needs to be as easy to share and as understandable as false information tends to be.
8
Using 3D visualisations makes our application far nicer to both view and share in comparison to numerical data on charts or even in plain text. In the future we would like to extend this to also have a share to social media button within the interface. This will vastly improve the likelihood that this information is shared on social media. We hope that this will greatly help support reliable information and refute false information.
9 By showing the data on a nice 3D map of Bristol we can see a good comparison of air pollution levels around Bristol. However, if there are months where a certain location has not been recorded by the council, people will notice the dramatic difference in how the map looks. By showing people gaps in what the council has
Insights recorded, people may feel that they should enquire as to why certain areas have been neglected in certain time periods. Furthermore, people may wonder as to why their location has not been recorded in more polluted areas which could help provide a more accurate visualization of how polluted Bristol really is.
Conclusion Our prototype is now a working web application powered by Three.js which displays a 3D data visualisation of Bristol. It displays levels of air pollution using transparent bars and house prices which scale in size depending on their relative value. The user interface includes a
10
sidebar with a colour key for the various locations and displays the levels of pollutants and house prices. The user interface also includes radio buttons to toggle which of the three pollutants to display and a slider to select the month from 2016.
11 H.P.A.Q presents 3D visualizations of the air quality and housing prices in Bristol divided by constituencies. These visualizations provide people with easy to understand comparisons of air quality data recorded and published by the Bristol city council with average housing prices in the same areas from the Zoopla API. By comparing these sets of data, people can observe how the two may be connected and if any patterns emerge between them. Furthermore, H.P.A.Q will highlight which areas the council chooses to measure pollution levels in. People living in Bristol may see that their area or constituency is not recorded year round, if at all. This could inspire them to engage and participate more with local issues and their MP’s as air pollution is
Summary a very important issue that many people around the country care about. People can access the web application through the browser and interact with a 3D map of Bristol. The map is divided into constituencies and air pollution is displayed with transparent bars of different colors. A sidebar provides color keys to help users differentiate between each location. 3D models of houses are placed in each location to display the housing price. Larger houses represent higher prices, which is also communicated through the sidebar. People using the application can select which month over 2016 they would like to see comparisons for, and can toggle which pollutant to display (no, no2 and nox).