Team Members: Lauren Wolfe, Marius Maaland, Jacob Ward, Han Zhang

Explanation:

1. The graph shows the house price of a designated month and year.
2. Left bar: price of condo; Right bar: price of single-family house.
3. Cover period: April 1996 - March 2017.
4. Complete neighborhoods will be provided in final project.
5. Use slider/selection bar below graph to make selection.
6. Hovering your mouse over the bar will show the exact price of the month.

Design Rationale

1. This prototype intends to provide an easy-to-use tool for the audience to explore the housing price in different Seattle neighborhoods. This will help current residents to assess the value of their current houses; and potential home buyers to explore neighborhoods within affordability.
2. Our team wants to show the price of both condos and single family houses in the same chart, while showing monthly and yearly price change.
3. We explore different types of graphs, including bar chart (condo/SFH side by side), line chart, geographics maps, and treemap.
4. Our preferred graph will be a geographic map and we have already found the neighborhood topojson files and started working on the map. This is ideal because the audience can hover over/touch different neighborhoods and see the corresponding prices. This makes it easy for the audience to explore neighbourhoods they don't know by name, but might know the rough location of. However, due to time constraints and unfamility with the development tools, we have to push this idea to final project.
5. Bar and line charts are easier to execute but we feel that they are not as appealing to the eyes of the audience. i.e. not consumer-friendly enough.
6. We settled on the "population pyramid" chart which can demonstrate the price trend of a designated neighborhood. The biggest problem with this design is that the audience has to be familiar with name of the neighborhoods. The second problem is that there are close to 100 neighborhoods in Seattle, and the dropdown list may be too long to search with such a long list. So for the prototype, we picked 10 neighborhoods to explore feasibility of the technology.
7. Once the graph type is decided, we will start to work on color, space, size, animations etc.

Development Process

1. Our team first discussed what subproblem to solve. Our intial goal is agressive (with final project in mind as well): we want to see what factors influence Seattle's housing price.
2. The team then discussed what kinds of datasets are needed and how to collect them. We collected crime data by neighborhood, housing price, and others.
3. We all agreed, after discussion, that a map would be an optimal encoding tool for the audience to explore.
4. However, we immediately encountered a problem upon starting development. The biggest problem was to familiarize ourselves with the software tools. D3 is powerful but involves a lot of technical details. In light of the May 03 deadline, we didn't have enough time to go into the small technical details.
5. We decided to scale back our initial goal and find better tool. So, for this prototype project, we chose a single dataset (housing price) and vega.js. The logic is to get the interactive visualization up and running first, so that the team has an idea how deep the water can be.
6. Still, the process was more complicated than we expected. We didn't have tools to DEBUG the process. We scratched our heads for a while trying to figure out why the graph didn't show up in the browser, until we learned that we had to use a .json file instead of a .csv file. We also learned, the hard way, that json files are case sensitive.
7. After repeated tests, when the interactive graphic finally appeared in the browser, we moved forward to add other features, such as hovering etc.
8. We estimate that the prototype took 4 people x 10 hours = 40 hours. Roughly half of our time was spent to get familiar with and experiment with the software tool. Probably a third went to design.
9. We expect that in the final project, design will take about 40% of our time and that web development will take another 40%.