search

greenelab / word-lapse

Explore how a word changes over time
https://greenelab.github.io/word-lapse/
Other
6 stars 3 forks source link

Neighbors visualization #13

Closed vincerubinetti closed 2 years ago

vincerubinetti commented 2 years ago
netlify[bot] commented 2 years ago

✔️ Deploy Preview for word-lapse ready!

🔨 Explore the source changes: 207ee661ac1ad43b35a931387c1874d4f92a02a5

🔍 Inspect the deploy log: https://app.netlify.com/sites/word-lapse/deploys/6202f2e3b2b4b60007fce37b

😎 Browse the preview: https://deploy-preview-13--word-lapse.netlify.app/

vincerubinetti commented 2 years ago

@danich1 Can we discuss this visualization. I tried it as a network visualization, but honestly I don't think that's the way to go here. It ends up being a lot of movement and noise, and harder to read. When a new node spawns, it has to push the others out of the way to make room.

Instead, I came up with this viz. I think it looks nice and compact, though I'm wondering if will ever have the potential to be way too long (too many unique neighbors). One thing I could do is sort, instead of alphabetically, by how many years the word appears in.

I could also make it more compact by only showing the current year neighbors, in a stable grid layout. But then the same words will change position in the grid from year to year.

If you want to see what the network viz looks like, you can run the first commit in this PR on your computer.

danich1 commented 2 years ago

Instead, I came up with this viz. I think it looks nice and compact, though I'm wondering if will ever have the potential to be way too long (too many unique neighbors). One thing I could do is sort, instead of alphabetically, by how many years the word appears in.

Actually, I like this visualization better. I agree that the network viz could be messy, so I'm fine with this new one. Hmmm. If you don't mind I kind of want to see it sorted by number of years. Might default back to alphabetical, but worth taking a look to see.

Also, if not in this PR but next could we extend this visual for the following:

  1. A way to stop the animation or look at a specific year?
  2. A way to compare two years if necessary?
vincerubinetti commented 2 years ago

A way to stop the animation or look at a specific year?

Yeah I'll be adding that to this one, just wanted to see if you liked the viz in general before I continued.

A way to compare two years if necessary?

How would you envision this working. Would it be the same visualization, just with the ability to highlight two sets of words (one red and one blue). Or would it be like to vertical lists side by side.

danich1 commented 2 years ago

How would you envision this working. Would it be the same visualization, just with the ability to highlight two sets of words (one red and one blue). Or would it be like to vertical lists side by side. Merge state

I'm leaning more towards the latter of having a vertical lists side by side; however, if that is too much trouble, then just the ability to highlight two sets of words at once suffices.

vincerubinetti commented 2 years ago

@danich1 Take a look. The problem is, the number of common neighbors between year A and B varies quite a bit, so the height of the image jumps up and down. I could fix the image height to the largest it would ever need to be, but then there would often be a lot of whitespace at the bottom.

I'm going to try splitting them into multiple columns to make sure the number of rows stays the same, but I'm not sure how that will look, because it will change the aspect ratio and text size depending on the selected years.

I'm wondering if it will be more readable to simply have a full list of all the unique neighbors, and just highlight them with colors (and symbols, for color blind folks). If the word is in year A, it's red. If it's in year B, it's blue. If it's in both, it's purple.

vincerubinetti commented 2 years ago

@danich1 I split it into columns and did my best to make it a stable image. That's probably as good as it can look, and imo it doesn't look great with the whitespace.

vincerubinetti commented 2 years ago

Okay I've done it the way I think is best. If you want to see what the other options look like, you'll have to checkout previous commits and run them locally. But I feel pretty confident this is the optimal way to display the comparison.

vincerubinetti commented 2 years ago

@danich1 this is ready for your final review. See the comments/commits above if you're not happy with the layout/functionality to test other potential solutions.