 So hi everyone, my name is Curran and I'm going to talk about data visualization in the browser today so The purpose of this talk is twofold I want to give you a technical introduction to the techniques for data visualization in the browser including D3 and SVG and The second purpose of this talk is to give you a sense of what's possible with these things So this is the tech stack that I use and that I'll be talking about today. It's purely on the front end nothing on the back end and CSS HTML and JavaScript and SVG is what I work with for graphics I'm just curious how many people have worked with SVG. Oh great Great, and I'm you everything I'll show will be using D3 Data-driven documents a great JavaScript library for graphics who here has worked with D3 Cool about half nice so I want to point out that my slides are available if you go to Curran Kelleher no space Twitter comm slash Curran Kelleher The link is there if you want to follow along So I'll begin with the technical part to get you sort of familiarized with D3 You know if you're not already in graphics, so these are a bunch of rectangles on the screen. It's kind of a pseudo bar chart It's not really a bar chart, but it's the essential essence of a bar chart, right? And so first of all SVG stands for scale scalable vector graphics and It's as opposed to raster graphics, you know when you use image files It's raster graphics meaning each pixel is defined in the image But vector graphics is different because SVG defines the shapes the coordinates and the shape so you can zoom in infinitely and you won't lose any resolution That's the idea of SVG So here's the code for that pseudo bar chart just as SVG so this is Basic usage of SVG with no JavaScript. It's an HTML page With an SVG element that has a width and a height and four rectangles each of which has x y width and height specified in pixels and if you're not aware in this coordinate system Y equals zero is at the top of the screen not the bottom which is opposite from math So here's the second iteration of this pseudo bar chart and this code uses D3 just to give you a sense of the structure of the D3 patterns so I've encoded the data as x y and height For each of these bars because that's what varies between the bars and then this is the typical D3 pattern for making these SVG elements from data the The SVG element is there already and we're selecting it with D3 and And that gives us a D3 selection and then this is the Data binding part of D3 where you select all rectangles and there are no rectangles at this point And then you bind it to this data this array of data And then you get this enter virtual selection which corresponds to the data that doesn't have any DOM elements corresponding to it yet and Then for that virtual selection you append a rectangle for each element of this array And by the way, this is usually how data is structured in memory when you use it with D3 It's an array of objects So if you think about it as a spreadsheet or a table each object is a row in your table and Then this is how you can use these functional programming kind of patterns with D3 to set These attributes of the DOM elements so it constructs the exact same DOM as we saw before but it's now it's driven by data so you can pass in a function of D and D is just a convention This is for each row each row of the table will be D here so just retain returns D on X D. Why and You can also give it a constant value Like 170 because all the widths are the same for these rectangles and then sort of a third iteration of the pseudo bar chart uses data instead of You know data that has x y because x and y that's the language of pixels right in graphics Usually data doesn't have that so you need to use D3 scales to map the data to the graphics And this is what D3 scales are all about so let's say you have a table with different names and different values five four three two one you can use D3 scales to map those data values to pixel values and I don't think I'll cover this in full detail, but just to give you a sense. This is sort of how D3 works You have an array of objects you use scales to map them from data space to pixel space and then you use this update pattern of D3 to generate these DOM elements and Then a fourth iteration shows how you can load it from a CSV file So here's an asynchronous call that loads data dot CSV and This is the content of data dot CSV Which gets loaded and transformed into that array data structure that you saw earlier so that's the Technical introduction to D3 and how how you can generally work with D3 So from here on out, I'm not going to go too detailed into the code But I'll just show you different examples of what you can do with D3 once you get familiar with it so the idea here And this is why I love data visualization and graphics the idea here is that Data visualization in my view is kind of like a telescope that you can point at the universe of data That's out there that exists where it's in your databases and what you're really pointing it at is this digital mirror of the world You know things happen in the world and then data gets recorded about those events that happen and this digital mirror World is getting constructed all the time and I see data visualization as a way to look into that universe You know so you can understand the world better By visualizing the data about the world So one thing so yeah, let's give some meaning to these bars So here's a bar chart that shows the top five countries the largest five countries in the world So you can see it's India China US Indonesia and Brazil So I remember the first time I saw this graph. I was shocked to see how much bigger India and China are then all the rest of the countries in the world You know and you don't get that kind of perspective if you look at numbers you get that perspective if you see graphics And with your eyes you can see like yeah, they're actually a lot bigger You know and you don't get that perception with just numbers So another thing that I was curious about is religion, you know, what are all the religions of the world and how are they? Distributed you know, how do they break down? So here's another bar chart? It's a variation of a bar chart. That's horizontal and horizontal bar charts are great because you can show me more bars and so this is Some data from the Pew Foundation about different religions in 2010 it's an estimate So I was also kind of shocked when I saw this for the first time. I didn't realize that there were so few Jews in the world Can you imagine that see how small that slices? And the majority are well, I don't know about the majority, but the largest population of religion Adherents are Christians Muslims and unaffiliated unaffiliated is number three Can you imagine that and then Hindus is number four And can you guess where all the Hindus are? So this next chart sort of breaks down The chart one level further and it's a stacked bar chart. It's a horizontal stacked bar chart So this shows you the religious breakdown of the largest 20 countries So you can see the Hindus segment is red here and you see they're all In India almost all and there's some in Bangladesh as well So I'll go through the code real quick for these charts as well It's similar to what we saw before We're loading from a CSV file This data about the countries and then we're rendering it using D3 scales and D3 has axi axes built in so that's one fantastic thing about D3 the axes are these tick marks up here You know 1.2 billion 1 billion China India US those are from the D3 axis module and The way that D3 axis works is you create an SVG group element And SVG groups are great for grouping elements together You can translate a bunch of elements at the same time if you put them in the same group and then You just you call the axis with the SVG group element and it will render this axis kind of magically So here's the interactive version of the stacked bar chart of religions and I want to kind of show you Interactions that you can add to any visualization one of the most common interactions as tooltips means when you hover over a certain shape You get more detailed information about that shape Like this rectangle represents Christians in Mexico. There are 107 million Christians in Mexico And you can hover over any of these bars and see these numbers So if you go back to the telescope analogy, you know visualization is a telescope into the universe of data You could think of this visualization type a stacked bar chart as kind of a lens that you can put on this Telescope and you can point it at anything, you know, so if you have databases of your Applications data, you know, how many customers are buying which products at which time You could apply this lens to that data as well and then visualize it And then you perceive the data more clearly than you do if you just see numbers in tables Another interaction here is you can hover over the color legend and it will highlight just the matching bars in the bar chart So this is useful if you want to ask the question well, where are all the Hindus in the top 20 countries you can just hover and it will highlight them and Without that highlighting it's sort of hard to see that there are Hindus in Indonesia, United States and Pakistan, but you can see it if you if you sort of fade all the other ones to the background And you can see the majority of Buddhists are in China in Japan and Thailand and There's a small segment in India so Going back to this telescope analogy, too You can sort of zoom into one part of the world and say what does it look like around here? So this visualization is just essentially a scatter plot meaning there are circles and each circle corresponds to a city and There's zooming here. That's another common interaction and visualization is zooming you can apply zooming to most Visualization types so you could zoom out and it's just circles and you still get a You still get a sense of the world you get a sense of the world map here and you can zoom in to India and again, there's tooltips on hover and By the way, this is outdated data. So don't take it literally. It's kind of I think it's from 2005 Maybe so it says Bangalore this five million people But if you zoom in here, you can kind of see Okay, Bangalore is a huge city In this region, but what's this other circle? Oh, it's Chennai and then You know, you can sort of navigate around see oh, there's a huge city over there. What's that? What is it guys? Mumbai, right and you can see Yeah, the tooltips 12 million in Mumbai and there's a bunch of smaller cities around Mumbai. It's a huge metropolitan area But in terms of the code this visualization is actually very You know, I would consider it simple It just loads the CSV file each row is a city that has latitude longitude and the population and It just maps each city to circles with this code here You know, it's SVG still Make a circle for each city and then just use the scales and you can see how the scales are set up The radius corresponds to the population and by the way If you use circles in visualizations and you size them by some data You should use a square root scale not a linear scale and it should start at zero If you do it that way then the area of the circle corresponds to the data But if you use a different kind of scale like a linear scale or a log scale Then the area of the circle doesn't Correspond to the data anymore kind of skews how you perceive it And this is a style I like to use where I use variables for the columns So in a lot of D3 examples you see the the columns are hard-coded in the visualization code But you can extract them as one step toward making reusable Visualization components so you can see up here. I have these variables You know X column is longitude Y column is latitude and the R radius column is population But this is a fairly rough view of The world right you just get the cities, but it still gives you a sense of where the people are I think a better proxy for where people are is the this awesome data set from NASA the earth at night and This is what that data looks like Overlaid with labels and this is using D3 as well using a module called D3 tile that lets you make tile based maps So now you can see much more detail about where the people are on the surface of the earth and So but so this is the light coming out of the earth at night Picked up by NASA satellites, and then they've released it as public data But if you just look at the NASA data, you can't match up the bright spots with the city names So I use D3 to add another map tile provider that gives you labels and put that as a layer on top So here's the interactive version There's zooming here as well So you can see the labels load separately from the background map. You see Bangalore is a big area Chennai Hyderabad You know Mumbai and Pune they're right there. There's a lot of people there And then if you look at northern India, I think this is fascinating see all this density of people up here Jaipur New Delhi and all this huge population density up there and I think it's just fascinating to look at this you can see how people are distributed and When I first made this I zoomed into the US and then I made it so that if you click on it it will move automatically and So this sort of gave new insight to you know, there's places that I've heard of But I didn't really realize how big or how small or how many people are in each city Actually, you see Chicago. See how many people are in Chicago. It's a huge Hugely dense area over there and then Dallas, Texas down there. That's huge as well Oklahoma City So this is using a couple different map layers using D3 The tile layers are the NASA Earth at night images and the labels and then there's vector There's layers as well, which are the state borders see these Blue lines on top that's using SVG to make an overlay of the state border So you see where the state borders are and Then I didn't really realize it before I made this but most of the population in the US is concentrated on the East side and on the west the western half of the US The density is a lot less. It's a lot less. Most of the people are in California So here's another example that uses D3 and SVG and a tree layout To show you the hierarchy of the world countries So this is what it looks like in detail. You see it at the top level There's the world and then there are the major regions of the world Africa Europe Asia Latin America And then it goes all the way down to the level of countries So for example within southern Asia and you can zoom in here as well You see oh, here's a Pakistan Nepal India's there in Southern Asia and so wherever you are in the world if you open up this graphic you can zoom into your country and see You know, where do where am I in the hierarchy of the world? No, where is Samoa? Oh, it's in Polynesia. Where's Polynesia? It's in Oceania. And where's that? Oh, it's in the world So I'll show you the code for this a little bit to get a sense that Of how it's done. It's again SVG using D3 to make an SVG DOM element D3 cluster is the part of D3 that does the tree layout here And then oh, there's actually a wreck There's an invisible rectangle on the top of everything to capture the mouse events Presuming and that's a common pattern with D3 So it's a JSON structured Hierarchy and by the way you can make requests to API's as well The D3 code would look exactly the same if you invoked an API here instead that would make a database query on demand and So you use D3 to make the links and also the nodes and the nodes have Text inside of them and notice how the font size is a function of the depth in the tree So if you see up here The label for the world is much bigger than all the others And as you get down to the level of countries it gets smaller and smaller So it just gives it give a sense of what you can do with D3 in terms of tree layouts So where's this data from United Nations and the United Nations had another data set that I got interested in when I saw This and it was the migration of people in the world between all the countries So the migration data had data for for each pair of countries How many people went from country A to country B in 2015 and so I wanted to visualize that But if you visualize all connections between all the countries, it's like there's too many connections, right? So what I did is I aggregated the data to this other level Where it's like the Caribbean, Micronesia, Polynesia, South America It's the next level up from countries and I made a visualization of Migration and this is what it looks like global migration in 2015 See if I can fit it on the screen this is using a technique called cord diagram and You can use a cord diagram to visualize flows So each cord here Meaning each each of these shapes inside the circle it represents Flows in both directions between the countries and so for example This the bottom most shape here It's the segment on the North American side is big right that represents that people that are going from the other part Into Northern America and the other part is Central America So the number of people going from Central America to Northern America is huge That's why the segment is large there But that shape also represents the flow in the other direction and the flow in the other direction is Represented by the width on the other side So you can see that the number of people going from Northern America to Central America is a lot less So you could see the people are generally flowing into Northern America from all the other places and That's what that's what sort of stood out to me when I made this visualization See that see the Northern America part if you highlight here You can see that For the majority for I think all of these cords The segment of people going into Northern America is far greater than the segment going out So there's a mass migration into Northern America from all over the world And I was sort of surprised when I saw that and you can see other patterns like for example in Southern Asia There's a lot of migration in Southern Asia, but most of the people are staying in Southern Asia They're migrating from country to country within Southern Asia. That's what that big blob here means So I'll go into the code a little bit here It's D3 layouts D3 ribbon and D3 cord and D3 arc these are the things that you can use from D3 to make a cord diagram and it's great for visualizing flows Here's another map visualization that I made Migrant deaths over time so there was a great project called the migrant files where a bunch of journalists came together and I think it was funded from grants They collected this data about migrant deaths people trying to reach Europe from other places in the world like Libya and Syria and Each circle here is an event in which people died trying to reach Europe from these other places and These journalists they collected each of these events from news articles So whenever there was a news article about an event in which people died trying to reach Europe One of these journalists entered it into this database and they did this for since 2000 Somehow they got all the data of all these events from your 2000 to your 2016 And so I thought oh that'd be really cool to visualize right so I made this visualization and this is a date histogram on The bottom so it's a variation of a bar chart where each bar Represents I think a month here, but you can use bar charts to represent units of time as well and Then there's brushing on the bar chart On the on the date histogram. So when you brush see that the map updates to just show the data from that region of time So if you want to just see in 2008 what did it look like? You know, what are all the events in 2008? You can see these are these are where they are in the map So I'll give you this in full screen And you can see that if you select maybe a year and you move it you can sort of see patterns start to emerge and One of the patterns I found interesting is that in 2014 There was a huge surge of events In this area around Tripoli and Then as you move forward in time to 20 to 2015 2016 there's a shift to the the border of Turkey and in 2016 it looks like More deaths were occurring on the turkey border over here So I don't know that much about this topic But the point is if you visualize the data and give people these interactive views You can discover things just by looking at the data And so I would be curious to talk to people who know more about the topic. You know, why is it? Why is it like that? You know, I don't know but I can see it from the visualization And another way to see that is you can zoom in on the map If you zoom into this area in Tripoli see how the data histogram changes You can see that most of the deaths around this area are in late 2014 and 2015 See that but then if you navigate over to this other area The Turkish border over here. You can see that all of these events happened in late 2015 2016 so this is using a leaflet by the way It's not just D3 The map is done using leaflet.js, which is an awesome open-source mapping library. That's kind of like Google Maps It's kind of overtaken Google Maps it's great and Lastly, I'd like to just mention This this other project I'm working on For Stanford University visualizing very old vocal music. So this is a song That people sing it's from like the 14th century So there's people doing research about this music, right? And you can visualize the music and this is what it looks like and we've added these widgets here Where you can see like what are the highest and lowest notes highlighted in red? And there's the same pattern here of brushing. This is called brushing. It's an awesome pattern that you can do with D3 and You can sort of zoom in to certain parts of the song You can combine the voices together Each of these lanes would be a different person singing and these are the notes pitch goes up and down and time goes from left to right so the idea here is just to communicate that visualization is a tool for understanding data and Data is kind of this digital mirror of the world, right? So by understanding the data you can understand the world or certain parts of the world that you have data about and It's so powerful and I think it's just amazing and so That's That's the end of my talk. Thanks for listening any questions Yeah, I think we have a microphone going around So great talk So these visualization These visualization. I mean in terms of responsiveness. So what I do is I always destroy the D3 graph and then Rerender it. Is there something across the Responsive I mean in tabs or mobile and mobile devices or Just what we can do with D3 or some performance based if you can tell something It was always making it destroy and re-rendering it. I find it little Disturbing for me So if I knew if I understand you correctly the question is Currently what you do in your D3 code is you destroy the whole dom structure and then recreate it every time the visualization changes Yeah, I mean Yeah, like something. Yeah, so you're wondering what can you do differently? So Kind of like react has the virtual DOM and the DOM diffing for to increase performance to improve performance D3 has a great pattern and it's called enter update an exit and This can be used to reuse the DOM elements So when your data changes and by the way, this is one of the frustrations I have with the Introduction D3 examples or the ones you find on blocks.org for example blocks.org is where you see these D3 examples And usually when people want to use D3 they go to blocks.org They find some example they copy it and then just change the data to be their own data But the thing about those examples is most of them and I'm guilty of this too It just uses the enter part of this D3 pattern of enter update and exit But if you use the full pattern which takes it takes a little bit of work to use them to understand how to use it But if you use the full pattern, then you don't have to actually destroy all the DOM elements and recreate them every time the data changes You can use this pattern to propagate new data into the existing DOM elements and just change their attributes and the Enter part takes care of adding new elements new DOM elements for the new data that didn't exist before and Then if you have new data that has fewer entries Then the exit part of this pattern takes care of removing the DOM elements and then the update part It takes care of reassigning the properties of the DOM elements like x y with height and a sort of thing So yeah, I would recommend reading about the enter update exit pattern of D3 for that. Yeah, yeah one more sure so How would we like the responsiveness if the window size is small? It's suppose in mobile if I go to portrait mode or landscape mode. So how would I do something like that? I mean Sure, this is a very this is a very common issue as well Because a lot of the examples the first line says width 500 right and but what if you width is varying? So I faced this issue as well and this is my solution. I made this example where if you open it It's it resizes to whatever size the browser is and it updates actually so if I resize the browser it will update like this and You can use this pattern To in conjunction with the D3 enter update exit to resize the charts like if you if you're if you're if you're on our mobile device And you change the orientation this pattern would fix that and I'll just tell you what it is a little bit So I'm using CSS to compute the size of The containing DOM element and you can use any CSS I'm just using I happen to be using position fixed left top right bottom are zero pixels This will make the DOM element fill the page and then I have this redraw function that I'm calling once initially and then you can hook into the browser event called resize and Then invoke this redraw function every time the browser resizes and in this redraw function. These two lines here Extract the width and height that was computed by CSS Into JavaScript so you can use them to set the scale domains as the scale ranges in D3 So this is one pattern you can use to achieve responsiveness like resizing responsiveness I couldn't thanks for the top. So where are you? All right, I wanted to know about the usability part in D3 We were looking at reusable libraries that come with built on D3 like nvd3 being one of them C3 being one of them Can you can you comment on what are the libraries and what are the things that we should be looking at? One of the major things that we're looking when we're looking at these libraries is the data that it gets to handle Right if over the top of your head if you can suggest few of these libraries that we should be looking so that would be great for us Sure. Yeah, so the question is what about reusable charting libraries built on D3? Yeah, I mean so my thought about this is there's this canonical work by Mike Bostock called them Towards reusable charts and most of these reusable charting libraries are based on this post by Mike Bostock And he explains how you know his take on how you could create Reusable chart elements and how to create these accessor functions that are setters and getters depending on if you pass them an argument And so nvd3 Was kind of one of the first of These reusable charting libraries and it's really great that a lot of people are using it There was some controversy about the licensing at some point in the past, but I think that got resolved This is a great one. This is a great one. It's But with any of these charting libraries once you adopt it You take on the burden of the abstraction that they created and So typically it limits how much you can customize the visualizations But yeah, nvd3 is a good one. There's C3.js C3.js This is another very good one that a lot of people are using I think I saw this in some Indian government website being used Yeah, and a lot of these handle the updating data But like you said each one of them imposes restrictions on what format the data needs to be in what data structure it accepts Right, so that's part of the burden of their abstraction and then Vega. Oh Firstly, there's a dimple Dimple.js. This is another one of these reusable charting libraries. This is also very good Very good. This one has small multiples, which is pretty impressive But sort of probably the king of all of these is Vega. I wonder if it'll come up. Oh Vega helmets, right? Yeah, this is sweet. This is from Jeff Hare and his group at University of Washington Just to give you a sense of the heritage of D3 D3 was created by Mike Bostock when he was at Stanford University His advisor was Jeff Hare. So he created D3 in Jeff Hare's research group Jeff Hare's research group is continuing to do awesome work and this this Vega project is one of their sort of main Initiatives and they've got a bunch of other stuff that's built around Vega, but this is a really good one This is a really good. Let's see if I can open up the demos Vega editor Yeah, so the idea with Vega is It's not the same as the other ones in the sense that the other ones give you like different classes that you can instantiate for different chart types Like bar chart scatterplot, you know named charts But Vega is different because it's based on the grammar of graphics And you give it this JSON data structure that specifies the scales and the axes and what the marks are So it's a totally different approach than the other libraries So I would recommend looking at Vega But again, you take on the burden of their abstraction and it becomes difficult if you want to customize it To an extent beyond what they have foreseen in their code but yeah, and also there's react this sort of react craze, you know, where everybody's using react and D3, you know any of these libraries could probably be Here's here's react D3 boilerplate You can you can encapsulate any of these things as react components and I see a lot of people wanting to do this And I think it's a great idea, you know, so you just use the react component As sort of the the abstraction barrier and then just figure out what Properties you want to pass into the visualization and use the D3 library to update the chart Yeah, does that answer your question? Hello. Yeah, this thing. So if two or three Data's overlap at a one data point. So how do you handle it? Yeah, so the question is if two or three data points overlap at the same point How do you handle it? Yeah, it's basically in case of bubble chart, right? So the color become more dark, but it's very like you don't differentiate between What if you need to attach some event and so some pop-up so you didn't get the exact data? Right, so this is a question. That's really about data visualization. It's not specific to D3 Yeah, like if you have a bubble chart meaning a scanner plot with different sizes And actually I ran into this with the migrant deaths map and I was very frustrated by it. See if you zoom in here You can see that there's this one place In the ocean right here where all of them are overlapping So I think this is the thing the question you're asking right exactly this case where they have the same latitude longitude So no matter how much you zoom in they're never gonna spread apart, you know, they're the exact same point and so That's It's like a fundamental problem of this way of visualizing where each each record in the table maps to one circle There's other ways like hex bins Anyway, binning you could have other approaches where if you if you want to perceive the density rather than each individual point You can impose a grid Over the data and then compute how many points fall into each bin Let's let me show you hex Hexbin D3 like hexpins are great for this I'll just go to the images to give you an idea. So like here's one example where instead of plotting one Visual mark for each row in the date table. They do some aggregation and they compute You know how many points fall into each bin and then based on that you can size the mark or color it differently So that's one approach and another approach to dealing with this is to have jitter in the plot or use a force-directed layout like here's an example where The ones that fall on the same point they actually collide and they push apart a little bit and Actually, you can turn it on and off So here's where the collision detection on see the points get spread apart It's a trade-off because it's not really honest anymore. You know, it's not actually plotting the data But it shows you that there's multiple points in each spot So yeah, there's a couple of different ways you can handle that situation, but it's definitely a problem Yeah Hi, thanks for the talk. I'm a audible. Sorry. Am I audible? Sort of Clearly Not really. Okay. Yeah. So the question really was How did you go about choosing what? Visualization to use so even in D3 we have lots of options. So Right, how do you go about which visualization choose? So this comes to a Backup slide that I had So there's actually a huge body of work about data visualization theory and How do you choose which visualization to use for a certain data, right? So when you have a data table you look at the columns of the data the columns fall into a few different types, right? You could have strings that's called Ordinal or a nominal columns where the strings are just different entities, right? And then you have quantitative columns where it's like a continuously varying number and then you have Latitude longitude, which is kind of a special case then you have dates as well and date histograms and so depending on How many columns you have and what types of columns they are you could think about how do you map each column to a visual Variable or visual channel. So this this graphic right here is from Jacques Bertrand. This is French guy In 1967 long time ago in this great book called the semiology of graphics And this is where he kind of lays the foundation of data visualization as a field and keep in mind data visualization Is a lot bigger than just D3 You know D3 is the modern incarnation of all these ideas, but they're they've been around a long time So these are the the visual channels that you can use there's marks and channels marks are the shapes like rectangles Circles and then channels are things that you could apply to these marks to modify them for example Size on the top the size of a mark can vary and size is best used to encode a Quantitative variable or an ordinal variable meaning it's different categories like small medium and large But there's no distinct quantity no exact quantity size is great for that And then there's value, which is distinct from hue There's the two components of color so the the value part, you know how bright a shape is that's great at encoding quantitative data as well and also ordinal data, but it's not really good at encoding Nominal data where you have like different people's names for example, you know But hue on the other hand, which is another component of color hue is great at encoding different Nominal values like people's names or state names or you know identifiers you can distinguish between different things with color really well And then there's orientation. That's not really used that much and texture. That's also not really used that much But then in the middle there's x and y X and y are the most powerful The most powerful channels that you can use so if you if you have a data set A data table with like 10 columns and you know which columns are most important to you or your audience You should use x and y to encode those columns and x and y can are they're very powerful because you perceive them right away You know before you even get to think about the chart you see How it's laid out generally so they're very powerful in terms of presumption and x and y can also encode quantities And also different entities like we see in a bar chart, you know One of the axes encodes different things and the other axis encodes a quantity so hope that answers Question I believe we're out of time Hey, Karen So where are you? I'm here Yeah, so you mentioned that if we are drawing circles we should use a square root scale So if you could just give some more Explanation of the rationale behind that and if you could Give other such examples of which scales to use for which kind of shapes sure Yeah, the The logic of using a square root scale To encode the radius So keep in mind you're mapping data to the size of a circle, right? And how do you compute the size of a circle? Well in SVG you specify it as a radius Which is different from the area But when you see a circle when you look at a circle you perceive its area, right? Because you're used to seeing things in the physical world, right? And so based on the area of something that's how you perceive how big it is right, so the idea is that You know when you use the size of a circle It's best for encoding like countable things or quantitative things that start at zero You could have a quantity of zero of something in that case. It would be a circle that's so small. It doesn't exist Right and that would be the end of your scale And then the other end of the scale would be the biggest circle That you could have which could be a custom value, you know But the way that it should vary between no circle and a biggest circle is a square root scale because If you use a square root scale Where the range starts at zero then only then the the size of the circle The area of the circle actually encodes the data So that's why you should use a square root scale when you when you compute the radius of circles for quantitative values There was another question that you had but I don't remember what it was Or another train of thought it looks like we have to stop. Sorry. I forgot what the other one