Skip to content

Session 3C: Annotations in Viz & D3

micahstubbs edited this page Nov 28, 2015 · 14 revisions

What is everybody interested in round table:

creating full conversation, tech documentation, user communicate, storytelling, user annotation, notes over time, annotations own dataset, learning viz, as a starting point for exploration

#####let's look at some examples:

As visualization evolves over time so does what's normal and what's different from normal. What are the highlights that are important, because they are different?

Tamara (paraphrased): you don't want to get to the point where the users are doing search for you - annotation aids the search. Ex: if you're letting the user hunt & peck, you're asking them to search for insights vs surfacing them.

As the author of the viz, you should tell your story. Annotation tools allow others to suggest their interpretation/their story.

Example: in the kindle you can see the most popular highlighted sections in the book. This can change how you experience the book by seeing what others see as important.

With D3 - bind an annotation to a visual element or data point. Or bind to a state (but how do you define that). Or - this is the grid, and annotation shows up here.

Great talk by Adam Pierce at Bloomberg (not sure if recorded). Render visualization as SVG, go to illustrator, add annotation exactly where they want it, then put back in.

Annotation as a challenge around getting the right collaboration between automation & humans.

Showing you what others have done, could be interesting. In the pixel space... or the dataspace.

You draw it - show others have same misconceptions as you (or different).

Veritasium example mentioned by zan [to do: post explanation]

PhD Thesis on Designing Effective Multimedia for Physics Education

Veratasium YouTube Channel

Look to things like Google Maps, Open Street View, etc. What do others do?

Using people to derive information. Example: reCAPTCHA & a library example from Susie. The annotations people write can become the real data.

Example: Rap Genius. Many companies have tried to crowd source annotations - this is an interesting example. Rap Genius: it's an interpretation of an abstract layer. Some will be way off-base. There is a level of accuracy, even if it's not totally right/wrong. There is a gatekeeper. --> Is it necessary to have a hierarchy in the annotation community? Ex: StackOverflow & Wikipedia. If you are crowd-sourcing, how are you aware of the voices that you don't get. Ex Wikipedia. But, there are ways to get around (Wikipedia in-person-a-thons).

####What are the challenges you've run into in adding annotations on annotation -> you have to roll it yourself & lots of challenges: should it be a div? hovering? responsiveness? disappears? covering part of your viz?

on commenting:

  • comment systems are hard -> you don't want to construct your own
  • what if you could upload your block, and have comment support built in
  • people have left comments on gist, but I don't notice that they're there (talk to Ian!)
  • in our space, critiquing is really hard -> everybody can agree with the extreme things (no 3-d bar charts) - but how do you ask for and give meaningful critique. Or, if somebody has questions about why, how do you have that conversation w/ the block. (what about multiple owners of a blockbuilder)
  • difficult if what you're commenting on is the interaction
  • storage - taking responsibility - some services: disqus & firebase

how do you annotation things that are interactive - how do things in a viz tell you that they are interactive

Barrier to annotations are that they are hard & lots of work. Same problem Susie ran into with the legend. Interested in building something like that for annotations.

(1) Annotations as part of visualization (storytelling -> author created) (2) Annotations as something outside of the viz (user created annotation), so you need storage, etc

Examples: Palantir has annotation management -> annotation is a first class thing

Annotation doesn't have to be text. Example: Victor Powell's PCA where the circles would pulse to let you know you could interact with them. Another example: Parable of Polygons - triangles/squares animate softly to let you know you can interact.

Outcomes: components for D3 (teams to meet in the future), integration with blocks, list of good examples, writing down requirements.

useful: d3 jetpack.

Split into two groups to talk about requirements for tools to help with user annotation or storytelling annotation. TODO: Links to notes.