Cosmetic issues

[touretzkyds]

1. When the model is first loading, we display a message to that effect. But it's in a small font and tucked away. It needs to be much more visually salient so people running the demo for the first time will notice it.
2. Since there is no logic to the ordering of vector components, displaying 11 components in he magnified view turns out not to be hepful. It makes it harder to interpret the display since it can be hard to find the middle component in an array that is 11 units wide. I think we should cut this to only display a single column at a time, and use the space savings to widen the word vector portion of the display, which is uncomfortably compressed when we have 300 elements to display.
3. We need a "Clear" button to erase all words in the 3D plot, in case the user wants to do an experiment starting afresh. It should also clear the vector display.
4. When the user clicks on the "age" or "gender" buttons, we shoud display that point in red in the 3D plot.
5. Which vectors are normalized, and which are not? I assume the word embeddings are normalized, but the basis vectors and word arithmetic vectors are not. Can we show the vector magnitude somewhere in the word vector display, e.g., "1.0" for normalized vectors and "0.317" for unnormalized ones? Maybe this could go to the right of the vector, the way the label goes to the left?
6. Take a look at https://www.cs.cmu.edu/~dst/FaceDemo and you'll see "Tutorial" and "Experiments" buttons along the top edge of the display. Can we add similar buttons to our demo? I'll write the text for the tutorial and experiments pages. Perhaps we should also add an "About" button that links to a page that gives author credit (Xu, Bandyopadhyay, and Touretzky) and cites the dataset we're using.

[jxu]

For 4., which point is age or gender? Aren't those the axes?

[touretzkyds]

Yes, those are the axes. But we compute a basis vector for each one. So it should be possible to treat that basis vector as a point and plot it, just as you plot the results of arithmetic operations like king-man+woman. Since the age and gender basis vectors need not be strictly orthogonal, it will be interesting to see where they end up on the 3D plot. How close do they come to the axes? Where do they lie in the residual dimension?

[touretzkyds]

Hmm, I'm not sure you'll be able to plot the age and gender vectors because they are normalized to unit magnitude, but the axes typicall range from -0.3 to +0.2. What are the magnitudes of the un-normalized age and gender vectors?

Don't waste too much time on this. The other cosmetic issues listed above are more important.

[jxu]

I realized clearing the vector display makes it hard to put in new words since words can only be inserted by clicking on the axis labels.

[jxu]

For 6. I added placeholder links to placeholder empty pages. The CSS is pretty plain and it uses default fonts. If you have any ideas for making it nicer looking I can try to implement those.

[touretzkyds]

The vector display should be fixed at 6 slots, and if a slot is empty, then display all zeros with a blank label in that position.

For 6: plain fonts are fine for now. We used a package called materialize for the FaceDemo pages, see the source for //www.cs.cmu.edu/~dst/FaceDemo/resources/tutorial.html. But don't worry about that right now; I can always fix it later.

One more issue: I showed the demo to a colleague yesterday and she was a bit confused by the apperance of the D box in A-B+C=D because it looks like an editable text box, but it's not actually editable. We should change the appearance of this box so it doesn't resemble the other three.

Also, it takes a while to do the computation in A-B+C=D. It would be good if at the start of the computation we could immediately replace the contents of the D box with "..." and then, when the computation is complete, replace that placeholder with the answer.

[jxu]

One more issue: I showed the demo to a colleague yesterday and she was a bit confused by the apperance of the D box in A-B+C=D because it looks like an editable text box, but it's not actually editable. We should change the appearance of this box so it doesn't resemble the other three.

Does the box show up as grayed out? The box is set to readonly mode in HTML input. I can change it to plaintext

[touretzkyds]

No, the D box is not grayed out. It's visually indistinguishable from the other 3 boxes. Its border thickesn when you click inside it and it displays a blinking cursor, just like the other 3. The only difference is that you can't move the cursor or type in the box.

How about if you change it to plaintext but make the text background gray?

[jxu]

Ok I see that is the behavior on chromium. (Also colors show up differently for some reason - more purplish and saturated. I think this is due to the second monitor not setting color profiles correctly)

Here is a custom made output box that I think doesn't look as good as an input box. In chromium:

Maybe I can try a grayed out output box?

[jxu]

I don't think plotly has a way to add an extra y axis without adding another data trace to plot. What about adding it below the current axis labels?

[touretzkyds]

