C Studio Log : Project III
DATA VISUALIZATION
How do you create a new form that expresses information? How do you lead people through dense information? How can the elements of interaction be expanded to let the audience engage with the artifact the way that they want to? How is that balanced with giving them sufficient guidance and scaffolding?
Looking for relationships in data. What do we want to communicate? Form studies. We will create an interactive digital artifact which expresses the data in an informative way. This is a proof of concept, not a fully executed prototype. The emphasis is on exploring form, not on fun digital interactions.
What questions do we want to ask?
Is it time based?
Is it location based?
Map relevant aspects of the data to spatial axes in a manner which makes a logical, clear, statement that supports your position on the data.
10 • 14 • 17 INTEREST
I was interested in air and water quality, but neither of those data sets have significant robustness (Or I just really don’t know what I’m doing, it’s hard to tell, either way I couldn’t make it work). Both the hospital records and food source locations seem robust, and there’s probably a connection between them so I will go in that direction, see if anything exists there.
10 • 16 • 17 READINGS AND REPRESENTATION
How do concrete-abstract and form-representation intersect? Are the lines that make up the letterforms of FACE more abstract than the lines that make up symbol of a smiley face?
Visual Variables:
- Line
- Shape
- Weight
- Color (Hue|Saturation)
- Texture
- Value
- Position
Audio Variables
- Pitch
Time Variables
- Pacing
- Duration
- Frequency
The representED world vs. the representING world. What I like about this dichotomy is that it remains truthful about two critical things: one is the fundamental mystery of reality, the other is the essential non-it-ness of models and representations. With the rise of computers and more advanced modeling and representation techniques, I notice a tendency to conflate models of reality with reality itself. I do acknowledge that models have a reality, but it is not the same reality as the thing they represent, the representED-representING split captures that nicely.
FIRST IN-CLASS DISCUSSION
I spent a TON of time trying to make air and water quality data work, but eventually I realized I just have to cut my losses and look for something else. I am significantly behind others at this point, but if I work hard maybe I can get back on track. Gray found an awesome data set on car crashes, I was super jealous because I haven’t been able to find a functional set that asks a good question. I also don’t want to just steal someone’s idea. I noticed that his set includes info on bicycle crashes, I got hit by a car right in front of MMCH last year, so this is an issue that means something to me. I realized I can put this together with info on bicycle trips. I’m pretty sure this will lead in a useful direction. Above are my initial sketches for my idea.
We received feedback in two phases today. First was an extended one on one session which I found very useful. The second was a disconnected whiteboard session in which two classmates gave me feedback while I was not there. I found this less useful because they were unable to orient to my concept fully (which is a useful indication of how unclear it is) and they left me cryptic post its, many of which I don’t understand. I think this could have been much more useful if it was a conversation, but I am looking at it as a form of user testing which tells me that although my concept is clear to me, it does not communicate itself well to others.
10•18•17 DATA STUFF
Where I am at with this project: I have a clear concept and data sets picked out. The limiting factor will be whether I can learn Excel operations and functions well enough to do the number grinding that I need to without burning myself out or taking too long. It’s going to be interesting.
Last night and today I practiced some functions: =COUNTIF, =SUMIF, and =AVERAGEIF. I also learned to filter and order columns. I had some experiences with data over the summer, they were uniformly terrible and interacting with data seems like a great way to be permanently and deeply unhappy. Good times. That said, I certainly need to be able to do the basic matrix manipulations that this project will push me to do, so I am going to do small segments every day and just grind through it. The crux of my data manipulation will be a comparison between amount of rides between bike stations, and amount of accidents between bike stations. This isn’t as simple as it might at first seem. Each trip is registered as a separate line with start and finish as data points. I will have to collate and record the amount of trips between each station for every other station. This will take time.
10•20•17 DATA SORTING
I have managed to separate out each station’s ride data, each rental is listed as a separate line and is sorted per station. Now I need to come up with a system by which I can start to map, compile or record the trips in between each station. This is going to be a little complex. Each station has about 1,000–1,500 trips recorded for the year, so there’s more data than I can do anything with by hand. Part of this is a mechanical problem: I’m not sure how to manipulate the data in Excel. The other is a mathematical or conceptual problem: how to begin mapping and recording all of the data points without wasting a huge amount of time on a brute force intermediate step of number crunching. Now that I have some data, I think it might be wise to ask one of the more knowledgeable people in my cohort how they would go about this data transformation.
10•21•17 IN CLASS : PEER REVIEW
I got some useful feedback from other students: most everyone said that my concept is clear and that the mapping to visual variables is clear. Currently my question is:
How will observing HealthyRide bike station locations, bike rental trips, and geolocated bike accidents reveal safer and more dangerous regions to bike in Pittsburgh?
Visual Variables
Shape = amount of bikes @ station
Line = start and end of rental trips
Line Weight = amount of trips per year
Color = relative safety of route, # accidents / # trips
Feedback
Scott pointed out that mapping all 21 (note from later, it’s actually 89 {even better!}) bike stations would be totally impractical, so I am reducing the number to 10, the 10 most used stations (Another note from later, the 10 most used stations are all packed downtown which will be ugly and uninformative to visualize, so I am picking an even geographic distribution).
Melody pointed out that although line weight is cognitively clear in representing amount of rides, it is hard to make cross comparisons between fine gradations of width. Therefore I should bucket the ride amounts and display them as different amounts of connections between stations, say between 1 and 10 connections. This way viewers can make simple numerical comparisons quickly. A great idea. At left is a rough sketch of the change that she suggested. My original is on left, her suggested form is on right. I think this is both clearer and more attractive.
Next Steps
My hangup is still data manipulation. I’ve continued to watch lynda tutorials, but I still can’t get the data that I need. Scott kindly volunteered to help me since he is much better at Excel. The key manipulation I need to make is to sort a large list of individual rental trips into simplified pivot tables which tell me how many total trips occurred between each station.
EXPLANATION | PRESENTATION
DATA HELP 11 • 28 • 17
Scott helped me tune the settings in pivot tables in about 2 minutes, something that I had been trying to do for two weeks! Thanks Scott! Here are the settings on a proof of concept table. This isn’t my data set, I just wanted to get the SOP worked out before applying it to my main data set which is quite large.
DATA PROGRESS!
So I finally got my data sorted into a pivot table, and discovered that there are 89 station! Which is just a couple too many. Here’s what I got:
CONSTRAINT
So, I need to constrain my station list, but I want to make sure that the stations I select have a good geographic distribution, so I hopped online and found the following map, from which I selected 10 stations.
MORE DATA MISADVENTURES
So after selection, I tried to filter the main data list, which appeared to work, but when I selected this filtered data for a pivot table, all 89 of the stations re appeared! Awesome. So I copied the filtered data set to a new workbook and created a pivot table which succeeded, awesome!
FINAL DATA SET
Now what I have to do is figure out a recording SOP, and add up all of the appropriate cell combinations. Once I have that locked down, I can get down to form exploration.
11 • 29 • 17 CRASH DATA ADVENTURES
So, with some help from Scott, I managed to messily wrangle the trip data into something semi usable, awesome. Now it’s time to figure out the crash data. The crash data set I got from Gray is slightly large, near to 70,000 lines. This is particularly joyful because my sad ancient laptop really can’t handle it, so I’m on the desktop for the most part right now. The set includes data from many years, I decided to go with just one year because the ride data is also from one year. I got everything all filtered and set up nicely and there are 35 crashes. This seems like a good number: enough to work with, not so many that mapping each one by hand is going to cause me to lose sanity.
Fortunately this data has date and time as well, so that will set me up for the interactive component pretty well in the future. Next up, placing these on a map, along with the stations and routes. I’m not sure if arcGIS is the way to go here, or if I should just go with a scatter plot and superimpose it on a map using landmarks as a prototype first. Maybe I’ll ask some of my colleagues tomorrow.
11 • 30• 17 IN CLASS TRIANGULATION
Today in class was all about getting all of my global positioning data mapped into my illustrator file accurately. Vikas stopped by and happened to know pretty much everything about arcGIS! Awesome.
Below is a map of all of the cycle accidents from an Allegheny County data set. I learned from Vikas how to add data sets to a map, adjust the geographic representation and plot points.
After getting the data mapped, I tried experimenting with a heat map. I’m not sure which representation is most useful. They both do good things, but I’ll be able to make the decision once I see my bike station and rental trip data visualization.
What I like about the heat map is that it shows me clear danger corridors, where accidents are concentrated. I’m interested to see how this meshes with the ride data.
So now that I have the crash data mapped out (the form isn’t final of course, but I at least know that I can make it work) I need to start getting the bike stations and trips mapped out in Illustrator. Here’s where yet another totally awesome adventure begins. I could just estimate it by looking at the map that HealthyRide provides and taking an educated guess on my map, but that’s not good enough. I hopped on google earth pro and mapped the precise latitude and longitude locations of each bike station. This took a bunch of fiddling to figure out, but actually it wasn’t that bad (thanks again to Vikas).
First I had to sort and filter all of my position data for the bike stations. This actually wasn’t too bad either: there are only 89 lines and I’m starting to become a little more familiar with Excel … awesome :)
Next up will be bucketing all of my rental ride data so that I can start looking at visual options for the connections. I need to come up with some kind of system for getting all of these numbers organized. I wonder if I can use pivot tables again? We’ll find out on the next episode of Adrian’s Super Lengthy Medium Post …
12 • 04 • 17 RIDE TOTALS AND BUCKETING (HOPEFULLY)
My aim for this session is to total up all of the rental rides and then come up with a rational bucketing system for them. I had intended to get more done over the weekend but things went a little sideways with Molly’s paper and presentation. I’ve been struggling with that assignment and I was only able to sleep for two hours last night. Anyway, I couldn’t figure out a clever efficient way to total up the rides automatically because I don’t really know how to make pivot tables out of pivot tables. Everything is pretty much ready to go, the work is 90% done, I just have to do the last step manually, I don’t think it should take more than an hour.
At left are my numbers of rides, broken out by station. This didn’t take too long, it was pretty boring but thankfully brief. I realized that I had misguided myself previously, when I looked at my pivot table containing the total ride data, I saw numbers in the thousands and I mistakenly thought that all of the stations had thousands of rides between them. It turns out that the vast majority of rental trips (I mean like 95 or 97 percent) originate and end at the same station.
Now, when I think about it, that makes total sense. But because I have framed my entire project around trips from one place to another, I had essentially discounted the notion that people would rent a bike and return it to the same place. In fact this is by far the normal behavior. Because of my bias and also the fact that I always ride my own bike as opposed to renting, I had a totally skewed idea of what the data set would look like. I think it’s still going to work out OK, the numbers are just much lower than I had originally anticipated. There is still a large variation, so I should have plenty of room to make interesting groups.
Already I’m noticing some interesting patterns. Most stations are in the 0–20 rides range, but a few are in the hundreds. This means that there are definite major corridors of travel, I wonder if they will match up with the corridors of accidents that I saw on the heat map I generated last week. We’ll see tomorrow …
12 • 05 • 17 RIDE AMOUNT BUCKETING
Potential Buckets
0–5, 6–15, 16–50, 51–250
0–25, 26–50, 51–75, 76–100, 101–125, 126–150, 151–175, 176–200, 201–225, 226–250
Looks like the second one is the way to go, it’s more accurate and honest.
Visual Design
I started out with a pretty organic depiction of the rental rides. My thought was that it would fit in with the notion that there are lots of different meandering pathways that cyclists take. Once I saw it though, I saw that it was not going to work. One, it looks bad. More importantly though it’s not very clear. When I cleaned up the lines, as seen at right, things became clearer and looked more polished. I want viewers to be able to make simple, immediate comparisons, so need to make visual design decisions which support that clarity.
Here is a more built out version. Although this is better, something about the straight lines doesn’t seem to match the curves well. Also, I think my scale may need to be adjusted. With so many connections being single lines, it seems hard to read and the prominence of the wider pathways is diminished. Once everything is on the map, I’ll try implementing an additional scale to sub-categorize the 1–25 category. I hope this will diminish the prominence of the single line connections: this will help communicate my intention (I want people to see the more frequently used pathways prominently, which this version does not achieve).
Visual Design : Bringing Out the Story
I spent a lot of time tuning stroke weight and then balancing value in the lowest category. At first I tried breaking 1–25 into 5 different segments with 5 different values. This was interesting but didn’t provide me much because the data is so heavily clustered that the more complex scale didn’t reveal anything useful. So I switched to a two level scale and brought the value up until it was just visible but not obtrusive. To me, the emphasis clearly rests on the connections with many strokes, but the other lines are still apparent without being a distraction which is what I wanted them to do.
Next up is to categorize the bike station parking spaces and create a visual scale for that information.
This data is pretty heavily clustered as well. I implemented a simple dot scale as a test to see whether this is useful information to include or if it just gets in the way.
I think it is useful and informative to see this, but it doesn’t fit with the rest of my visualization. This is a style problem, I want my visualization to have a cohesive visual voice and these dots disrupt the subtle, sensitive map that I’ve been trying to build. I think reducing the number of buckets to three and designing a pleasing bike rack icon will improve this significantly. Let’s see how it goes …
ICONS
Turns out these didn’t work very well, awesome :( They’re too complex and hard to read. Because everything around them is relatively visually quiet and subtle, these icons draw too much attention and actually are pretty hard to understand. Worst of both worlds. Also, because of how wide they are, they begin to occlude some of the ride lines unless they are very small, which makes them even more indecipherable. Round two!
So, this looks pretty good. However, When I zoom out to the level that this will be presented at, the spacing in between the racks doesn’t work well. You can’t perceive the gap, and yet you can perceive that the space is wider than it should be, it just looks off. Time to head back to the icon board …
I hope this new round of icons will be better, I used a little bit of value change to imply receding, and in this iteration the icon also changes scale in total nicely, which is a helpfully consistent detail. Let’s see how it works on the map …
Sadly, those didn’t work out either. They looked good up close, but didn’t read well from distance. Lesson learned : I need simplicity here. The simplest solution seems to be : if there is a problem with the spacing, get rid of the space. This isn’t a super attractive icon, but at full size it reads clearly and doesn’t draw undue attention from the rental trips, which are the most important part.
Final work for the night, I cleaned up the background and made the river just a little stronger. I think it situates everything much better.
I also made a white on black version. This was my original intention, but our projectors have an adaptive luminance “feature” which completely ruins any white on black image that you try to project. I’ll keep this stylistic alternate going, but it won’t appear in class. To make it work, I had to bump the stroke weights up by .25 in the single lines and .5 in the grouped connections in order to achieve the same visual balance. It was an enjoyable exercise in detail.
12 • 06 • 17 PROTOTYPING
I started off today by working on putting in controls, a title and thinking about a key. At first I started off with a split key/layers panel in the bottom right, but as I was making it, I felt that it looked cluttered and didn’t serve much purpose. I’ll show people tomorrow and see if anyone is confused or thinks it needs a key.
In terms of typography, I started off using Titillium, which I found through the CMNH website when I was working for Professor Marti Louw. It fits visually with my map well, but didn’t end up working out because my line lengths are generally pretty short and Titillium is a little narrow, so it just looked wrong. I switched to Montserrat which is an OpenType font that I’m starting to use more frequently. Although I don’t like the look quite as much, it is a little shorter and wider which helps the overall page composition.
At left are my controls for the prototype. I styled them a little bit off of map keys that I observed, but it is simplified and subdued. Each of the circles will be clickable, allowing the user to add that layer to the map.
I plan to use Kite Compositor which I had good luck with for a screen prototype in lab earlier this semester. The circles will turn red as the layer appears on the map.
HEAT MAPS
Currently my map has geography, stations and rides and it looks decent. Next up is generating heat maps of crashes involving cyclists from arcGIS, then I will have to composite them in Photoshop into usable layers with transparency.
Wow. So, compositing actually turned out to be a nightmare. Because arcGIS uses a gray background, it was really hard to extract the visual data without it becoming so dark that it would obscure my ride info, or become so transparent as to be uninformative.
After working for 2 hours between Ai and Ps I finally have something decent to look at, below are some of the failed attempts.
I re-tuned arcGIS, changed my color mapping, and just made a ton of tweaks in Ps until I got this:
Now I just have to do that entire process two more times to get AM and PM sorted crash data sets. I hope after muddling through the first time it will be fast this time around. We’ll see …
So now that I have my heat maps, it’s time to get all the color balance right, export everything to Kite and get to work making it clickable.
Kite went pretty well, it took me some time to figure out how to make toggling buttons but I’m on my way now. I’m interested to hear people’s feedback tomorrow.
12 • 7 • 17 IN CLASS FEEDBACK
I thought that we would be giving a demo of our system, so my visualization does not have as much narrative scaffolding as it should. People were confused by the bike rack icon and line weight in addition to the narrative. People were also confused by the lack of key. Also, they suggested a hover state for each station to give further info, which is a great idea, and will give me the opportunity to master new skills in Kite, awesome!
PLAN OF ATTACK
- Add a key
- Make stations and rides toggle-able
- Make hover states for stations
- Create an intro of some kind (bike in stand + words)
- Explanation of what “rides” is
12 • 8 • 17 SKETCH AND KITE SKILLZ
So I’ve been resisting the Sketch bandwagon. I spent a lot of time getting good at Adobe Illustrator and After Effects, it’s frustrating to have multiple competing software ecosystems which behave differently and don’t share file types. But in the end, Kite is a really good tool that allows me to prototype extremely quickly and it only works with Sketch, so, time to re-tread my digital arsenal.
Fortunately, this project presents me a perfect opportunity to do so. Many students asked for hover states on each of the stations. This is possible in Kite, and since this will require the creation of ten items that have the same layout, but with different content, I can use this as an exercise to master Sketch’s symbol function. I created some simple hover state info cards, and then input all of the information I have about each station. I included the station number, even though I’m not sure it’s very relevant information. I do notice that cognitively refer to each station by its number rather than its street address so I’m keeping the ID number in because it gives the user a simple tag to think of each station by, which may help them grasp the overall experience more quickly.
After creating all of my labels, I worked in Kite to make all of the hover states function. I think it’s important to show real hover states and not just have a click triggered slide change because the way something moves is critical for human understanding.
12 • 10 • 17 PRESENTATION CREATION
One of the biggest hurdles to reaching my objective right now is a technical problem in Kite. Now, I can overcome this technical shortcoming in presentation because I will be in control of what I am clicking, this would have been useful for demo day though, and it’s a useful concept to master. Here we go:
I have 3 different PNG assets that I wish to fade up or down over my map, let’s call them A, B, and C. When I press the button for A, asset A should fade up. When I press the button for asset C, asset A should fade away and asset C should fade up. Currently in Kite, I have only been able to create an on/off toggle, this is insufficient because it does not fade away the other two assets, or a sequential toggle, this is insufficient because I cannot open things out of order. The objective is to create a toggle system which can be used in any order and only ever allows one asset on screen at a time outside of transition.
Now, since this is a technical point that I can work around during presentation, I’m not going to let myself waste a lot of time on it, I’m giving myself one hour to try to work it out.
[@ 13:00], my time limit was [13:05] so I made it with just [00:05] to spare! I found a solution, it still feels a bit like a work around, but I have created the behavior that I want, so that’s good. I do feel that there should be a better solution, but for now this works and I need to stay focused on higher level goals.
TIME vs GEO LOCATION
So, after working out my Kite prototype issues (Sort of …) I’m considering exactly what should go into my presentation. Classmates using my prototype were confused about a couple of key things, one of them was “what exactly am I supposed to be getting out of this map?” Fair question. I’ve been staring at this map for literally weeks, and I bike frequently, so the utility (in spite of many flaws and drawbacks) is clear to me, but needs more clarity in order to communicate with first time users/viewers.
Many classmates pointed out that the comparison of morning and evening rides was confusing, my immediate reaction was “that doesn’t matter, that’s not what I wanted you to focus on”. This made me realize that the point of my visualization is NOT a time centric comparison of historical use patterns and crash data. I want people to carefully observe the relationship between accidents and amount of use per region. My question is fundamentally about regions, not times.
How will observing HealthyRide bike station locations, bike rental trips, and geolocated bike accidents reveal safer and more dangerous regions to bike in Pittsburgh?
So, I needed to help people to see regions clearly. First, I divided my map up. I tried using neighborhoods, but they were too small and the map became uselessly confused. So, I created my own regions based on similar use patterns.
Then I made masks so that the user can view each neighborhood more clearly. Below are the most revealing 3.
These masks help to isolate each of the regions and allow the user to more easily read the patterns without being overwhelmed by the whole data set. I’m glad that I’m moving in this direction because each one of my data sets took an enormous amount of time to clean, organize, parse and visualize. I had been thinking that I needed to add more data sets, but actually I think it’s more useful to help people see this single rich data set more clearly.
KITE PROGRAMMING AND DETAILS
Whew! 4.5 hours later and I’ve got a functioning prototype. Why’d it take so long? Well, so of it is just getting Sketch, Illustrator and Kite to all work together. It’s difficult because Kite imports from Sketch simply and easily but NOT Illustrator. Sketch has lots of useful stuff, but doesn’t have the precision and breadth of Illustrator. Illustrator does everything … except export to Kite. Awesome. Needless to say, there was a lot of time spent just making everything work.
Once I had something working though, it was time for some painful realizations. Here’s one : the key that I made is not only missing a section, but the mapping is wrong! In my presentation, I am going to go stations first, rides second, and accidents third. I am going to toggle the key on and off in order to help people see what I’m talking about. But the key, as I originally designed and imported it into Kite, doesn’t have accidents and it lists rides first! Originally I made this decision because having more visual weight on the left looks cleaner, but once I had tried delivering the skeleton of my presentation, it became clear that this spatial mapping was inappropriate.
HIERARCHY
Next I had to create controls for each of my region layers. Classmates gave me feedback that morning and evening accidents were a subcategory of accidents. So I made sure to apply a consistent hierarchy to my new region setup. At first, I tried to create a control surface which included all 3 data layer plus all 6 region masks. This ended up looking very poor because I had to group all 6 region masks under the heading region, leading to a total of 10 items. This seems like it would be fine, until you realize that it has to be grouped in a set of 3 plus a set of 7 (1 heading plus 6 sub bullets) and this just looked terrible.
So, I split things into two control surfaces : one with a title and 3 items, the other with a title and 6 items. This way my titles can align and my items can exist in a 3x3 grid. This is cleaner and maintains an appropriate hierarchy.
I also created status indicators for each button, the regions are meant to be toggled on/off actively and compared. The data sets are meant to be turned on and left on. Therefore my status indicators are different colors. The regions have a more active red color because they are meant to be cross compared and investigated. The data layers get a muted grey because they simply turn on and remain on, they don’t need to draw further attention once engaged.
Tonight and tomorrow I’ll be finalizing my presentation and then doing some preliminary rehearsal. Once I begin that I’m sure there will be some details that I need to change. I will also add an intro screen which states my question and generally orients people to my work.
Kite actually does all of what Keynote does, so I can make my entire presentation in Kite. I like that because there won’t be any fumbling around switching between slides and my prototype. It also won’t be just a series of slides with clickable triggers which feels inauthentic to me. I’ve basically built contextual menus which present all of the information I would want on slides, this way the presentation is seamless.
CRITICISM AND FURTHER STUDY INDICATED BY MY VISUALIZATION
So, I think I got to a point where my visualization tells a story and reveals some useful information. That said, there are some major gaps and areas for further study. I’ll just mention 3 in the interest of brevity:
- Pathways are non-specific. I only have start and end points for each trip, so it is possible that some cyclists went far away from the region I’ve mapped them in. We also don’t know which specific street routes cyclists took. In order to get this data, I would have to get IRB approval and get geolocation trackers out to cyclists and convince them to map their rides, a bigger endeavor than this project could contain.
- Private bikes are not included. Some areas of the map have little to no usage, but lots of accidents. I suspect this is because those areas are mostly populated by independently owned commuter bikes. It was beyond the scope of this study to get private bike trip data.
- Crashes and rides are not directly connected. I am stating that rides occurred and separate accidents occurred. My study would be much stronger if I had a record of trips which ended in a crash.
All that said, I do think this map says something about general regional trends. So, although flawed and incomplete, I still think it tells a true and useful story.
