 David's research interests within HCI are computer vision, spatial computing, algorithmic modeling, and digital sensing technology. This topic for today is interactive data for the web using the JavaScript library DSJ3. Please join me in welcoming David. Hey. Well, guys, thank you so much. Oh, you're picked up on this one if you gave yourself Yeah. Okay. Thank you guys so much for joining. Yes, everyone can hear you. Thank you so much for joining us. So today I will be talking about the JavaScript library DSJ3. This is kind of like a beginner tutorial. And largely how we may navigate coding languages for beginners and how we may start to explore online libraries and documentations as to what I can develop or explore as reference. I'm going to go through a few examples here. So I don't have to go to this workshop number one, so I'm going to use a degree and some examples to explore JavaScript libraries as a tool, you know, exploring how to navigate like a dark container, example references. And then lastly, we're going to a very, very, very basic example, just kind of get a feel of the workflow. It's like the set of workflows that I'm using HTML, loading ddu.js, creating a basic scatter plot. It's kind of like scripting and activity and then positioning these things into your web page. So I'll set up a few examples of what ddu has been used to share. So here's the other d3 website. Let's talk here, I'm coming at the overview of the library. And right here is ddu.js, the JavaScript library for manipulating documents based on data. D3 helps bring data to life using HTML, SVG, and CSS. D3 is an emphasis on work standards. It gives you full capabilities of modern browsers without tying yourself to a proprietary framework, combining power visualization components and data-driven approach to DOM activation. So right here, we kind of, this example is a lot drastically in the chat here for you to view before and after this workshop. But in that GitHub file that I shared earlier, a lot of these links are in the workshop that HTML documents that I included. So it's a few examples. If you're familiar with the New York Times and kind of the data presentation team in the visual investigation department, d3 is actually a central tool that you're using within the web experiences. A lot of this data is processed in R, but it's kind of like make this data approachable, accessible online using d3. And so if you're familiar with kind of the general basic web framework, it's usually HTML, which just scripts your basic text in images and styling on the web page and in CSS, which allows you more control of those stylings. And then JavaScript, which allows you to kind of add depth with your computations of those things. And JavaScript is the language in the libraries of JavaScript, which is essentially pre-written algorithms for you to plug into your web page. So this is one example from 2012, showing counties going red, but I think nothing right. And as I said earlier, it does use SVG documents. So this is something you can quite literally drop in, let's say, Adobe Illustrator or Photoshop and then bring it into d3.js to animate. This is one example, exploring that. This is another example by another publication, The Guardian, looking at Alaska's newest communities and the isolation communities facing isolation and disaster as ice melts. So as we have these relinkable animations that kind of provide context as to what this data is, kind of a pre-library phase of the minute, usually data was static. I don't know yet to animate this. So if you guys probably remember Flash or DreamWeaver, those are all online methods of doing that stuff, but d3 kind of makes it easier. Here's another example, you know, exploring what's one medium of data. Data just exists as numbers, but more so through images. There's really incredible interactions you can kind of explore with the data. This is, again, New York Times piece exploring our Fashion Week documents. Another example is the constellations of direct days and my stocks. The New York Times, again, did put their team. It's like webs of interaction and things like that. So usually the workflow is an SVG and then in those custom examples and documentation files, you know, how to do these things. But yeah, so for today, we will be working with a very basic example that's kind of fun here for us, but it's essentially the scatter plot. And I'll be showing you how to kind of work with these documents. So as I said earlier, this is a, this is a beginner workshop. And so I'll show you how to kind of work with fewer examples towards finding or editing towards your own needs. So at the top here, we kind of have a basic HTML setting up. This is where you type essentially into your IDE. But before we go further, has everybody had the opportunity to download on atom.io? It's in the workshop file, but I will add it into the chat here. If you also have a text editor or a work app, that's also fine. You just have to save your file as an HTML or if you just download that far from the GitHub here. Just open that. You can edit it from there. Essentially I'll be editing my document in bittersweet code. So if you have that as well, that is also fine. So here's our workshop file. So the db documentation, examples that I showed here, also included in that file. And then firstly, we're going to download atom.io. And then if you already have an IDE, you can also just use that. And then just visit the GitHub page linked in this document to gather or to get this file that we're working on right now. So I'm really green. That's kind of our, this one, instructions like the planter for what each of those lines of code mean. So firstly, we're going to load db.js, which is a JavaScript file. So this is like an API that is referenced. And so putting this is important because it's the lines of code that we're writing, you know, our reference in this thing. And then the next phase we will be exploring is developing a div for our scatter plot. So essentially a div on a web page is essentially a container within that container, we're putting our data visualization into it. In a position that div, so for example, if you want it to be centered, right or left of line, we're signing that with CSS here. So I now have it as an actual position. It's 30 from the left. And that's kind of what that is. And then right here is where we start to get into our D3 programming. So this script tag is essentially how you call a JavaScript file in HTML, or you can kind of call it as like a separate, kind of like a separate JavaScript file that's on your computer. Here we start to set the dimensions of our, of our scatter plot within that grid. And so for example, for, you can set it to be 450, or you can set it based on the parameters that I present themselves as like building our web page. And then this is where we start to append the data to our scatter plot. And then this is, this is where we're getting our data from. So this is also linked in the, in the GitHub page that I had linked, but essentially it's just two, it's two columns of data, two rows of columns of data, that are an example for our CSVs. So using data, we work with CSVs and do, I mean, self-hours, and do JSON files. In this case, we're working with the D3 that's CSV. And then if we were to work with the JSON file, usually kind of like in the lightning, we'd just do dv.json. And with the scatter plot where we're also drawing them. And so this is how we draw x-axis, which is kind of calling the variable x calling the object scale linear. And then setting our domain, which is 0 to 3000, and then our range, we're just like the width of these parameters being set. And then our domain, which is essentially 40000. And then the actual aspect of this is calling out tooltips. And so when you hover over a dot on the scatter plot, it will give you context about that dot on the scatter plot and what it means. And then these are just massive reflections from JavaScript that allow you to interact with these pages based on mass hovers and things like that. And then this is kind of where we're adding context. And so this is where we kind of coordinate the data with things I might want to see. So when the link is at this level, there are there are there's many plugins and calling these objects because they're calling a specific line of data from the code. So this is kind of what we have right now. And I'll show you an example of what all this looks like in our reference. Those things. So this is a scatter plot we talked about. So this is this is our domain that we set earlier. And this was our range. You know, these are like those tooltips. So when you hover over them, they come in with you at different context markers as to what each of those aspects mean. So as we said earlier, DG is very useful. Kind of looking at what's existing from what the what the authors a lot of you have given us and kind of customizing it to our own needs. And so we'll go through the customization process. I'll show my entire screen. So we all have like a very view of what that process looks like going from the editor to to your published artifact. So let me see here. So firstly, I will adjust what just decides the grid. So we go here and here that refresh in there without the changes the size of that. And we can start to increase our domain by changing our value in like a domain sheet. Once you go back, this every fresh it changes that we change them according to like the shape of our data. So if you have one thing you kind of want to display the x axis would increase the domain of that value x axis. So right here, we have very smushed this data full of space does that give it more space. For this case, less space is that I'm going to see it start to leak over. This is kind of where we adjust the size of our width of our grid. So choose the 600 and refresh that page. And then there it is. So at the bottom, we're kind of seeing the proper context bars pop up and I'll show you how those are populated. So right here, you have this string. So string is just basically text. And then recalling variables through this direct object from these files. And what we're doing is we're coordinating different pieces of text with different objects from those things. And so, for example, I can change this to this is and then that is what we see that interest of each, we start to see those things change. So this is 1494, that is 229,1500. And we can kind of customize those things to our needs. And so for like, this amount of oranges costs a start because of inflation. That will be shared data we can change. So for example, do that. So it's kind of over, we start to see these things change. It starts to play with the styling of this, those dots right there. So right here, you can have this collect code. Essentially, this is what's filling each of those dots. And so what we can do is we change that to 2,000, essentially, black. We start to add outlines to each of them. So the stroke line right here, we continue that to magenta, refresh, and it allows it to like start these. So you have a plug-in branding system. They kind of have a foresight. These are things you can kind of plug and play, kind of giving these on example files. So it also changes some magenta. It doesn't have to be a collect code. As long as it's kind of a global color reference, it's something you can use. And you also change opacity. So right here, we have that opacity of about 20, which reduces opacity. So you can play with that transparent first, as far as I'm concerned. So we'll play with a value of 1, you know, refresh dots. So that is kind of becoming transparent. I'm going to change those things. But right when you're just going to styling, right here is where you're playing with the pixel tips. Above is where you're kind of processing data. And then right here is where you're kind of setting the size of your documents. But again, that's about it for this. At least kind of like demo and question this far. Where did you get the data? So the data is an example file from Kaggle. So is anyone familiar with Kaggle? It's kind of like online source for data scientists. I don't know if you're just going towards the data. So you start in a correlation. This is something I was looking for. So one could be like, you've got correlations, but you can get some correlation and you can actually download that document, like that file. And as a CSV, you would turn into a CSV and then you load it into a GitHub repository. And here you can actually host that repository online and it'll call it for you. So that's something that happens with the Kaggle website. It's still in the state on the server. So that's been called. And right here in this kind of highlighted line is where it's been called from that server. So if you have a Google Drive or a Box Drive, and you kind of host it on the line, you can actually copy that link and you paste it in here so that people aren't kind of accessing your personal information. This is going to be hosted online. But I'm going to show you what the shape of that data looks like. If you want to go to the website and just paste that into your web browser, or you're actually just going to visit it in GitHub. So here it is. Here's where it starts. This is the second access, which is actually via the Y. This is all that data going through. And it's kind of translated on that plot. So where we kind of had like the d.gl live area in that candidate text, this is where it's pulling it from. And so for like, this is plus d.gl live area, it's saying 17.10 when we kind of go over that. And then that is 208,500 because of that d.so price. And so this is kind of where it's calling the data from. And what we're calling it from is a raw file. So once you have a raw, what you do is you just select this control access control seat. And then what you do is you just paste it in here. So usually a fellow Google Drive, and it's linking to, you know, your file. That is this. That's a process you got to go through. But yeah, that's how to work for, of like gathering data. Yeah. I've never heard of Kaggle before. That's so cool. Yeah, Kaggle is an incredible resource for example, example datasets. And so if you have kind of like a hypothesis about some relations that may be happening, like you might want to represent those visually, if you look for similar datasets, you know, in some of my policies, you know, like how like experiment with those things. I mean, it's like gathering until like spending time gathering this data and like finding that you might not be, you know, expected to respond to it. If your Kaggle is a nice resource. And that's how I can data and I just assumed it was here, like your data. Yeah. So, so my Pelican data. So, so this is an excerpt from a project I'm actually working on essentially working with biologists on the Great Salt Lake for my thesis. And I'm with DVL actually trying to convert this data to, to like a granular format. So the Pelican data you saw a minute was, the thing I was hypothesizing about, I mean, finding something that can be just like, so I can play with it for like, yeah, this is, this is what that Pelican data looks like. It just needs to be turned into like more granular format. But yeah, okay. I'll take a few minutes to kind of play with this. If you want to just walk around and help people or help people on Zoom if they're like trying to do things. Has anyone else here played with D3 before? Yeah, this is my first exposure. I walk around.