What matters is that the output box should not look like something you could type text into. It should give the visual impression that is displaying something, not offering an opportunity for input or editing. Anything you can do to accomplish that should be fine.

I don't understand your comment about an extra y axis. What did I say that suggested you needed an extra y axis?

[jxu]

The extra y axis was for adding vector norms. The way I accomplished showing the word is through a custom Y axis

[touretzkyds]

Ah. I see. So here's an idea: we already have two plotly graphs, one for the magnified view and one for the whole vector view. What if we made a third plotly graph that was very skinny, and didn't plot anything on it, but did have one of your custom y axes?

But your idea of displaying the vector norm below each axis label also sounds reasonable.

We should only do this when we're in vector arithmetic mode. In normal mode all the vectors have unit magnitude, right? So we don't want to clutter up the display by showing numbers the user doesn't need to worry about.

[jxu]

Here is my other idea for labels. Previously for the two views both said the same thing. Here I let the magnify view display the magnitude instead. Holefully this is not too confusing but it will need to be explained. I could add an axis title saying "vector magnitude" or change which side the y axis is on if it helps.

[touretzkyds]

Displaying the magnitudes this way is fine.

It's good that we're now displaying only one vector component at a time instead of 11. But that one component needs to be much narrower: it has to be taller than it is wide, so it matches the shape of the vector components in the vector display. I would say reduce the width to 20% of its present value.

Also, we should suppress the magnitude display when not in vector arithmetic mode, since all the values are 1.00 and it's just a distraction for the user.

[jxu]

What does the display look like for you? What screen resolution are you using? Here's what it looks like for me on Firefox that is ostensibly 1920x1080 but the actual screen area is 1530x847.

[touretzkyds]

Here's what I'm seeing. I have the demo open in a Chrome tab, and the Chrome window is not full-screen As you can see, the magnified vector elements are wider than they are tall in my view, but not in yours. Making the window wider or narrower does not have any effect on this aspect ratio.

[jxu]

Ok, currently I have the magnify view as 10% the width of the (almost) total screen width. Here it is with 3%:

The demo is naturally designed for landscape view and I assume a reasonable resolution of at least 720p (which chromebooks and ipads should support). Here it is at 1280x720 which still looks ok:

Maybe what I can do is have the magnify view be fixed width and have scatter and vector views grow to the remaining space

[touretzkyds]

Yes, I think a fixed width for the magnify view is a good solution. Of the two images you posted above, I prefer the first one, but I woud make it just a teeny tiny bit thinner: reduce from 22 pixels wide to 18.

[jxu]

Here is the fixed width magnify view which I think is the right approach. I got rid of the magnify title and x axis label because they don't fit and are implied by the vector view. Maybe the links at the top look like they correspond to the plots which would be misleading?

[touretzkyds]

The magnify view looks great now.

I would like to move the Tutorial and Experiments links up next to the demo title, like they appear in the FaceDemo page at https://www.cs.cmu.edu/~dst/FaceDemo/

[jxu]

I'm still pretty new to CSS. Here I moved the title and links inline and gave them some margins.

[touretzkyds]

That's perfect.

[jxu]

this is what plotting pure axis as points looks like. it will zoom out the plot greatly

[touretzkyds]

Okay, that's clearly a bad idea. Nonetheless, it's cool to see that the gender coordinate is 1.0 and the age coordinate is about 0.

But I'm puzzled about why the gender vector has a residual component of 2.0. Shouldn't it be zero?

[jxu]

I'm pretty sure this is due to the graphical modification we adapted for the residual. It turns out that this vector is nearly orthogonal to the residual feature too. Then we apply the transformation 2 * (1 - cos_sim) to get nearly 2.

[touretzkyds]

Your explanation makes sense. Thanks.

[touretzkyds]

The new "Clear" button works well, but after I clear all points and add just one or two words to the 3D plot, the plot looks weird because of auto-ranging. Can we turn that off and use fixed ranges of -0.3 to +0.3 for age and gender, and 0 to 2.0 for the residual?

[jxu]

I can used fixed ranges but the user may change which features to use, so maybe the numbers won't look right.

[touretzkyds]

Let's go with the fixed ranges. I'll have the next person who works on this add some input boxes to allow the user to set the range values if they don't like the default. But I suspect the default will work okay.

[jxu]

I adjusted the residual axis range to use 0 to 1 because that matches visually the residuals computed.