Location | infovis-2015

General Description: With this display I'm trying to inform my audience how Chen's pitches spread around the strike zone (usually a piece of information that goes together with the pitch type breakdown, which I had done earlier). The approach I took with this display was to use a heat map of a type of location (the strike zone). I started with the actual number of pitches in each zone, and then I created a second version using the percentage of pitches in each zone. The color intensity represents the tendency in which the pitches were thrown to that specific region in or around the strike zone.

Emulation Description: To emulate my visual language model, I use a number of semi-transparent squares with different level of transparency to emulate the use of semi-transparent elements; I also emulate the title style from its side table. I emulate my color model by using the same colors for text and text background, and I tried using the single orange with different opacity for the 1st display and the gray-orange mix for the 2nd display. I emulate my typography model by using Arial Narrow Bold and all caps for the title and Arial Narrow for annotations.

Displays that exploit the visual potential of location

Critique #1: Albert Corsten

When I showed him the 1st display, his first impression was that the title was very straightforward and the display was informative. He said it definitely would work for people who know about baseball. He could tell that the darker the orange, the more the pitches were thrown to that region ("very easy to tell").

When I showed him the 2nd display, he could realize that it was using the actual numbers rather than percentage. He liked the gray-orange contrast because it was lot easier to tell the differences. However, he suggested using percentage instead of actual numbers because making comparison between percentage is easier and more meaningful to him.

Model Emulation Feedback

When I showed him my models, he thought my displays emulated the flat design and typography well. As for my color model, he said the 2nd display matched better in the use of gray-orange for comparison between high-low numbers.

Revisions based on this critique

For the 1st display which I revised on, I altered the color opacity for the regions a little to make the color difference slightly more obvious between the low and high percentages.

First Iteration

Final display:

Second Iteration

Sources: https://baseballsavant.mlb.com/player?player_id=612672&player_type=pitcher#

Critique #2: Yvonne

When I showed her my displays, she could tell that the display was showing the strike zone from the catcher's viewpoint ("the annotation quickly catches my eye"). She could tell the dark gray square represented the strike zone. She thought both displays had a lot of data so it was a bit overwhelming, but it was ok because the data were presenting in the conventional way. She preferred the use of percentage over actual numbers since she felt percentage tells more about how likely Chen pitched to certain regions than the actual numbers.

Model Emulation Feedback

When I showed her my models, she thought my displays emulated the typography and visual models well. She felt that the gray-orange combination in the 2nd display was a little iffy because my color model used gray-orange to make a contrast between different people. And thus she said using all orange with different opacity fits my color model better.

Revisions based on this critique

I did not make any revision based on this critique. However, this critique helped me choose to work from the 1st display since it matches my color model better (use orange solely for Chen, while using gray for other players).

Critique #3: Marilyn Ostergren

When I showed her my displays, she found the encoding a little bit unintuitive because each of the regions around the strike zone seemed to represent a larger area than the regions in the strike zone, which she thought would skew the data. She also thought that the use of black lines around the strike zone did not place too much emphasis and made it appeared as if it as a display on top of another. In addition, she suggested adding a bit of annotation to tell the audience what this display was trying to convey (whether it's saying things about his pitch command or effectiveness).

Model Emulation Feedback

When I showed her my models, she thought both kind of followed the color model, but I have to make a decision on which color combination to choose for the regions (depending on the overall color convention I went with).

Revisions based on this critique

I redid the strike zone by making the stroke widers so that the display placed more emphasis on the strike zone. I also changed the color of the stroke from black to white to match my color model (no black stroke linings for flat shapes). I added a brief annotation explaining that the display showed Chen was successful in spreading his pitches right around the strike zone.

Critique #3: Kelsey

She liked the use of different gradient for each region of different percentage. She thought it was a bit confusing to non-baseball fans since she didn't know much about baseball and couldn't tell that the display was a representation of a strike zone. However, she said the annotation helped her understand the concept a little bit, which was good.

Model Emulation Feedback

When I showed her my models, she said it emulated the visual language well (numbers on region match the model). However, after looking at my color model, she was just a bit worried about the use of gradient since my color model didn't use gradient to represent different things but use different colors instead.

Revisions based on this critique

This critique also gave me the idea of adding "Strike Zone" to the display since she couldn't tell that the display represented a strike zone. I kept my use of gradient because I would like to keep using orange solely for Chen in my infographic.

Critique #2: Luis

He could tell that the display was something to do with baseball. He thought the color was good; he could easily tell the darker orange signified higher percentage. The annotation helped explaining the purpose of the display, but keeping it to the bottom seemed to prevent people from reading it on the first sight (which could possibly affect how they perceive or read the display).

Model Emulation Feedback

When I showed him my models, he said the color worked out pretty well, and the display was in align with my visual model. He said if I wanted to put more focus on the strike zone, I can try to make the region dividers a little thinner while keeping the stroke width of the strike zone the same.

Revisions based on this critique

In order to place more emphasis on the strike zone, I adjusted the white linings for each region. The stroke for each region has decreased from 6px to 2px and the stroke for the strike zone has increased from 20px to 40px.

Critique #1: Christy Phan

She thought color scheme was good; she like the color encoding, in which the darker the color, the higher the percentage, because it appeared clear to her. She said the title was helpful in explaining the topic, and the description helped explaining the purpose of the display. She pointed out the display was a bit of confusing for non-baseball fans, since they don't know the concept of strike zone well. So she suggested adding a brief annotation on what a strike zone is.

Model Emulation Feedback

When I showed her my models, she said my display emulated the models well. The choice of color seemed to match the model batter.

Revisions based on this critique

I added the annotation "Strike Zone" to the bottom of the location map to indicate that the display is a representation of a strike zone. I chose not to include a brief/detailed explanation of a strike zone because my expected audience is someone who has some idea or basic knowledge about baseball.