Wei-Yin Chen
Designed by Chen-wei Kevin Chiu
General Description: With this display I'm trying to show my audience the statistics about Wei-Yin Chen's career starts breakdown. I start with a stacked bar graph which shows the win/loss/no-decision from Chen's career as an attempt to display his performance over the years. I then use as a donut chart to display the % of quality starts by year and overall in his MLB career.
​
Emulation Description: I emulate my visual language model in that I use simple, flat arcs for this display. This display emulates my color model by using orange as the main color for emphasis and light gray for other elements. To emulate the typography model, the font used in this display is Arial Narrow Bold, and the title uses all cap while the annotations are in regular font style.
First display that exploits the visual potential of numbers
Critique #1: Halle Friedland
When she saw the 1st version, she liked the use of stacked bar graph because it's simple, straightforward, and easy to understand. She liked the use of colors (orange for wins, dark grey for losses and light grey for no-decisions) since she could associate the brighter color (orange) to win and the darker one (grey) to loss. The labels (x- and y-axes) help her comprehend the information. In addition, she likes the use of orange grid lines since they added a bit of visual to the overall.
​
When she saw the 2nd version, she said she definitely preferred the donut display. She liked the aesthetic of it and the use of donut chart to represent percentage. She thought the title with the key term "MLB" helps her understand the context better then simply stating out "career starts" as in the 1st version. She like the emphasis of 53% in bright orange. She found it a little difficult to follow the numbers on the outer circle because they are too small ("unreadable") and she originally found it hard to follow what each arc represents (the year label wasn't so obvious).
​
Model Emulation Feedback
When I showed her my model she thought I emulated the flat designs. She said the use of donut appeared to be parallel to the circles and the arcs used in my model.
Revisions based on this critique
Based on this critique I added the year numbers onto the arc such that it appears more clear what each arc represent. As for now I'm still leaving the % on the arc but I've changed the color to the dark gray just to see how this may affect my audience's perception on the numbers. If it doesn't turn out well I'll try another approach.
First Iteration
Final display:
Second Iteration
Sources: http://twbsball.dils.tku.edu.tw/wiki/index.php/%E9%99%B3%E5%81%89%E6%AE%B7
http://www.baseball-reference.com/players/c/chenwe02-pitch.shtml
Critique #2: Chris Leatham
When he saw the 2nd display he said it looked interesting but confusing because he didn't know the baseball terms and would suggest using footnotes for explanations. He said the colors appeared to work well with what each represents. He found it a bit difficult to follow the numbers along the arcs and associate each with a distinct year (i.e. if he wants to know the data for 2014, he has to follow from the inner/outer arcs and count toward it), so he suggested me to play around with the labels (years, percentage, etc.) to make them more intuitive/clear to the audience.
​
When he saw the 1st version he thought it was ok. Use of bar graph is good for the data set, and the overall look was simple, but he preferred the 2nd display.
​
Model Emulation Feedback
When I showed him my model he said he preferred the 2nd display, because my visual language model uses a lot of circles and so did I in the 2nd display. He said the colors matched with my color models. However, he said I should experiment by changing the dark grey to light grey because in my color model, it uses dark grey for labels and light grey for the actual visual elements.
​
Revisions based on this critique
Also with this critique I chose to move the year onto the arcs. From Brian's critique I came up with the idea of adding a short background to the year numbers so that they appear more recognizable from the main donut graph. Also, I've changed the color of the no-decision arcs from dark gray to light gray and the color of the text annotation from light gray to dark gray to match my color model. In addition to these, I've added a brief explanation to the term "Quality Start".
Critique #3: Kevin Ke
When he saw the 1st version, he liked the use of stacked bar graph in representing the data set. He thought that the combination of larger font size on the y-axis and the orange grid lines helps him connect the numbers to the bars.
​
When he saw the 2nd version, he said it looked more interesting on the first sight. He light the emphasis of 53% at the center of the inner donut with the comparison to the league average of 51%. He found the arcs on the outer donut a little confusing because he wasn't sure what each represents.
Model Emulation Feedback
When I showed him my models he thought the display is a good emulation of the model, as I'm using circles/arcs (similar visual elements from the model) to represent data. After seeing the models he said he definitely preferred the 2nd one more, since the 1st display uses more straight bars that aren't present in the model.
​
Revisions based on this critique
Again, with this critique I moved the year numbers from the area next to the donut onto the donut itself. While I chose to change the color of the annotations, I chose to kept the precision ("53%") in orange since the critiques seemed to like the emphasis placed on the number through the use of the brightest color in my color model.
Critique #3: Thomas Tseng
He thought the display looked interesting on the first sight. He found it interesting that I changed the non-quality starts arcs from dark gray to light gray. He said it was good that I moved the year as the next-to-the-arc annotation onto the arcs themselves because it helped him track the arcs better. However, he thought that by giving the years a dark gray background with their own section on the donut made it as if they were their own section, so he recommended me to try placing the years on the light gray arcs so that the years can appear less distracting.
Model Emulation Feedback
When I showed him my models, he said I emulated my color and visual language models in overall (text-background combination and the use of circles). However, he noted that the center circle on my color model was orange while that of my display appeared to be white. He suggested me to change the color of center circle to orange and play around with the colors of annotations/texts to make it match my color models better.
Revisions based on this critique
From this critique, I redid the year annotation a little bit, by removing the dark gray section and directly placing the years on the arcs. I've also changed the color of the years from white to dark gray to match the visual elements/color combination from my models.
Critique #2: Susan Wolfgram
She liked the choice of colors in the revision because the light gray placed less emphasis on the non-quality starts, creating less contrast in comparison to the previous version. She also liked how I placed the year right on the arcs to make it easier to follow. She preferred the use of dark gray texts on orange background (as oppose to white texts on white background in the previous version) because it created stronger hue contrast and made the texts more recognizable. She thought the annotations looked good when the display is enlarged, but she was concerned that the light gray color will make the text less recognizable if the display is small.
​
Model Emulation Feedback
When I showed her my models, she said I followed the color and visual language model in general. The text-background combination matched the model in most parts, with the exception of the orange text of "53%" at the center. However she thought it was a good choice because it placed a strong emphasis on the precision, which might be my intention.
​
Revisions based on this critique
I chose not to make any changes based on this critique because the color of the annotations are to be matched with the sections that they indicate, which should match the color combination in my color model.
Critique #1: Justine Edrozo
She liked how I placed the year on the arcs because it helped her follow the numbers easier. She said it was good that I included a mini-footnote on the definition of quality start to help the audience understand what the topic is about better. In terms of the use of color, she like my revision because the dark gray background on the white text helps her read the years.
​
Model Emulation Feedback
When I showed her my models, she said I definitely emulated the colors and visual language well (the choice of colors and the use of circles). The only thing she noticed different was that the center circle appeared to be a white circle with orange and dark gray texts, while the the center circle in my model was a orange circle with white and dark gray texts. She recommended me to experiment to add a large circular background behind the center text to match my color model a little bit better.
​
Revisions based on this critique
Based on this critique, I've added a orange circle to the center of the chart as the background for the overall statistics. I've also tried to changed the color of the texts. I decided to use white for the overall statistics of Chen's quality starts and dark gray for the league average to make a better distinction for the two separate sections (even though the color model uses white for texts and dark gray for precisions).
version 1
version 2
First Iteration
revision 2
revision 1
Second Iteration
Critique #3: Andrew
He could tell that the display is about the pitch type breakdown from the title ("it was clear"). He could read the numbers for each pitch type clearly because the annotations were done well. He could tell that the number in the center represent the largest, orange section of the donut charts. He could see that the display was trying to compare the use of 4-seam fastball for each of these pitchers because the section of which was in orange ("a strong emphasis on the 4-seam fastball"). However, he was confused about the separated gray sections for the donut charts at the bottom since they weren't annotated. He recommended combining the gray sections for the comparable pitchers since they were the main focus for this display and would only add confusion otherwise. Also, he only noticed that the data set is from season 2015-2016, and he suggested moving it to the top so that the audience would know this piece of information first.
​
Model Emulation Feedback
When I showed him my models, he thought the display emulated my color model well ("gray and yellow-ish orange...make sense"). He also said it matched my visual language model with the use of circles with numbers in them.
Revisions based on this critique
I redid the 3 donut charts at the bottom by combining the smaller gray sections so that the focus is now only on the orange fastball section. I also took the annotation "Statistics...2015-2016" to the top and combined it with the title.
Critique #2: Becky Fuller
She liked the use of different colors on the previous display because it appeared to differentiate the different pitch type a little better. At first she was confused about the percentage at the center of the donut because the dark gray precision didn't immediately connect her to the orange section. She could tell that the display was trying to make comparison between the main donut chart to the 3 smaller donut charts, but it wasn't clear to her in what it's trying to compare. In overall, she liked the revision though.
Model Emulation Feedback
When I showed her my models, she said my display emulate the visual language and color models pretty well ("a lot of circles going on...same color balance). She especially liked the choice of taking the combination of orange line and dark gray texts from the main circle in the model and using them as identity annotations. She noticed that the color model played around with the transparency of the circles and recommended me to play around with the concept.
​
Revisions based on this critique
This critique also gave me the idea of adding the heading to better inform my audience that this display is focusing on making comparison. However, I decided not to change the color of the main percentage at the center of the donut chart because my color model uses dark gray as the color for precisions. Also, I kept the light gray-orange color combination for the donut charts because I want to place the focus on the use of fastball
Critique #1: Woosuk Seo
He liked the changes in color since the revision places more emphasis on the "4-seam fastball" section. He also liked the percentage at the center, because it's clear that it was the data that I was focusing on. When he saw the 3 additional donut charts at the bottom, he was a little confused at first, but he could tell that I was trying to make comparison to the main donut chart from the use of color coding. He suggested placing some sort of annotations to the bottom 3 charts (such as a subtitle or a "v.s."), so that it's more clear to the audience that the display was trying to make comparison.
Model Emulation Feedback
When I showed him my models, he thought my display emulate the colors pretty well. He said visual language-wise, I emulated the circles from the visual language model. However, it appears a little different, as if I combined multiple visual language elements into one.
Revisions based on this critique
I added a heading above the section for the 3 donut charts to indicate that this display was making comparison between Chen and the comparable lefty pitchers.
Critique #3: Kerstin Huang
She thought the 1st display was very clear. The information was well spread out and easier to read. She definitely preferred the 1st display, because she said the 2nd one had too much information. The 2nd display appeared to be too overwhelming on the first sight, and the connections between the numbers to the sections of the chart were less clear to her.
​
Model Emulation Feedback
When I showed her my models, she said the displays emulated the color model pretty well. However, she thought the display could've emulated the visual language model a little better if I were to emulate the number table (the model used a portrait of a player).
Revisions based on this critique
Since I chose not do revisions on the 2nd display, I have not made any revisions based on this critique.
Critique #2: Jon
He could tell that the 1st display was showing a lot of information about baseball, pitching specifically because the title was clear. He could tell that the donut was broken down by pitch type.
​
He found the 2nd display harder to read, because there was a block of information. He wasn't sure if the donut chart even add to anything because the table of numbers seemed to be able to work on its own even without the chart. Thus, he preferred the 1st one better.
​
Model Emulation Feedback
He said the displays were good on the color, but he said the model seemed to use the colors a little different than how I used it in the display. The model used 1 color for each separate element, whereas I combined them into one display. So he said I might want to change the colors for the donut a little bit. The use of light gray parallelogram and circles seemed to match my visual language model.
Revisions based on this critique
I changed the colors of the donut chart into a combination of light gray and orange, where the orange is used as an emphasis on the number I want to focus on. The 3 additional donut charts also followed this same color combination.
Critique #1: Nichelle Song
For the 1st display, she liked the use of donut chart instead of the full pie chart style. She liked the labelings outside rather than on the sections because it looked cleaner. In overall the display looked pretty clear in what it's trying to convey. However, she recommend moving the summary statistics into white space in the circle since it felt like the parts (pitches per type) added up to a whole (the total number of pitches thrown) and would make more sense to incorporate it into the display.
​
For the 2nd display, she said she could see a lot more information. She was confused by how the additional information helps at all. She could tell what each section represented since she saw the 1st display first, but she thought that other people might be confused when they tried to match the donut chart to the row (i.e. which exact column of data the chart was trying to show). And thus she definitely preferred the 1st display.
​
Model Emulation Feedback
When I showed her my models, she said I definitely emulated the models pretty well. The colors were working fine. She could tell that my 2nd display was trying to emulate the number table elements to the left of the model, but she thought the 2nd display had too much information that could be separated into 2 charts.
Revisions based on this critique
I chose to keep the summary statistics at where they were since they weren't my main focus. Instead, I moved the % of 4-seam fastball used by Chen into the white space at the center of the donut chat because I want to compare it to other successful pitchers.
First Iteration
Sources: https://baseballsavant.mlb.com/player?player_id=612672&pos=P&player_type=pitcher&season=2016
General Description: With this display I am trying to communicate to my audience that this section of the infographic is about the pitch breakdown for Wei-yin Chen in Season 2016 and show how effective they are (i.e. how many hits/AB). I start with Chen's pitch type breakdown in Season 2016 and add statistics for comparable players. However, the comparable statistics were later dropped to save space in the final infographic and emphasize the focus solely on Chen's performance.
​
Emulation Description: This display emulates my visual language model in its use of simple, flat arcs/circle elements. It also uses the light gray parallelogram as the background for key summary information of the section. This display follows my color model by not only using the major color uses but also attempting to emulate the colors in its text-background combination. In addition, this display uses Arial Narrow Bold for texts to follow the typography model.
Final display:
Second display that exploits the visual potential of numbers
revision 1
Second Iteration
revision 2
version 1
version 2
First Iteration
Second Iteration
