 Hi, good morning everyone. How's everyone doing? Right, all excited. We're going to have a lot of data visualization talks in this class. I'm going to just take off that first session all of that. These topics that I'm kind of talking today about is practice data visualization and easy lockdown. I don't like to hit big to get into this specific topic. But I'm going to talk a little bit about my own theory of trying to learn interactive data builds and how we could do that and what led me to kind of build or experiment with something like that. Can I really say where I think interactive data visualization is and where we can do it? So I kind of studied my career in the last decade as a management consultant and the whole premise there as a management consultant was to change kind of the vector of the organization. To change the vector of the organization either the velocity or the speed. Either the velocity or the direction of the vector. And one of the ways there's a very data driven way you would do is you would try to create what I would call a killer chart. A killer chart that kind of illustrates what the organization is doing in a very data driven way. Either what the problem is or possibly point to a solution there. And the challenge at that time or the weapon of choice for doing this for me at that time was just Excel. So you were mostly doing data ranking in Excel. And if you had to do any interactive visualization you would use maybe put it on PowerPoint and put a couple of slides and try and create that. And this approach of kind of a charting based approach is really what all of us who do visualization or start up with visualization learn. It's kind of like the vocabulary of doing visualization. I know a few ways to describe visualizations and I keep using it. So it's kind of like a fixed template as long as the data fits into that template I'm okay to use that charting and that works. And that works for a large number of cases and that's probably one of the reasons data literacy works. But it's hard to do interactive stuff on that. In the charting metaphor at least in the last decade there wasn't much to do interactions so how do you go forward? So at the start of this decade, so that was last decade, at the start of this decade I said let's try and do some interactive visualization and one of the good books or good people who talk about this or used to do it much before was Ben Fry who wrote the book called Visualization Data and he had this whole process of doing visualization in a very sketch based tool called Processing. And then later on they were processing what JS so you could actually put it on the web. And he had this wonderful example in the book called Zip Decode. The zip decode was really this example of mapping all the zip codes in India and I was like let's do that in India. So I had no JavaScript capability to kind of do that interactive visualization and what you do initially is you just copy and the earth starting up is to copy and that's not really a bad thing that's how we learn. Most of us kind of find our own voice after copying a little bit. I was sounding like a lot of other people sometimes. And I created what at that time was a very nice visualization of pin codes in India. So it's basically just a map it's not really a map it's just a scatter plot with all the possible visualizing pin codes visualizing. It's just a pin code scatter map stretched to look like a map and it had some really nice interactive feature. You could type a digit of pin code and as you type you start to see the geographic way out of this and you could also zoom in to it and it will kind of go on but you could kind of keep typing the numbers and you would come to this which is kind of your pin code. So if you say 5, 6, 0, 0, 7, 6 in Bangalore this is close to it either. I thought that was wonderful. I mean even though I didn't really make it I just kind of copied the code and kind of played another bit to hack it to work for the Indian pink code database. It was really nice. And this interaction was really nice because it kind of served one of the key purposes of data visualization which is when you're trying to do data visualization you're not just trying to confirm something. You want to learn something. So I ended up using this visualization in another of my workshops trying to do kind of like you know which 5 are which states in India or which states start with 4 or 3 or 2 or 9 and 9 actually is not on the map because there's no pin code that starts with 9 or it's linked to army. So there is no data on it and you learn something from that visualization. So the interaction part was really really amazing because you could learn something about the data and you could use kind of very interactively and the two way binding between typing the data and the visualization get that learning happen. But it was really hard. It was really really hard. You are not only defining the visualization in terms of each data on each pixel you're actually designing each of the interactions. You're basically hard coding and writing each of the interactions that are there. So you don't have to design both the pixels and both the interactions. So this pixel based approach using processing to JS requires lots of code to really make it work. It's wonderful if you're trying to do generative art or more for data expression and you want to really experiment with visualizations of very different kinds which are novel in nature and not really available easily to a charting library. But you need to manage each and every pixel in each and every interaction and this is not really something I was at that level giving it to you. Charting based easy to do but then you have pixel based which you're trying to manage the canvas and really hard. So I said okay what do I do I just gave up at that stage. I said this is way too hard interaction is not something for humans. Let's go back to static based and let's go back to starting visualization but I didn't just want to go back to doing charts again. So I thought there should be a better way to think about charts and then figured out that there is actually a grammar of visualization. So five years ago I said let's learn the grammar of graphics and the grammar of graphics was pretty amazing and I've kind of talked about it in Fifth Elephant I think two years back on visualizing multi-damage data talking about how the grammar can use to build a chart and I think this was one of the things I talked about in the basic grammar you take a data set you parse the variables you encode it using marks you select the scales and you render it with a coordinate system and you get a very nice visualization and because you're using grammar you're not really defining a chart type you're defining a workflow you're defining a flow of grammar transformations which takes the data encodes it into marks, scales renders it with a coordinate and you can basically create unlimited visualizations using the grammar and this was fantastic so the next two, three years I was really into grammar of graphics and saying how we can do this and there are many implementations of this and the best ones that I kind of flashed on to at that time was ggplot which is the grammar of graphics plotting system in R a very wonderful library and then kind of built into it right now wonderful extensions on top of that now that you can do a lot of stuff and there are similar bindings in Python that you can experiment with or any other language of your choice so this is great for grammar I don't really need to be on the charting side I don't really need to be at the pixel side managing each and every element of interaction so I have a graphical primitives that I can manage and handle but it doesn't do interaction so my whole aim of trying to learn interaction is not there now I can make unlimited charts and I can play around with it but I'm still limited to static visualization so last year I said let's do interactive this again having seen a lot of data journalism people doing great work and in India people like Kraminar, Mint, IK doing some of these works I was like let's go back and do more interactive there and the demonetization had just happened so I said let's pick this RBI database of how many nodes are there and let's create a visualization so I created a narrative visualization animated it, it was kind of the color of nodes the idea was how big is the share of 100 or 1,500 nodes and it's basically 83% at that time but I really wanted to see the transition from where we were in 19 or at least 35 years back and kind of come all the way through and build it up right so this was great I was like okay I can now do and I kind of started to do D3 and D3 is really nice because it does implement the grammar of graphics so this was partially built in D3 it does implement the grammar of graphics but it does not do interaction because there is no grammar so the interaction element of in D3 or any of the library abstractions built on our top are all very imperative they are all imperative and imperative means you have to describe how each interaction needs to be computed right so it's not you don't describe what needs to be done you need to describe how each of those interaction elements would need to happen right so if you want something to hover you need to write the code for that if you need to make something link together you need to write the code for that and if you want to then render it differently and you say I want to use an SVG to make it happen that's going to take a different interaction model if you want to render it on a canvas that's going to take a different model because I have too many data points and I want to render it on WebGL that's going to take another different data model because I have to describe each of these interactions directly right so it is an imperative style of coding and most of you who have done imperative would know that you need to really describe each of the steps in making the visualization right so this again turned out to be okay for one or two projects to try my hand at but this is not something that I want to kind of keep doing or keep using right because this is way too hard still way too hard right I call it way too hard for humans right not for JavaScript Ninjas or coding Ninjas but for normal people it's the imperative style is really hard right so we need to find a different way to do this so then I said fine let's this is fine the imperative style hard let's re-examine this graphical user interface tools that are so there are these GUI tools that have been there to build and they do a lot of these interactions and in the trigger that happened in the last few months was I was helping a startup kind of build a dashboard so they had a product and they were really trying to think of how we could build a dashboard so you know we've done all the product we have a real-time analytics system we want to put a dashboard and the science they were saying is that dashboard is a solved problem right so they you know we looked at a lot of dashboarding tools and you know they all have these drag and drop capabilities to make interactive graphics and the idea was that this whole paradigm of making business dashboards or making GUI tools is like a solved problem I was like okay so maybe this is the solution to kind of go down that path so we should just drop this whole coding and writing stuff and just use these GUI tools to make it happen and I said maybe and this is what happened when I tell people I'm doing a talk on interactive database people come back it's a solved problem just put it in tab why are you talking about this whole topic right what made me uncomfortable was A is it so simple okay maybe it is but then why do I not really see some good interactive dashboard right because I teach this stuff I consult on this stuff and I see all kinds of tools people use from every possible graph we use interface and there's never a really good interaction or interactive dashboard that I come across so that kind of triggered the same maybe it's not that simple right so there is this kind of glaring gap between handcrafted, podcrafted, P3 or any library based visualization that the data journalism people do and you see those fantastic stuff and then there is this business side of GUI created interactive is and you're like this thing just seems too far out too far out and it's also a challenge when you go and talk to people because people want to do that stuff in their business dashboard but maybe it's not possible by the graphical user in the case you do right so how I mean this this sounded really bad and as I started to look a little bit deeper into this I came back to okay what are the basic interaction principles right so Ben Schneider man who kind of talked a lot about who designed three maps and has talked a lot about interactivity principles he had this thing about information seeking mantra which is basically you overview first then zoom and filter in detail on them so that's kind of like when you're trying to refine an interactive dashboard this is kind of like the way to visualize or way to think about it but when you go to business dashboard tool or every business designer tool they kind of tweak this mantra right so the information dashboard mantra is aggregate first make a chart link it and then put an order table on demand right so the information design mantra for dashboard is very different so let's see what that means right I have an order table or I will have a data table I'm going to load a data table I would create some aggregate measures so I create these nice aggregate measures I would make one D or 2D charts okay so let's put I will put them in a very block layout one next to the other I will link them with a few filters and I would add a table list for data right so the information seeking mantra there and when you start using dashboard tools is that translates into something like this so every dashboard ultimately looks pretty much like this right and no and this is easy because it's easy because now you can you know unlock the data using a dashboard so you're saying I want to create a dashboard if I have data I want a dashboard okay fine I have a column in a data storage behind it that's great I have some reusable charts we still in the charting metaphor I can put them in a block I can just about add the basics required to annotate it just about the basics so you know titles and maybe headers a bit and maybe highlighting an hour and I will just rush right so this sounded you know way too easy and because it's way too easy it is like one design paradigm that everyone started and then when I look back at what how much time it used to take us to create something like a killer chart that I started to talk with it used to be really hard like you know really investigating what we need to make in the visualization how to make it how to make one good slide how to link those three four slides together make kind of a killer chart or a killer conversation that seemed far more away from what we have right so there's probably a difference between simple and easy right so you know it's easy to confuse the two right the simpler the thing is to do or the simple thing is to understand often the more difficult it is to do and I think that I mean a number of kind of people who talk to visualization talk about the same challenge right most visualization dashboard designers or libraries will think about how can I scale this tool so that it can handle a million data points or how it can create 10 million bar graphs or you know 20 thousand bar graphs they're all thinking about how the scaling problem can happen and if you really talk about anybody who is practicing visualization in a much more custom way manner they would always think about how visualization is a communication problem I want to think about how to design this thing in a way that I can explore right I want to explore the data find the shape of the data and be able to communicate that that is the objective that I have rather than just trying to create a tool-based the word that I kind of use for is chatomania right so I have all these data I have the technology to make these dashboards let me put them all together and kind of throw it out there right that's the dominant that business dashboard right and it is interactive right so there's obviously an upside to this I could not have done a lot of this visualize interactive visualizations earlier without this graphical user interface right so this GUI helps me do that visual analytics very easily it helps me make better simple charts it does allow me to have better aesthetics and it is a bit of a modular and scalar structure to do interact with visualization the downside though actually is much more it kind of overindexes on one particular design pattern right the design pattern of putting these charts together in a block and linking them together it doesn't allow me to think about how I can lay the charts differently how I can think about visualization and interaction difference right the shape of the data that is there is lost right the whole intent of finding something unique in the data and communicating that through the dashboard is gone when you just aggregate it down and put it in mostly the focus is on just getting the data out there in some visual form rather than thinking about is there any insight or is there any narrative and it becomes very very impersonal and so the quest continued for me and I'm not going to I'm going to hear back a lot from people who say we love our graphical user interface and we love our dashboarding tool and you know what are you talking about in this for me at least the quest continue in the sense that I needed to find something that allowed me not to go fully into the graphical user interface not necessarily require me not to write 50 or 100 lines of imperative code to design one simple right so we need a declarative grammar of it so we need something in which we can describe how visualization is done in the same way we can describe for a static if you can describe static graphics and we can build a graph why can't we describe interaction in the same way and this is not an easy problem to solve I mean if it was it probably would have been solved but there is a couple of new things that have come which make it seem more interesting right there there are a couple of times at this to do that right and the intent here is again to move in a declarative way is I don't want to describe what the interaction should be I just I want to just sorry I want to describe what the interaction should be I don't want to compute it so I just want to say select this cell and on highlight and I create a visualization rather than actually coding the entire action of declaration so the tool that I kind of leveraged or went with is Vega light and kind of Vega and Vega light are two sets of libraries they come out of University of Washington it's an academic group but they have been part of you know a lot of development and visualization topics so flair came out of the same place Mike Bostock actually was at the same place and D3 comes from him and Jeff Heer and his team have this whole ecosystem built around Vega and Vega lights right and so last year at one of the Hasge events so there's one advantage of coming to Hasge events is in the last years even my lack of JavaScript knowledge I wanted to see how we could take something like this and make it simple so I worked with the two of the Hasge folks stairs and Vidya and we had together something at that time which would take and we call it this down kind of like markdown but for visualization right and the intent was to take this grammar of graphics which is very declarative and allow us to create interaction so this is on the web so you know you can go to this down calm and you can experiment with it it is so even though we did it last year I haven't gone around talk too much about it so far because this whole interactive data visualization interactive declarative part which was part of Vega light was is still in beta or is still coming out so they just figured out a few of those principles and I didn't want to go out and talk about static visualization and say how we can do static mark but now because we have this interactive visualization I have the ability to write the same visualizations in a very declarative fashion so I can describe just the data and the mark and the encoding which is the x and the y and the color and the sizes so that's still common to what I would do in a static visualization but I can also now define what happens when I do some selection so if I versus to a selection and this is a brush selection I'm brushing one part of that I define a selection brush and I'm describing it of the type interval and the moment I do that I can then define what happens to color so I want the default color to be gray but when I select that interaction I want that part to be highlighted. Now this is just one of the examples in Vega light but the intent is that with just moving from pure selection to much more complicated selection ideas we can go forward in it so I'm just going to show the Vega editor which also has an example of some of these interaction efforts in which I can brush on just the overview and so this interaction effect of overview and detail which is really hard to write can now be written in a very simple fashion and I can actually write this in an interactive and one more example before I move on to what the implications are something that's also really hard to do cross filtering so trying to filter across many rows to write it in a declarative fashion in that imperative fashion will take you a long time but now I can filter through multiple highlight different areas and I can actually filtering across each one of these elements. I take too much credit for doing it because what Visdown does is in essence very simple it just takes what you would normally write in Vega light and they have very well documentation which is a JSON one it just puts a markdown editor in top of that and allows you to then write in markdown codes instead of saying colon colon colon and Python you just say sorry back to back to back to Python you just say back to back to Vis and you define that declaration right what it is allows though is that now you can actually write narrative documents and embed visualization as well as the commentary around that in a very easy way and I think that is strong potential from building these declarative tools this allows us to do a lot more many things right so I'm going to talk about seven things that can happen now if we have much more of a declarative interactive visualization one it allows us to do do something which is even more than doing dashboards or just explanation right so the typical end of the spectrum is explanatory graphs or exploratory graphs right but if you really want to understand something you can think of this set of stories that are dashboards right but if you really want to get people to get some insight you can think of it as explorable explanation can I do both explanation as well as exploration at the same time right and this original intent or idea obviously came from Brett Victor who is a brilliant writer talks about up and down the ladder abstraction and a lot of topics around how to create interactive or explorable explanation and because now we have tools which are declarative people have come and built other markdown based tools which allow you to do so there's I'm not the only one experimenting with I'm not the only one experimenting with using markdown as a way to create if you are tuned to try other tools which are built again on top of Vega light or you can even write more there are other experimental tools which allow you to very similar concept write markdown on the left and you can then build an exploration dashboards on the other side right so and this goes much more beyond than just adding one visualization you can actually create reactive components and play around with them and create it as part of this so this is same idea of creating a document which is just not only visualization but now you can actually embed ideas and explain ideas for the machine learning folks similar stuff that you see in on distil.pop for example is another way it is now easy for anyone else to create their own distil.pop kind of documents which explain why machine learning is working the way we just go back to this it also allows you to do data first design right so instead of thinking about aggregation everything with the ability to explore rapidly you can actually then take each data point and see how you can visualize it right so not just think about aggregating down everything but thinking about how each element can be visualized and how I can kind of get that insight out of it right you can also think about instead of showing single can I show all of the data right so I can I do high density charts and this is a lovely example of how you can build a chart or which as you increase the data density the configuration of the chart itself changes right so if we can write declarative stuff which handles data density on its own we don't need to again think about how we need to define a bar chart or a hex pin versus a scatterbar right so as the data density increases we can have the ability to kind of show it right we can then do more things around visualizing uncertainty right so how can we go from just one element of showing certainty to what we really want to show about how that bar is actually just to be visualizing uncertainty and uncertainty is sorry visualizing uncertainty because uncertainty is really hard because it adds one more dimension to it right but now we have exploration tools we can actually do a lot more of that so we can create charts like this which would otherwise be not so easy to create in a charting way slide and the last two points which is we can think from moving away from blocks to thinking how we can compose something right so move from just a single block based design that we kind of picked up on we can think about composition so this is a dashboard which is much different than what you would see on Vega which is again declarative and you can actually play around with this and build this much more rapidly than you would actually be able to build if you were trying to use a GUI tool or actually for it think about adding annotation as a first class citizen so not only thinking about how the chart works but thinking about how we can also then add annotation as another layer because we can start to declare it and be able to embed it into the charts and finally we can think about adding layers or doing layered interaction and think about the charts not as one single layer but multiple layers and we are interacting across each one of them and creating visualizations and interact with visualizations all of this is possible once the tools to make move much more away from the imperative design or a fixed pattern in a graph using this and that's why I think kind of these there's a single different upside to kind of declarative based interactive tools and I would seriously urge people to kind of try out this down or idle or any of the other languages I know many of the data scientists would be wondering I never want to go out of my design tools and move to this while there are bindings to there's Altair which is a Vega light binding in Python, there's our Vega light which is a binding in R so you can also experiment this within your own workflow if that is what you prefer but I really think that moving to a declarative design helps us kind of build a better model of the of the visualizations of the data we understand much more about the story we can both get macro and macro pictures we can build and understand certainty or uncertainty in our data much better we can see the picture as well we can actually do much more narrative design and we can work across these layers of abstraction I'm going to stop here on human light so everyone's light in the particular universe and I really think that's one of the things about interaction is that you can actually then go from a singular story from aggregation back to single elements and move between these two layers I do a lot of storytelling and we always find we connect with stories because we can see the individual element one of the challenges now with databases that we've gone to so much of aggregation that we lose that individual story that we really want to refine and I'll stop at this Visdown is available at visdown.com it's this open project please contribute and see if you want to experiment with it or you want to experiment with the other of the declarative tools that are there I'm mostly at caps.com I'm pretty much on the caps if they're better on compare questions and answers if anybody has a question please raise your hand we'll get you on mic Hi, I'm Mr. Shant and I represent a company called cookie analytics we are in mainly visualization I resonate with you what you have mentioned couple of quick questions two part questions Visdown there is something called highter have you seen what highter it has a lot of interactivity and also it goes with the traditional finance guys data model representation my main concern was whenever I want to go with the interactive tool for visualization the data to take example as a degree I'm supplying data but the data for every charts or every representation has to come in a different format which is not possible in most of the real-time scenarios right how do you deal with that what is your thoughts on that because data is what we are all here for and data cannot be supplied to different visualization in the same similar manner but that is not possible I cannot keep supplying different types of data in financial space I think there is nothing wrong in choosing tool that fits for you let me not give you the impression that I am against charting visualization, graphical library hightchat works for you very nice but even a charting library has a given format you need to still define what the data is going to be how the data will be represented and the data format is very limited for a particular charting the reason for moving to grammar is that it allows you to then not changing the data but just changing how the grammar is happening how the visualization is happening you can move between charts once you have interactions you can move between interactions much more easily also so the ability to translate from charting to grammar is ready to give you broaden your horizon broaden your envelope to select charts and now broaden your envelope to select visualization it does not prevent you from so the same is in my understanding much more flexible than a charting library we have time for one more question oh up in the balcony okay I can tell you that we have an OTR an off the record session in data visualization today at noon take your question in please come to room one for the data visualization from TR noon you can ask and talk thank you so much thank you very much so our next speaker is going to run across the stage and do his setup while I introduce him