 Hi, my name is Susie, and a couple months ago I released this library called D3 Annotation. It's an open-source JavaScript library, and just to give some background, I am a senior data visualization engineer at Netflix. What that means is I get to do design and a programmer at the same time and work with all the data that we collect on our customers and try to put them into internal custom dashboards to make it easier for people at Netflix to make business data-driven decisions. So just a quick, I mean, I see a lot of annotations so far today around text, and so just a little bit of background of annotations and data visualization. There's a lot of great examples from the New York Times where you see all these charts and they have these labels and these great stories that go along with it. As you scroll down to this particular story, it fades out certain parts of the charts and it continues to annotate those lines that are most important to the story. One of my friends, Naughty Bremmer, has a lot of annotations in her work. Here are some examples you can see. She's annotating different songs over time in this piece. And within this community, we kind of converge around this JavaScript library called D3. So it's this general library for making custom data visualizations. And the annotations was something that was always really kind of crafted in custom building in that community. So if you wanted to make an annotation or an attitude chart, you had to figure out how to draw it yourself, et cetera. So the library that I built was basically a way for people to add annotations to data visualization in a much easier way and a much faster way. So what I did was I looked at a bunch of annotations and data visualization and they all kind of, you know, 80, 90% of them fell into this pattern of there is a subject, the thing that you want to annotate, the actual note, what you want to say about it, and a connector that connects them in the data visualization itself. So I made this system where you basically place the annotation on the subject and then the note is kind of placed relative to that subject. And I just put some quick examples here of code of like how easy and quick it is to add these annotations to your visualizations. This is just a simple annotation. This is an example where if you're in edit mode, you can move it around and adjust the formatting for you. You could have curvy connectors, a bunch of different types, kind of circle annotations if you want to denote an entire region in your data visualization. And it's been really exciting to see it get used. These are just a couple of tweets of people using it in their projects. A couple of news organizations have used it. The Washington Post used it and the recent piece. So it's been really exciting putting it out in the community and seeing it so well received. And there are two topics that I started thinking about around annotations that this project has kind of led me down the path to the first one being around annotation design. And really in data visualization, you don't typically see annotations that have a bunch of different types of styling. Types of emphasis and de-emphasis is usually just like one annotation style that says like, this is something that's important number here. There's an outlier. So kind of pushing like in this example, there's a bunch of different types of annotations. There's this one that I want to pause in an anomaly because that doesn't typically happen to stock when it splits, for example. Or if you have an example of like these are important types in your timeline when you don't have the room to actually show this whole annotation. In addition, this recession back here is also a rectangular annotation that styles so differently. But also, you know, draws the user to say like this is an important piece of context to understand what's going on. Also, with data visualization, we rarely see responsive design and I think part of it is it's tough to see annotations. And as they transform from a larger format to a smaller format, specifically within graphs. So, you know, these are two different annotation types in my library that you can change in between. One of my friends who's that has testemaxes in her project hears an example of dynamic annotations that you would use in data visualization, saying like here's a graph. I don't want this annotation to circle these nodes as long as they're on screen. And then I think there's a whole other exploring area within data visualization in annotations that hasn't been talked about much which are different annotation modes. We don't see diagrammatic data visualizations made like with custom drop-screens very often because it's hard to make those annotations thinking about more of a schematic mode or like it's actual symbology. Like each of these would actually be symbol annotations in my head and the whole diagram itself would be made out of these symbol annotations. I haven't really seen that being done before. Also from a tangential field where you're doing revision on pieces, it's rare to see like public critiques of data visualization but like what would that look like? Is there a visual language that we could develop around symbology for annotations that would be in this revision mode? And then also this is a little neat with the C which is context setting. It made this fun example of like my dog in real life and then my dog in my little Twitter icon. But I basically want to put together an app where you can upload pictures and add these annotations to them which would kind of fulfill the need for all of these different modes or at least one way to attack that problem. And then also when you're developing data visualizations there's this kind of grouping and layout moment where you have a bunch of different graphs and you're like oh where are the interesting graphs like what's the final story that I would want to tell? You can use annotations actually in development and say well maybe I'll go in and circle all the graphs that have interesting dips. It doesn't mean that that's necessarily your final data visualization but it could be, it could drive the story of like in the end maybe these are the only graphs that you want to talk about or you want to move them all and curve them together in a meaningful way. So using annotations as a way to help you design and figure out what's important in your data that could then impact the final piece. And then just one final mode that I don't hear a lot about which is like when you're actually in the story finding mode of creating data visualization you might have for example this is just a line chart they tried to add labels to all of the different lines that you see. If I switch them over to just using like annotations from the library as I'm discovering information that's so easy for me to like drag them around and say like oh what is this actual line? Now I can see you know these two breeds of dogs that I've actually crossed over in 2017 etc so actually using annotations just to make it faster for you to develop as you're creating different views into your data. And then it's really easy to basically get the JSON of the annotations of where you move them after you move them in edit mode and then place them directly into your code. So that was just a really quick run through of two topics that I've been thinking about around annotation design and annotation mode but the problems that I think we've found now that I'd like to talk to you about in the sessions in the afternoon are around like at a company how do you store annotations in a meaningful way and how do you if somebody annotates something on a data visualization, what are they actually annotating? Are they annotating specifically that view, that data that they filter down to or are they annotating that date? And it's an annotation that should show up on all charts that have that date so it's definitely something that I've been researching and it's been puzzling so I'd love to talk to any of you who are interested in that topic as well. Thank you.