thomas-tanay
Toy Problem Section
I spent some time redesigning the figures for the toy problem section. I didn't get through all of them, but addressed the first few. Thought I'd post to get your thoughts before I continue. There are quite a few changes. Happy to discuss or describe in more detail if needed.
The new design looks really good.
Is each figure a unique svg element (containing arrows, text, etc.) or a combination of html elements? (In my first figure for instance, the image x is a canvas, the captions are in separate divs, and the image space is a div element in which I create an svg element using d3).
In the first figure, do you think the image space should be explorable? (Mine is, but I'm not sure this is necessary).
I like your second figure, I think it's a good idea to introduce the classes I and J in image space before introducing L_theta.
For the third figure, I liked Chris' idea to show the classifications made by L_theta with different colours. Maybe this could still be done with light shades of blue:
I'm also curious to know how you create custom sliders (in the third figure).
-
I can make a slider for you, we've been meaning to have some distill components for stuff like that. Maybe just keep using the standard html input and I'll ping you when we have one.
-
I like having the image space explorable, I think it helps, but is not totally necessary.
-
I think having the shaded decision boundary is a good idea (I think I just forgot to include). I was trying though to use blue only for the images and not use blue for other things (like the image space) just for clarity.
-
As for construction, there's no right way :) I often have several layers like you described (html, svg, canvas all overlaid, all with the same margins and coordinates) or sometimes I'll do more semantic layers, (html div with chart, html div with annotations that contain svgs). Since all of them have a shared "background" chart you could maybe abstract that out into a div layer and reuse it, overlaying different stuff for each one.
Also, just to note, out of laziness I've mislabeled some stuff and/or left out greek letters. Just me being lazy. :)
I made some more progress:
Some things to note:
-
I think when you emphasize a strong point, it might be better to do that as a sub heading, thus allowing people to scan along your main points. I quickly reworked some of the text to demonstrate that idea.
-
I didn't have time to redraw the two "adversarial examples" diagrams, but those will need to be redone in the new style.
-
One convention I've been hovering around with these diagrams that sort of build over time is to use 15px bold text for the new items, and 12px grey text for the items that were already introduced in previous diagrams.
Looks good! I'll update my version in the coming days.
A few comments:
- The notion of "blue level" is slightly ambiguous. What direction of the color space does it represent? For instance: varying the lightness for a fixed hue and saturation?
- The use of the term "adversarial example" is a bit tricky: technically, a projected image or a mirror image is only adversarial if it is "close" to its original image. That's why I say that "when theta=0, L_theta does not suffer from adversarial examples ". Also, x_p and x_m cannot really be called low-confidence and high-confidence adversarial examples in the general case (only when theta -> pi/2).
- I like the idea of dividing the section into subsections, it does help skim over the article.
- For color, I would just interpolate between two blues, you could use something like this: https://github.com/d3/d3-scale-chromatic#interpolateBlues. You could also play with a divergent color scheme https://github.com/d3/d3-scale-chromatic#interpolatePiYG. You could also add a color key to the first diagram, but I'm on the fences as to whether it's necessary.
- apologies for sloppy wording, feel free to regard my as more of a gesture in a direction :)
Great! Thanks for all the suggestions, I'll update my version and let you know when I'm done :)
I just submitted an updated version with the new figure designs. I think it looks a lot better that way.
One remaining limitation is that the math symbols used in the text (mathjax) and in the figures (svg/canvas) are different. I haven't found a satisfying way to uniformize them yet.