Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Screenshots/Character-Clusters.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Screenshots/Filter-by-Stan.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Screenshots/error-bars-experiment.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Screenshots/feedback.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Screenshots/final-candidate-vizzes.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Screenshots/graphs-from-all-experiments.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Screenshots/household-comparison.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Screenshots/median-household-income.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Screenshots/quantile-plots.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Screenshots/thispersondoesnotexist.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions week2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
[A Who's Who Guide to the Marvel Cinematic Universe](https://www.nytimes.com/interactive/2017/11/07/upshot/modern-love-what-we-write-when-we-write-about-love.html?mc=adintl&mcid=facebook&mccr=blitzpush&ad-keywords=IntlAudDev&subid1=TAFI&_r=0)
===
Jyalu Wu

Thoughts
---
The viz I chose to reflect on this week is *"A Who's Who Guide to the Marvel Cinematic Universe"* by Billy Ker, Chee Wei Xian, and Denise Chong from The Straits Times, published on April 24, 2018.

![Character Clusters](Screenshots/Character-Clusters.png)

This is an interactive visualization created 3 years ago that maps out the relationships between all the characters in the MCU that existed when the vis was published. The nodes of the network are vector images of each character, and the edges are colored differently depending on the type of relationship (green for friend, purple for enemy, blue for creation, etc). The graph is 3D so you're able to zoom in and rotate it. I thought it was really cool how they made that happen, instead of just having a 2D network graph. You can also filter out the type of characters you want to see in the graph - for example, only Avengers, only Hydra, or only Stan Lee cameos.

![Stan Filter](Screenshots/Filter-by-Stan.png)

Additionally, when you click on a node, the website automatically zooms in on it and a character bio pops up. The character's relationships are highlighted, and the characters they don't have any connection to are grayed out. This feature stays even when you zoom out or rotate the graph, making it easier to view the relationships.

In another page, the website shows a timeline for each movie released by Marvel. When you click on the movie, you are able to see the characters that are in it, and their relationships to one another.

I thought that this visualization was really cool. It's pretty much a visual-based version of the [Marvel Wiki](https://marvel.fandom.com/wiki/Marvel_Database), which is purely information-based.

Future Improvements
---
To improve this graph even further, I think that when you zoom out enough, you should be able to see a name that summarizes each large cluster. The character pictures are really hard to differentiate when you zoom out a lot, so this could help with both clarity and exploration. Additionally, although the feature that keeps the relationships highlighted is very nice, the website should include a "back" button to go back to what the user was just looking at. This prevents any sort of frustration the user might feel when trying to find a specific character again.
19 changes: 19 additions & 0 deletions week3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
[Wealth Divides](http://storymaps.esri.com/stories/2016/wealth-divides/index.html)
===
Jyalu Wu

Thoughts
---
One of my roommates is a civil engineer and coincidentally, is auditing this class. We've recently had some very thought-provoking conversations about income inequality, red-lining, and gentrification, and how all of that can also relate to race. I wanted to learn more about these topics, so I turned to Google for answers. More specifically, I wanted to know how others had analyzed income inequality, how they visualized it, and how they were able to draw conclusions from it or propose any suggestions (if any) that addresses the problem. The first visualization I found was *Wealth Divides* created by ESRI, a GIS company.

The data visualization is a story map with a bunch of visualizations that all tie into each other. In the beginning, the story map gives a short history lesson on income inequality throughout history and shows how many areas have seen a decrease in the size of their middle class. Next, the story map goes through 4 case studies on cities with some of the highest income inequality (NYC, San Francisco, Atlanta, Boston, Washington DC). For each city, they first show a map of the median household income. Next, they compare wealthy households to poor households on a map, showing each household as a dot. These visualizations were very educational and I learned a lot from them.

![Median Household Income](Screenshots/median-household-income.png)
![Household Comparisons](Screenshots/household-comparison.png)


Areas for Improvement
---
The orange-red-yellow-green-blue color scheme of the median household income map was hard to follow. This is especially the case when orange, not red, was picked to represent the lowest income. I think that if they used a color-gray scheme like red-gray, with red being the lowest income and gray being the highest, the divisions would've been much easier to understand.

I felt like the visualization comparing individual households was rather difficult to navigate and comprehend because the underlying map still contained roads and state lines. The background was also gray, which made the blue less able to stand out.
10 changes: 10 additions & 0 deletions week4.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
[Are Trump's Tweets Spiralling Out of Control?](https://public.tableau.com/profile/neil.richards#!/vizhome/trump_5/Dashboard1)
===
Jyalu Wu

Thoughts
---

My teammates for A3 and I were brainstorming some possible graphs to include in our project, and were scrolling through the list of visualizations on [Data Viz Project](https://datavizproject.com/#). The spiral histogram really caught our attention, and I wanted to see what other people had done with this type of visualization in the past. I found the viz *Are Trump's Tweets Spiralling Out of Control* by Neil Richards through this googling process, and I found it really amusing - both the pun in the title, and the viz itself.

In the viz, Richards visualizes a timeline in the form of a spiral: past tweets are closer to the center, and more recent tweets are towards the outside. Each tweet is represented by a colored circle on the spiral - the size of the tweet corresponds to the number of retweets, and the color corresponds to the type of device used to publish the tweet. For example, dark blue is TwitLonger Beta, purple is Twitter Web Client, gray is Twitter for iPhone, and red is Twitter for Android. In the viz, it becomes obvious that as time progresses, the tweets transition from smaller to larger, and more purple to much more red. The transition from purple to red could mean that Trump used to rely on a service to help write the Tweets before he posted, or helped him post directly. I'm not sure, and I feel like this category could be much more specific. However, the transition to red could suggest that Trump began tweeting directly and immediately from his phone without checking with his PR team or anyone else.
16 changes: 16 additions & 0 deletions week5.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
[This Person Does Not Exist](https://thispersondoesnotexist.com/)
===
Jyalu Wu

Thoughts
---
One of my other professors briefly showed this in class because we were learning about neural networks. When you refresh the website or press the "Another" link, it shows a picture of a new person who does not exist. This person is actually an image generated and imagined by a [generative adversarial network (GAN)](https://en.wikipedia.org/wiki/Generative_adversarial_network), which I thought was just incredible. It's crazy to think that a computer generated such a life-like image of a "person"!

However, some of the images on the website are a little funky looking, so the model still isn't perfect. In addition, there seems to be a significant bias towards generating pictures of white people - mostly middle aged men and young adult women - I've refreshed the page dozens of times and have yet to see any black or south Asian representation. There are east Asian "people" being generated, but I have only seen two young east Asian women with stereotypically small eyes. It's a little disappointing to see the lack of representation in this model, but there's always room for improvement!

Example of a funky looking picture:
![Funky Person](Screenshots/thispersondoesnotexist.png)

Learning About GAN
---
In a GAN, two neural networks are pitted against each other in a zero-sum game - one network's gain is another network's loss. It was first designed by [Ian Goodfellow](https://en.wikipedia.org/wiki/Ian_Goodfellow) and his team in 2014. In this particular example, there is one neural network that is trained to generate images of faces, and one neural network that is trained to recognize false images of people. These two neural networks are then told to compete with each other, and they both improve significantly over time as a result. The images on this website are the images generated by the first network that the second network could not recognize as a fake picture.
16 changes: 16 additions & 0 deletions week6.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
[Guiding the choice of learning dashboard visualizations: Linking dashboard design and data visualization concepts](https://www-sciencedirect-com.ezpxy-web-p-u01.wpi.edu/science/article/pii/S1045926X18301009)
===
Jyalu Wu

Thoughts
---
This week I read a paper written by Gayane Sedrakyan, Erik Mannens, and Katrien Verbert that was published in the *Journal of Computer Languages* in February 2019. Their paper discusses visualization concepts for learning analytics dashboards, which are dashboards used for education that:
>aim to support improved retention or engagement, increased social beehavior or recommendations of courses and resources, for both individual and group learning purposes.

There are many types of LADs and differ in terms of the "intended goal, stakeholders, type of learning tasks, feedback typology, and data/analytics characteristics". The paper then describes all of the educational science concepts that are related to dashboard feedback design, and then describes some visualization and design paradigms.

Then, the authors discuss their recommendations on the best dashboard design/data concepts for each educational concept. For example, their recommendations for the educational concept "Feedback" are shown below.

![Dashboard Viz Recommendations for Feedback](Screenshots/feedback.png)

I thought that this was a really informative paper - I've been working on designing a dashboard myself and had been wondering what the best kinds of visualizations would be for it. So this paper helped a little in clearing that up!
37 changes: 37 additions & 0 deletions week8.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
[When (ish) is My Bus? User-centered Visualizations of Uncertainty in Everyday, Mobile Predictive Systems](https://idl.cs.washington.edu/files/2016-WhenIsMyBus-CHI.pdf)
===
Jyalu Wu

Paper Summary
---
In this paper, Matthew Kay, Tara Kola, Jessica R. Hullman, and Sean A. Munson describe how they developed several candidate ways to visualize the uncertainty of when a bus will arrive at a given bus stop, all on mobile devices. In many predictive apps (weather, transportation arrival times, etc.), a point estimate is given because it is easy to read and understand in the short amount of time it takes to glance at your phone screen. However, real-world events can be unpredictable and when an app is wrong, the user can lose their trust in it. Thus, there is a big need for uncertainty visualizations in a way that's easy to understand.

After conducting a literature overview and surveying users of an existing bus app, the authors had the following design requirements:
- Point estimate of time to arrival
- Probabilistic estimate of time to arrival
- Probabilistic estimate of arrival status
- Data freshness

They considered multiple uncertainty visualizations in their design process, including *quantile dotplots*, which are made from drawing samples from a Normal distributed probability density using the quantile function (inverse CDF).

![quantile plots](screenshots/quantile-plots.png)

Eventually, they settled on 4 designs: the original density probability plot, a dotplot with 20 dots, a dotplot with 100 plots, and a stripeplot.

![final candidates](screenshots/final-candidate-vizzes)

One of their biggest findings was that discrete outcomes work best in small numbers. For example, dotplot-20 was much better than dotplot-100 because the variation in the dots didn't look as continuous.


Thoughts
---
I read this paper for background information for my group's final project. This experiment reminded me a lot of A3, when we tried to see which viz out of 3 candidate ones was easiest to read. However, the authors of this paper did not choose the best visualization in the end, nor did they rank the candidate vizzes in their conclusions, though the quantile dotplot seemed to be easier to read since users were more precise when reading it.




Paper Citation
---
M. Kay, T. Kola, J. R. Hullman, and S. A. Munson, “When (ish) is my bus? user-centered visualizations of uncertainty in everyday, mobile predictive systems,” in Proceedings of the 2016 chi conference on human factors in computing systems, 2016, pp. 5092–5103.


27 changes: 27 additions & 0 deletions week9.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
[Hypothetical Outcome Plots Help Untrained Observers Judge Trends in Ambiguous Data](https://ieeexplore.ieee.org/document/8440816)
===
Jyalu Wu


Paper Summary
---
Hypothetical outcome plots (HOPs) are "animated representations of outcomes drawn from distributions" and are used to visualize uncertainty. In this paper, Alex Kale, Francis Nguyen, Matthew Kay, and Jessica Hullman discuss how they found that when the data has a lower level of evidence, people are able to read HOPs better than static uncertainty visualizations when attempting to understand the overall trend.

The authors conducted two experiments. In the first experiment, they compared HOPs to error bars when making decisions. Participants were asked to roleplay a newspaper editor who is given a bunch of bar charts that visualize how many jobs are added to the market. Based on the visualization, they would then determine whether there was any growth, and indicate how confident they were in that answer. They found that participants are better at seeing trends in noisy data when using HOPs than when using error bars.

![error bars experiment](screenshots/error-bars-experiment.png)

In the second experiment, the authors compared line HOPs to static line charts. Again, the author found that participants were better at finding trends in the line HOPs than the static line charts.

![graphs from all experiments](screenshots/graphs-from-all-experiments.png)



Thoughts
---
I read this paper for background information for my group's final project. I hadn't known that animations could be so useful in interpreting the noisiness of data - I had thought that it would be hard to remember the differences between different frames of the animation. So it was really cool to learn that the opposite was true!


Paper Citation
---
A. Kale, F. Nguyen, M. Kay, and J. Hullman, “Hypothetical outcome plots help untrained observers judge trends in ambiguous data,” IEEE transactions on visualization and computer graphics, vol. 25, no. 1, pp. 892–902, 2018.