D3 Tutorial - SVG and Animated Bar Chart

to get a brother top so I'm David Garcia I'm a programmer over at icon building systems we build and design metal buildings like airplane hangars warehouses skilled homes all sorts of fun stuff with steel and I wanted to talk to you all today about data driven documents or d3 for short d3 is a JavaScript library that's used to create interactive data visualizations and I'm going to show you a couple of examples of that on the New York Times website so this is a bubble chart showing a bunch of the and P 500 companies and their effective tax rates so you can kind of come in here with your mouse and scroll around and get a nice little tooltip shows you some information you also come up here start typing and it does filtering or you can you can also even come in here and click on the buttons to have a separate by industry so they're taking some data they're displaying it in a way that's really easy to view and they're even making it interactive and the thing is is that d3 makes all this really easy to do so this is another example so this is a deck chart showing thousands of data points of draws information for the US going back over 100 years and again you can kind of mouse over it to see little specific and fits of information they have little stories about when there was really bad throughout throughout our history so you know easy simple fun and again this is like really easy to do in d3 so here's another one this is a dissecting a trailer so it's kind of showing all of the scenes in a trailer I mean kind of mouse over it here this is for a silver linings playbook and the color code is based on the beginning a film middle or end so you can see they actually started with a shop so the very end of it's almost kind of weird and this is kind of a linear kind of progression you can see most of the other trailers are kind of all over the place as they jump back and forth in the scene like a really neat way to look at something that's very abstract like clips in a trailer and like kind of look and see how different trailers dealt with their composition so like this one has a huge cliff bear at the very end it's like a very strange emotional football I don't check that out later but yeah and this one's like super fast cuts all through the beginning here so it's pretty neat and again like d3 is making that's really easy to take this kind of weird data and make it visual and make it interactive so you like play with it instrument with it so this last one I'm going to show you is really cool this is kind of a MIT physics or math simulation and what it's doing is it's drawing a Hamilton graph based on the notation up here so we can change this be like 89 all right let's do something and it's going to go and create different shapes based don't leave it there so we can slow that down a bit to see what it's actually doing so what it's doing is for every single node which is the green node accounts for word eight spits - and it connects those G nodes together you can see it's counting there with these little orange ones going around the circle and then it just does that 50 times but we can change that and say we want to go like 8 4 and then chew back and then do that 50 times so let's beat that up a bit you see it kind of built it all mi knew all this like physics and like stuff that's happening on there creating this little edge graph is all being handled by d3 be very has all of the physics and the simulation built into it to do that kind of fun stuff now you can even pick it up and drag it around pretty well they have a bunch of presets in here too I suggest a coming in here and playing with it sometime so you can make like a dodecahedron so the fun thing to say in coming here and kind of like tweak it around to see what kind of different shapes to make as you change the numbers so now we're starting to kind of like a little more torus shape oh it's pretty wild but yes something about all these demos have a common is that they're all unity dream and also they're all using something called scalable vector graphics or SVG to actually do the drawings SVG is something that's built into the browser it's not part of a3 and what SVG does is allows you to make 2d graphics using shapes like circles and rectangles lines of text very easily and something that's really special about SVG also is that every aspect of the SVG graphics is manipulatable and can be animated and so d3 takes advantage of all that to make these simulations now on a d3 can actually manipulate any type of web-based document so you can have d3 manipulating HTML or XSL or something really like that but if the power really shines when you're doing SVG work a lot of the functions built into d3 or for animating and manipulating xyg so to start off let's step back and look at SVG just so we're all familiar with it so I have a HTML document set up here very simple doctype go ahead I got some CSS you can use later now my body down here you see I got my h1 with SVG example over here I'm going to pop open my dev tools just so we can look at the code here see how it's changing so SVG is the XML based syntax so it's going to look a lot like HTML it's going to have tag and attributes stuff like that so I can make my cats PG tag here just like that and you see on this side we do indie have a SVG tag inside of our HTML and just like you expect you'd be able to add like a width and height to it and then so within the height we put here will be adjusting the size over here so inside of the SVG tag is start drawing things so we can make like a rectangle for example and of course it will have X to Y attributes here and we have a with say 100 I'd say like 50 P and then we just going to close our tack here by the way the specs that are I'm using is sub 1 which one I like it's very very simple and very fast there's like a million editors nowadays but this is one way to put out the comedy circles with same way circles are going to have a center X and a center Y instead let's just do it under there they're going for radius 2 can you see how that looks let's make it a little bigger and so that our circle and we've got a rectangle let's move that over a little bit to use it or not overlapping oh yeah yeah so you can get these colors and stuff like that so there's like feel let's make a blue ball here you can also give them like strictly just make it nice big strokes with a strip color so we're going to use black man I do the right stroke with yeah there yeah so now we have a blue ball with a black outline on it something that's really nice okay good yeah it's there you totally can yeah yeah so when it comes to the layers of things so let's move this rectangle to make it a little bigger and let's move it up to the zero zero point here so you can see the rectangles behind the circle yeah SVG doesn't have a z-index like HTML does instead it draws it in the SVG area in the same order that you make it so if I wanted the rectangle to be in front I would actually need to move the circle up above it to do that like that the thing is also you can put classes on here so you can actually adjust the look and feel of your SVG objects using CSS so we can do like active on here and the rectangle is now green because I have a active with a fill green agenda CSS and on the circle let's say the allow your class equals ball save that and up here in the CSS I have transition and transform set on it so when I hover over the ball it's going to run this transform it'll make it move it to the left a little bit and make a little bigger you can see that happens here and d3 is going to actually take advantage of how you do this to manipulate SVG using CSS because CSS all cultic built-in tools for doing transitions the transforms and animations even like things like you bring animations so these three is going to use that to add interactivity to appear to the designer so any questions about SVG support it gets offer ok so now that we got out of the way let's start looking at d3 and knowing some SVG is very useful cos in d3 it doesn't make a lot of assumptions about how you're going to do things to kind of leave it up to you to create your objects and define your objects and decide what you want things look like so I got another empty almost empty HTML here and I have a little dip here that I give the ID visit you and we're going to use that to actually do all our drawing then the other thing I've gone on here is a script tag that's pointing over to our d3 library version 4 is the current library you'll see a lot of examples on the net version 3 they're very similar but there are some syntax differences so when you're going and copying people code to try and make it work for you always check to see Weber's are using is you might need to do a little translation between the versions so because this is a JavaScript based language I'm going to go ahead and open up my script tag here and this is where we can start writing our III code so III is very similar to jQuery where you can do like selections and chaining so in d3 if I want to select this is ID I'm ICD 3 doc selects and these count is to get the element by ID and jQuery it might look something like this so it's like very similar in terms of functionality and a sanjac drop-down and also in B 3 D 3 supports chaining so once I got my viz here I can actually just start doing things to it so I can do app and I'm going to tend to paragraph and a let's pull up the so do we have an empty card up in there and then to that paragraph we can start setting text in and we got that log out so yeah so it supports selection and source chaining very similar if you've seen stuff in like that jQuery we can also store the things in variables to use them later so like here I can store my biz selection inside of their variable cup is and I'm going to start appending to that and it'll work and look exactly the same as what we had before this is nice because then you can use that reference to do a whole bunch of stuff and it'll just keep going like that in the same way I can take this first paragraph store it inside the PE JavaScript variable here and then I can manipulate it later on in my code somewhere else so I'm just fine like a style to it with let's do a flop size say 30 pixels and we'll make the first one huge but a lot less with the other ones because we're only storing that first instance of the paragraph inside of this variable and then manipulating later so I pretty good there right yep so let's go ahead and so we're like messing with HTML right now let's go ahead and start getting some SVG going so what I'm going to do again using d3 I'm go ahead and select my biz and then I'm going to append a SVG to it and just like you'd expect there's an SVG tag over here inside of HTML now and see that we can start you know appending stuff like a rectangle for example I enter the rectangle we want to add some attributes like an x value for example maybe a Y value actually this can be just numbers allowed to be taxed with and also a light here yeah so just like before now we're actually drawing our SVG inside of d3 so that d3 box is a little small the default one is 300 by 150 so let's take the SVG and make it a little bigger too so I'm going to do the same thing going to do with C 500 then we do like a height we'll do a hundred for the height here so to give us a little more room to measure things and you see over here we have width and height hundred piloted so with these attributes right now we're passing in integers but you can actually pass in variables too if you want to so I can let's say my width is maybe 500 my height is going to be 100 and the cast is in jail like this and it will do exactly the same thing in addition to constants what numbers variables we also pass in fashions into these different methods inside b3 and most of the methods inside III actually support functions and that's very important for later on so let me show you how that works so we can make a function here and whatever return is going to be what it says that with you so if we accept this return to 500 then our SVG size is going to see here is going to be 500 so what it does is d3 comes in here and says okay you want to make an attribute you want to set the width to a function so what it actually does is goes in there runs the function looks to see what it returns and then he uses that value i set the width on your object that you're manipulating here any questions about that okay honest which I've acted w-4 now yeah you don't have to you can actually give it a javascript object it has all the attributes in it so that might look like SVG thing every kind of like this an easier with 100 by 200 that concept so if you already have a Java statement object that has all the attributes and they want for you to stop at the villa fast or not JSON data javascript budget yeah yeah I usually uh it depends I mean later on watch to be using functions for everything will attribute so in that case you could probably do that using as Oscar objects but it would be celeste cleaners so this is a so you can actually go and draw entire things like this as appending different shapes to your su G but what we really want to do in d3 is have it create the shape based on data we give it so for now let's make a little data here I want to call it data set and it's just going to be an array of integers so let's hear some numbers between 0 and 100 lat you know 3 4 3 yeah 95 ok let's get out of one more and then 7 also ok so we've got a nice data set to work with and this is just a bunch of integers inside of a JavaScript array so what we want to do there's actually 3 steps to getting your Tcat d3 to start making objects using your data so the first thing you want to do okay so we're going to tell it a we're going to use SVG we're going to tell us what we're going to make so I'm going to do select all let me tell us that we're going to make record samples after that we have to tell it what data we're going to use so we're using changing here we're just going to pass in our data set and that's the data that we defined up here after that we need to call enter and what enter is going to do it's going to say everything that follows after this do all of that for each bit of data in my rack so we're casting in 8 integers here and everything that follows this enter is going to do a times it can do it once for each of these so we want to make the rectangles so I'm just going to bring this up so after it's called enter it's going to look at our data set and it's going to kind of traverse each one and call all of this for each of us so let's go ahead and save that and see if it works so we have a rectangle here again and you see we actually have eight rectangles in here and they're all kind of stacked on top of each other because we're not inputting any data into it right now we're just telling it hey build eight rectangles with these attributes on so what we want to do is change our height and use our height use these values up here or alright so how we do that is we're going to call a function like we saw before and whatever we return here is going to be the height so to get the data in you put one parameter on your function I'm just going to call it D you can call it whatever you want and D is going to be the value of each of those as it goes in cycles through so of course we're going to return key and see what that does so now we have our rectangles and they're all different types and you see the height here corresponds with the numbers that we entered up here so that looks really good but they're all still to that so what we're going to do is adjust the x-value really want to think about excellence right okay so we do the function and we're going to return something here now in addition to getting the data you can also get two parameters here and the second parameter which I'm calling I is going to be the index so we can do I times 20 so this base amount because we're using it with the 20 right now so I the first is going to be zero and for the next data is v1 and then 2 3 4 5 as it goes down and we still need to ask for data even though we're not using it here just because you need two parameters on your function so the first parameters would be data second parameters would be degree index let's go to save that and see what happens so we got our chart now with that the only thing is that bar chart right now is actually upside down so you remember when we're looking at Fiji earlier this your zero points actually on the top left so if we want our bar chart to go from the bottom up instead of the top down we need to kind of squish all of the bars to the bottom as you can imagine if you had a hundred pixels of visibility and you had a bar that was 90 pixels tall you need to move that down 10 pixels same way to get 100 and you had 75 bar unique losses at 25 so it's essentially the height - or the disability - the height so let's change the Y to be that instead of being 20 let's get our D in here again and we're going to return the height because remember we have the H over here from before and we're just going to - be from that let's see what that does hopefully working yeah okay so now we have a bar chart going from the bottom up if you were very quickly putting what's a bunch of direction so yeah but you know there is kind of make sense and how they're being used so any questions about that work so if the height is good so let's look at the code over here so on this one the height of the bar is 11 so we have a hundred pixels of visibility so we need to move down 89 pixels and then grow it from there that way the bottoms are all even so we're going to take H which is 100 minus the height of the bar which is like 11 and then move it down that far which is going to be 89 pixels oh yeah so we're still girl we're still drawing the bar is from top down we're just making sure that that ball is going to be even fold and by having them start at a different spot for the density I thought that was real kind of my integrity with a first off Elvis but but yeah there's nothing like that yeah okay let's see so these bars are kind of squished together right now so if we wanted to based on one pixel apart we can actually come in here to the x value and just be plus I because where that first one is to be 0 second one's being black it's lower for the next one you choose pixels over x1 to be 3 pixels over as you go along that's going to just keep them evenly spacing one pixel apart so now we have a little bit of space between them so it's a little better so right now we're using just a JavaScript array to create our bar chart since tomorrow's a Super Bowl what I actually like to do is use the stamps from the regular season so we I have a CSV file here which I made in Excel earlier and save it as a PSD which is comma separated values and this is a bunch of teams from NFL they has their division as their wins losses ties and also the team color so these are those that you're working with external data has a lot so it makes it really easy to load external data because those JSON alert the PID which is caps ever design really easily and ahhing to show you how to do that so instead of using our lovely array there what I'm going to do is I'm going to hold d3 dot CSV and CSV is going to go and load that data set just through this flash and all the CSV and it's going to pass it into the function we put here so whatever your load so what it's going to do it's going to go through it's gonna load all this and it's going to convert it into a JavaScript object so it's going to be a bunch of a raise in each arrays and have a bunch of parameters in it yeah for all properties and the properties are going to be whatever the header column is here and then the values are going to be the different values from the CSV file and it's going to pass it all on to this parameter in here so once I get that I'm going to set my data set equal to D now the thing is is that this is a knit synchronous halt so once it calls this it's going to go off and load your data and at some point later once it's done loading the data parsing it into JavaScript it will actually go call the function here so we don't want to continue on making our chart until the data flows it does like it looks pretty good so what we need to do is take all the stuff that we put together so far and stick it inside of a function so I'm just going to wrap the whole thing inside of the function here and we're going to call that function after we get our data so it doesn't save that and running here because that didn't quite work Agassi there's 60 warrior and you can see what the areas are here if you go to your console and a dev tools so today and why it expected links but I got not a number on the height it expected a link but it got an object so let's go down here and look what we're doing so for example up height when this D is passed in it's passing in this entire row or the data right so if we want just the wind instead of returning do you need to do G dot W and that's going to return the wind for each of those points of data and we'll go ahead and change it up here too so that the bar charts still even so it stays that which is it works a little better ok so yeah so we're back to having all of our rectangles in here and you see the height corresponds to the winds going down this list there's a couple things that are wrong here first we have a hundred pixels of area here and the most winning team is only for humans with ultimate so good I think we kind of stretch those bars out of it right the other problem is that our SVG is only 500 pixels wide but when we get down here you can see there's actually teams that are kind of off the map and that's because the SVG is not going to draw outside its borders but it's so beautiful your rectangular it's not going to be visible so we can fix those things easily but first let's add a little color to this drawing because we have team colors on there so we pull up our function get our e and return d dot color which is the last column on here less rip save that see now we have colors all of our teams so that's pretty cool now to fix the width for now let's just make a variable hole bandwidth because these are bunch of and basically we take a list and divided by data set length and that's just going to get the place yeah this is going to get the tell us okay well we have 500 pixels we have where these teams so just divide it out and use that and we'll use the bandwidth instead of the 20 we're using for now remember we're also doing that +1 here so we're going to want to do find this one on there just because we want to dig for bandwidth and move it down one pixel so we can suck I won't pay for panning going down to bar chart so those okay so now we've got all of our DG teams squished into those 50 pixels so it's pretty good so to fix the heights here were actually going to introduce a new d3 concepts and that's called d3 scales scales are a way to take the inputs and convert it into some alpha in d3 the holding inputs domain and they call the output range so when I say input Dolf a domain and when I say output else a range okay just make sure we're all in to pitch so input output input of it okay got that so let's go ahead and define our scale here so I'm going to call it I scale and just like most things in d3 you're going to gz3 sauce scale in here and they actually have a bunch of different skills they have power scales logarithm skill ordinal skills forgetting like 20 of those but yeah a lot of different skills and then after we define it to say we want to scale then we'll just reuse chaining and start saying domain and domain is going to be some is this going to be a ring just a barrette so remember a minimum and our maximum so people can have up to 15 wins and three postseason and we're going to define a range two and again that's going to be a JavaScript array in this case is going to 0 to H which is the variable we defined earlier for the height of our bar chart so when we talk Dero in there it's going to return 0 and we talk 16 in there so we turn 100 and then any values in between there it'll just be Li nearly please like that and how do you use it is a little weird so type skill is actually a function in this point so we can pass in our input and it'll give us it'll return the output so on our heights we're going to do high skill we're going to pass in the number bin and that's going to return a value between 0 and hundred now let's also do that here when we set our y so that the bar charts move down correctly so we say this it's going to stretch our bar chart based on the range and domain that we gave it up here so any questions about that right so now the next thing we want to do so on bandwidth earlier we took the width and just divided by the data length of -1 there's actually a scale that we can use inside a d3 that'll automate that for us and we will have to figure out the net so what that's all is creating new value here again feel it's going to d3 top scale band and in this case our domain so think about what that is so going across here our x-value is actually the team names so the first one here is patriotism and double off going on them Cowboys over there in the middle so our X values and not be 0 1 2 3 4 5 it's actually King names Patriots blah blah blah blah so on will domain what we want to pass in is teams the names of the teams which will create this together now in our range it's going to be the same kind of thing where it goes 0 to with whatever the width happens to be but how do we get this list of team names and then used to be a JavaScript array so I'm just going to find out here what we can actually do is use a built in function that's inside of JavaScript it's not hard to see three actually is anywhere native JavaScript and it's called map and what that's going to do is it's going to go through your data set and it's going to look at each data and then it's going to run some function on it and whatever that function returns is what it's going to create a new array from so if i do d dot team and team is the first row that's the SE bomb so if I run this data set nap until hey I only want the team values it's going to give me a new array it just has a bunch of strings in it those strings that would be the team names so we can use that list as our domain down here for our Dan scale so how do we use this we use it the same way as we use the pipe skill so here instead of doing the five times Dan with on foot by we're actually just with a bang skill tell me what the x value should be for this team and can actually go and do all that figure out okay well Patriots should be a zero control with left and a Cowboys should be around 250 because their middle and also we have with here so we were passing data within instead let's use a function here and let's return fans scale bandwidth and again bandwidth is a value that it's calculating saying okay well I got 500 pixels space I'm going to divide it evenly by the number of items in my domain so it's base job doing and again it's like creating all that now for you so you see we got nice a bar chart there but again they're all squished together d3 has a lot of options in it fruit since one of them is padding and it expects the value between zero hundred zero would be no padding at all which is what did you all do 140 knots or zero one one would be all panic so there would be no bar charts so if we do 0.1 we would get a little bit of padding in there about 10% cutting so we do 0.5 see it's a little skinny or direct like that so dear boat one looks pretty good so we'll leave it at that any questions about a scale so far so don't forget awesome so now that we got our bar chart going actually let me do one more thing so we have the team names in here it would be nice if when we mouse over these we can actually see which team is going to because I don't know who this is Isis Atlanta meeting I know we can actually do another thing here now in HTML you have the title attribute so that would email soup or something at tops of that little things so you can see while you're bouncing over in SVG rather than using title attribute they actually have a title tag so what I'm gonna do is so we're creating a rectangle appear adding all these attributes do it and then finally after that I'm adding a title tag to it just using the pen and the text inside there is going to be a function because you can call a function blade everywhere inside be free and we're just going to do detain see what that does so now you can see we have a rectangle and inside of that we have a title tag rather than using a title Ashby because those are working SVG for no reason and then we have Patriots in there so if we move over this we can see that Patriots as Chiefs Cowboys there's nothing family and take off so yeah you can kind of you know not-so-rich these view does that make sense with the attend detection and the good stuff so next we have a nice bar chart here but it's not interactive yet what I'd like to do is be able to have a like let's say a check box where we can click it and it'll actually store the values by win or switch it back to the original view which is kind of like the standing vm so let's just make a check off and call solar spy wins now let's close that label so now we've got a check box here you can kinda click it doesn't really do anything yet just like in jQuery or native JavaScript d3 has event handlers so we can say d3 selects and say we want to grab our input and we want to create a non method here we're on fit Hitler so when on change happens let's call toggle source and that works exactly the same way as it would in a jQuery where you can do like on click or on now to do that type of stuff so this function toggle sort is going to be called every single time that someone checks or uncheck that lock now the actual transitions in d3 have a lot of power and they have a lot of options which makes it a little complex of them but it's nice because it's also not too hard because when we want to define a transition all we have to do is say a d3 so SVG is our ok well I actually need to move this out here so we need to use SVG later on so I'm going to move the variable instead of having to be compliant inside of this function I move out here and the same thing with ban scale because we're going to need that later I'm going to move that up here to just as accessible to both this function and the toggle store function so I'm going to say a SVG we want to do a transition and that's going to let us know that we're going to start moving stuff around what are we going to transduce transition we're going to transition all of our rectangles because over here inside of our SVG right now we still have all these 32 rectangles and we're going to want to be moving them around so what is it that we want to move around well we actually want to move around the x-axis because when we do this board and we sorted from how it is now to highest when all those wins all we're going to do is move the bars left and right which is translating the X attribute on them and again it's going to be a function and we're actually just going to use the same thing we use last time up here where we did return band building because what we want to do is actually manipulate and skill to let d3 know that we want the order to be moved around so let's save that and right now when you click it it's not doing anything because you haven't changed what band scale does yet so let's go ahead and do that so we're gonna take our band skill and the thing we want to change on it is the domain because right now remember the domain goes a Patriots then dolphins and bills send Jets then Steelers that's kind of our domain it's in that order when we sort by wins we're going to actually want it to go Patriots Cowboys then Chiefs and Raiders and on and off down the different teams so if we take our band ago we actually redefined the domain by just calling the debate function and all we need to do is pass in a new team order so what does that team order look like so if you remember earlier we had our data set from before this is all of the CSV files that we live it in way of chess yeah what we can do is take our data set and do a source on it so we actually sort is another one of those JavaScript functions that it's built-in and we're going to want to sort it by some function there but after we get it sorted in sorted to the new order we can consume a map again and that mass is going to be like this and again we're going to return GI team so what are we doing here so we're taking our data set we're sorting it in some arbitrary fashion we have it defined that yet and then we're grabbing the list of teams off of it and then we're going to use that as our team order here so we're just going to do our map with our function which is going to return a list of teams we're going to store that array inside team order and we use as a redefine our domain so just a quick refresher on sorting in case you haven't seen it before when you pass a function to the sort function in array you pass in a function that has cube rampers line a and B and what you're doing is you're telling it a given a and given B what order should they be in this function is going to return an integer if an integer is less than zero then we're saying the Asia come first if it returns zero then we're saying that a and B are equal if that function returns something greater than zero and B should go first so when you're sorting numbers you can use this to do it as sending sort a minus B because you can try that out and a is 1 and B is 2 supposed to be negative 1 which is less than 0 so a is on first the same way if you do B minus a you're going to get descending sort 3 2 1 etcetera so when you think about sorting from wins we want the biggest wins to be on the left and we want to go down from there so we'll want to be using a descending sort in that case let's go create a sorts pair here and again that's the function let's do like this that takes an A and B and returns some value here in this case you're interested you might say because we want to be ascending so there's two different compares we do we can do sorts by when we also want a sort by original order because we want to be able to switch back and forth between the two to you so let's go ahead and grab that I'm just going to duplicate as they get down there now when we sort by original order we're actually going to want to do a ascending sort of a descending sort because the original orders that are zero one two three four five so we want to go up so let's take this and think about what this DNA is when we're doing this or compare on DNA we're passing in this entire row so you can't just like - Patriots dolphins that would make sense but we can do VW and a dot W and that's going to compare the winds would be in the winds of A to C which order should be in for the original order we don't have like a zero one two three four five in here but we need to create something that's going to do that and we can do that pretty easily way back up here when we're loading our data so when we do data is that I'm going to create kind of an index on that so there is a forage function inside of JavaScript and again that's just plain old JavaScript Ananta d3 that takes in your value and then creates an operation on each of those so I can do order and actually going to one these I here again eyes the deck so when and loads in this data set this first one Patriots material is also we won bills you to going down the list and we're gonna store that value inside of the property over here and then later on we'll use that down here to do our sort parent so the last thing we need to do is they say if this checks then we want to do this guy and then top it else in there keep this Looby pencil yes okay so this works just like in jQuery or plain Java where we have an event handle here for change it calls toggles work when it called Pagal swords and set this to that and the box the check box so we can just call this a check to see whether it's checked or not so let's go ahead and save this see what it's doing here so when we click sort by wins you can see now it's actually doing a transition back and forth on based on changing our domain so we have our original basketball we're adjusting our domain here to the new team order and that team order is kind of based on the comparison that we made as an arbitrary expression it would be this and then the three is actually handling the rest of it we're just telling a hey we want position we want to change all of our rectangles we want all of our rectangles to use this us based on our updated doing there's other options in here like a duration so we could say we want to slow it down take one second so that's super speedy one we can also do things like added delay so see I do that like facility and finally d3 and you just return whatever delay you want per 200 you slow and it'll create a delay in that animation so they lose one at a time and the next one move a tenth of a second later or start up as a second later you just go back and forth we got like a little faster so 500 milliseconds and if you don't fix delay for each $1 that was pretty good has to jump like that we're adding some kind of interactivity tor or short kind of switched between Division standings Grands a sort of my win and you can kind of mess with its click a bunch and it will eventually like figure out where thank you so it's very good about keeping track of a messing with stuff but yeah so any questions about that somewhere that's good okay that's what I wanted to show you all I encourage everyone to go and check out Mike's boss Rick's boss talks work Mike Bostock is the guy that wrote the majority of d3 is the open source project on github so you can go download the nest of the code yourself and even contribute to the collective and he's very active in the community people asking questions all the time on Stack Overflow hey how do you do how do you do that and he'll pop in there and he'll answer and a lot of times will actually come over here and post is a result on here so you can scroll through here in just like thousands of examples of how to do the most absurd takes really closed up to and the neat thing is that on all of these if you go click on something so you can see this really cool visualization here it actually has all the code in there and you see something really whacking like this actually takes very little code to actually view and you'll notice there's a lot of things that are similar in here select append attributes select the whole data and enter that's all the type of stuff that we work on today so you create something it's quite lovely like that thank you everyone appreciate so if you go to my website a date for few calm you can go over to github and I posted the code for this on there so you just come in here you can grab the code play rouses and I also have additional link funnier once so that I have all the example Isha's beginning and also links to my claw quick vlog which is the excellent resource of you learning stuff there's a really important article in German joining data joining which is that data entry thing that we did and there's actually a whole lot one online there I encourage everyone to look into that because it explains as much better than I can they would take a lot longer to our to explain that so there's also a really nifty d3 tutorial here and I actually learned to d3 reading align left' ebook his ebook was actually written a couple years ago so it's using version three but all of the concepts that are in are still very much local deck you have to kind of mess with this in fact it gets to work right so you guys go check it out and have fun I'm curious to see what running legs are what

Channel: David Garcia

Views: 9,727

Rating: 4.9254661 out of 5

Keywords: d3, meetup, svg, tutorial, barchart, graphs, animation

Id: kz4OCMzkEnY

Length: 51min 47sec (3107 seconds)

Published: Sun Feb 05 2017