Explainers Supplementary Material

This is an online supplement created to accompany the Explainers paper. At present, it consists mainly of figures. It includes both the paper figures as well as some additional demonstrations. In each case, I've tried to give some commentary beyond the figures. In the future, I plan to attach the underlying data (the data is now online!), additional details on how the methods work, and more examples.

The primary reference is the paper:

Michael Gleicher. Explainers: Expert Explorations with Crafted Projections. IEEE Transactions on Visualization and Computer Graphics, 19 (12) 2042-2051. Proceeding VAST 2013. (link) (doi)

All of these examples were created using our prototype system.

The slides from the presentation are available as PDF. I cannot share the Powerpoint, since it requires a special font. Beware, the presentation uses animation, so the printed slides look a little weird. (slides-1up, slides-6up)

The IEEE VGTC has put a video of my talk at VAST 2013 online!

As noted in the paper, the Visualizations (as those here) are one of the weakest parts of the approach. I am not satisfied with the diagrams (although my collaborators re-assure me that they can learn to use them with practice). Also, the interactions have not been as thoroughly tested as I might have liked. There are some known issues. But they do seem to be better than nothing (to the few people that I know that have tried them - a quite unscientific sample).

The visualizations themselves are produced (as SVG files) by a system implemented in Python. Interactions are added to the SVG files using embedded Javascript code that uses D3. (An exception are the scatterplots, for which Python generates D3/Javascript code that creates the diagrams).

The SVG files work in any browser with good SVG support. However, the HTML pages with embedded SVG seem to appear wrong in browsers other than Chrome. For some reason, the text gets messed up (probably a CSS issue).

The data used to generate the figures is available here.

Figure 0 (not in paper): A simple explainers diagram

fig0.html - a simple explainers display, with explanation. The specific example is a "comedy" explainer (ranking Shakespeare's plays by how comedic they are). However, the real goal of this figure is to explain the visualizations that we use, so it includes some discussion of the design.

The "explainers" display is the primary way we have been looking at the outputs of the system. It can be seen in Figures 1 and 4 of the paper. It is (admittedly) a little hard to get used to, although interaction does help. Trying to improve the design is an important area of ongoing work. The interactive versions (available here, but obviously not in the printed paper) are easier to look at.

Unfortunately, there wasn't room in the paper to give a simple example of an explainers display - all of the examples are more complex.

Figure 0s (not in paper): "Scagnostics" of the simple example

fig0s.html is a "scagnostics" style display showing the explainers generated in the process of picking the one used in fig0.html.

I didn't include any of these "scagnostics" plots in the paper because of a lack of space. They are useful in understanding what the range of choices are available (and in this case, why I chose a 2 variable unit coefficient classifier). It's a good example of the tradeoffs that appear in real examples.

Figure 0b (not in paper): Another simple example

fig0b.html is another simple example, showing how we can make explainers for a bunch of different concepts. Here, we make an explainer for each of the genres of Shakespeare's plays.

Figure 1: An American-ness explainer

fig1.html - an explainers display of a 3 variable "American-ness" example taken from the paper. Reviewers (correctly) complained that this is a hard diagram to read. Learning how to read the diagrams on the simpler Figure 0 is recommended.

This version of the figure adds interaction (which is slightly broken) and can be viewed at a larger size, so hopefully its easier to understand than the one in the paper. Details of the actual function are also included.

Additionally, the figure page links to some other figures that are examples of other "American-ness" explainers, with different tradeoffs.

Figure 1s (not in paper): Scagnostics of Figure 1 example

fig1s.html - is the display of the collection of explainers for the "American-ness" example, and a comparison of 3 and 4 variable explainers.

Figure 2: American-ness in Parallel Coordinates

Fig2.html - is the parallel coordinates plot of a bunch of different "American-ness" explainers. It's a horribly bad parallel coordinates plot - made worse by the fact the quantization of the data causes lots of overdraw. The explainers that are shown in the diagram are also illustrated.

Figure 3: Paris vs. New York

fig3.html - is the scatterplot with Axes for Paris-ness and New-York-ness, provided to illustrate that with Explainers, we can create standard visualizations where the axes may mean something to the viewer. The explainers used to make the figure are also shown.

Figure 3P: Paris and Lyon

fig3P.html - provides an explainers display illustrating the Paris and Lyon example in Section 1.1 (right before the "Approach Summary." Unfortunately, there was no space in the paper for this illustration.

Figure 4: Comedicness, 6 ways

fig4.html - has the figure that depicts 6 different explainers of Comedicness, showing various tradeoffs between simplicity and correctness (and margin).

Figure 5: Hamletness, 5 ways

fig5.html - adds a little explanation to the figure in the paper.

Figure 6: Distance Metric

fig6.html - provides scatterplots showing how Explainers can be used as a form of Distance Metric Learning, with these distance metrics visualized using Multi-Dimensional Scaling.

The online version not only lets you see what the points are, it also shows you the functions, and tries to give a little additional explanation.

Figure 7: Genre Scatterplot Matrix (SPLOM)

fig7.html - provides a scatterplot matrix of Shakespeare's plays where the dimensions are explainers of each of Shakespeare's genres. This is meant to illustrate how we can use explainers to create "nameable axes" that can (in turn) be used with more standard visualizations.

Figure 8: (not in paper) Novel Authorship

fig8.html - provides visualizations of the authorship examples from Section 6.2 of the paper. These illustrations were not included in the paper for space considerations.

Figure 9: (not in paper) the 1080

figure9.html - provides visualizations of Docuscope examples run on a corpus of 1080 texts randomly sampled over a very long time period. This is mainly useful so you can see how the Explainers diagrams scale (or fail to work at this scale).

Figure 10: (not in paper) Shakespeare in Context

figure10.html - shows an explainer of Shakespeare's comedy, but also shows where 500 other plays written in the same time period are.