 I hope everybody had a really nice lunch and enjoyed the fishes. Did you see the giant terrule in the big town? That was awesome, right? So anyway Imagine that you spend your days looking at the stars and seeing all of these fascinating shapes Well, I actually started my career like I've been said working with the infinity of space and handling the enormous amount of data that it can produce and Although I graduated as an astronomer. I switched to a career as a data scientist But I guess I couldn't say goodbye to the visually focused astronomer inside of me because I found myself Loving the visualization of the data even more than the analysis itself So I switched gears again and I'm now a down-to-earth data visualization designer for our gen during the day well at night I Work on personal projects or experiment with new ideas or create tutorials for my website And I found that in data visualization. I tend to be a perfectionist I love spending hours and hours on some a small detail to make it exactly as I have in mind While being born and raised in Holland I always willfully hope that maybe my craving for perfectionism stems from the same genes as those of the Dutch master painters Small country But you know they they managed to put such a dedication to detail into their artworks and Although data visualization and and painting isn't exactly the same thing I do always start my visuals on plain paper And once I have a mental image of how something should look the computer had damn well be able to create some semblance of it on the Screen for me However, usually what I have in mind isn't quite the default setting or what all of the examples are using and That forces me to try and think outside of the box from time to time But you'd be surprised by the results if you try to Experiment with the norm use things in unconventional manner or get inspiration from different fields of design to create a more effective or fun visualization Okay, we're almost ready to go and take off beyond the shapes But just to be sure let me quickly explain how SVGs scale little vector graphics fit into the world of D3 Well when you start working with D3 you figure out that it's building blocks It's shapes are SVGs and by combining these Circles and rectangles and lines and parts you can create some awesome visualizations I'd like to take you along on my journey on how I started using SVGs beyond their mere shapes For my first step beyond shapes came when I was trying to create a color legend And I just wanted the legend that will go smoothly through all of the colors that I was using and that's how I got into SVG gradients and The reason was that the data set that I was working with for that It wasn't really necessary to read off the exact value that each color represented It was more about seeing trends and getting an overall sense of the numbers Such as a heat map for example here We have the total number of traffic accidents that occurred in the Netherlands in 2014 Aggregated on a day of the week on the vertical and hour of the day on the horizontal and the darker color the more Accidents that occurred in that combination of day and hour So no surprise here that most accidents occur during the morning and especially the evening rush hours But it's really about seeing trends. It isn't that important that you Know that one thing is either 1420 or 1440 accidents. It's about seeing more the trends And it's this legend below that's what I mean with having a smooth legend going through all of your colors And it's nothing more than an rectangle SVG rectangle filled with a gradient And because I'm going to show you a few more gradient examples after this Let me first quickly explain how you can create one using these three Well, there's actually something called a linear gradient element But you have to append this or nest it within a depth element and Depth is short for definitions and it holds the special things such as well gradients but also filters which we'll see later and It's also very important that you give your gradient a unique ID so that you can reference it again Later on when you set the fill of the element that you want to apply the gradient to After that we have to give it information about the direction along which the gradient should run across your shape You do this in a way that's very similar to making an SVG line So we have a starting point with x1 y1 and then we give it an endpoint with x2 y2 and we can supply these values in both percentages and Exact pixel locations, but in 90% of the cases percentages is just way easier So a horizontal gradient has x1 at 0% x2 and 100% and both y's can be the same 0% is fine Am I playing around with these values you can create a vertical gradient or a gradient along any angle that you might want although here and this is actually not the truth that I'm showing here because It's actually the bounding box So the smallest rectangle that can enclose the entire shape that defines sort of these where these endpoints lie So in this case the starting point of zero zero percent is actually outside of what it's visible in the shape And that means that once you start seeing it. It's already turned slightly more purple and Maybe you don't want that, you know, that's fine. You don't have to start at 0% You can start wherever you want and then all the colors outside of it will just be padded with whatever was there At the end of your gradient But we're just going to use a normal horizontal gradient So now that we've set the direction all that's left to do is supply it with some color information and for that we have the stop elements and With a stop element you supply it with a color the stop color and the offset Which is the location along that sort of directional arrow that that color should be pure well here I've appended a light blue color all the way to start at 0% and Then I'm going to append another color stop. Otherwise wouldn't be a gradient at the other end at 100% of a dark blue color Now the gradient is done. It can be used So we select that That rectangle and then we set its fill style by referencing that unique idea that we created for the gradient And then we get this result Well, if you have many colors in your gradient It might become tedious to keep on appending these color stops but luckily we can use D3's nifty data step to Append color stops for us in a way that's very similar to Appending circles to a scatterplot So let's go back to when we just set the direction of the horizontal gradient and this time We're going to append a data set that holds the offset location and the color that it should have at that location And then these three will append a stop for each of these data points Afterwards it only takes two more lines to set this Offset and stop color by referencing the data and now we have a smooth Gradient going all through all these these nine colors that was sort of shorter to write well another example that is in essence a heat map is What you see here and can therefore I think be combined with a legend with a smooth color range It's actually a visual output of a machine learning technique to cluster data called self-organizing maps And it's what started my love for hexagons And I wish I could say I was using the palette that you could see right now the color palette But I was actually working with these right before I knew that data visualization was a thing in itself I didn't know that for a long time And I am from the science background, so the actual palette that I use was a rainbow Yes, so Anyway If anybody's interested in knowing how to interpret these said these kind of maps you can ask me later today or tomorrow But to stay in the rainbow mood Here's my one of my favorite temperature visualizations, and I recreated a weather radial for Boston for weather of last year And each day is a bar and it goes from the minimum temperature to the maximum temperature And then it's colored according to the average temperature, and I would say here again It's mostly about seeing trends. So when was it very hot or when was it cold? Well being a astronomer I of course wanted to join a club of people that make visualizations about exoplanets And my setup was very simple I just wanted to do some data storytelling and explain how weird or amazing these exoplanets really were But to make these circles Rotating around one generic star more than well flat circles I want them to look like spheres by using a gradient And I also wanted to have each of their colors depend on some aspect of the planets data Well a radial gradient is the second option that you have for gradients Well, it's just and it's as you expect from a center point outward and Creating a gradient based on data is also very easy We can use D3's data step in a similar way, but this time we immediately append our data set when we Want to attach it to the devs so that D3 will create a gradient for each of our data points and It's still very important that you give each of your gradients a unique ID to reference it again when you combine them with your circles And afterwards you can Use the data that's inside of it to set something like the color of your gradient So I can say well some feature with a color scale should then Be used and then I can make it lighter on the inside a bit darker on the outside I can move that location of the center I can make that directional arrow a bit bigger and now we have something that sort of mimics a 3d sphere By just using that one color that we had to start with And if we were to look in the dev tools We'd see that that we have a radial gradient for each of our data points and all of them would be slightly different And finally we select the circles that we connect them to the right right gradient Well instead of showing you a visualization about exoplanets, which you've seen I think I think I thought well, I'll show you what I think is one of the most important plots in astronomy It's a herdspoon-rossell diagram and in this case the circles that you see are not planets They're actually stars. These are some of the nearest stars that we have and we have luminosity on the vertical scale and Temperature on the horizontal but note that actually the the warmest stars are on the left side and the cooler stars on the right There is a there's a reason for that, but I won't go into it and I heard that this could actually be one of the first scatter plots ever made which I think it's kind of cool and our Sun is somewhere over there and and These stars in the upper portion. They are indeed bigger But I'm not actually being honest because if I would scale them correctly they would look like this But then you know then you can't really have any useful things from the rest of the plot anymore So that's why we scale them down Also, of course stars are the things that shine. They are not shined upon So we can tweak this gradients a bit and try to make them look more like the glowing arms that they are And what I like also about this plot is that I feel that there is Very little visual encoding done. I mean the stars. They are roundish round and they are actually Visible in these colors. So it's like you're plotting the things that they are I mean, I don't know of a more perfect scatter plot than that visualizing plants and stars, but I might be biased Anyway Besides using data to set the colors of your gradient You can use data for setting any attribute of your gradient such as the directions And after watching the second Avengers movie I was interested to know how all of these avengers were connected How often had they appeared together in a movie and I thought a chord diagram would lend itself nicely for this data set So here's the result the thicker a chord the more movies to avengers have appeared in together And in the default case The core is given one color But in here that doesn't really make a lot of sense because the data is symmetrical Since if Thor appeared in the movie together with Hawkeye reverses through as well So I wanted to do something else. I can make them all gray, but that felt a bit boring So instead I wanted to have a gradient that runs from the Avenger at one side to the other So to pull that off Let's focus on Black Widow here and Then I would want to create a gradient along these directional arrows Sort of mimic the idea of it running across the court. So I guess something that looks a bit like this But we start out very similar to the planets case So in here we start by appending a court data set to the devs So that D3 will create a gradient for each of our courts And one thing that's also different here than in previous cases is that here It's actually better to not use that bounding box of the court onto which you want to apply the gradient But use sort of the system the court system that you were using with its origin right in the center of that circle And you can do this by setting gradient units to user space on use And you forget you can forget that it's just I want you to know that it can be done The reason is that we can actually find the exact pixel locations of these two colored dots By using the court data set together with some signs and cosines and trigonometry nothing fancy But it's way easier So after setting these directional arrows using the data all that's left to do is supply it with two color stops One at the start at 0% that has the color of the Avenger at the source and another one at the other end at 100% that has the color of the Avenger at the other side and After all those additions to the code we get this result We're now each of these courts is sort of a representation of both the Avengers that links But you can also use gradients for something else than a smooth color change They can be very handy for a rough color changes as well And many interesting analyses about the baby names have been done in the last few years such as the most Trendy name and poison name and unisex name But I was interested in much something much more simple I just wanted to know how had the most popular baby names risen and fallen from fame again But I was actually very surprised to find out that the data set went back to 1880 But a typical screen isn't really wide enough to do justice to 135 years of volatile change So instead I use the focus and context technique in which you have a small box below In which you see all of the data and you select a small window and then this top chart here will show you sort of the The more detail of the small box that you selected But to make the connection between this small Window and the top chart more apparent. I wanted to color The bottom window only exactly the same as sort of the top chart, but only within the window that you select it However, you can only stroke a line with one color and I didn't want to have to cut these Lines up into three sections like before and then within and then after the selected window And instead I just use a simple gradient to recreate this effect Because if you append two color stops at exactly the same location the color change is very abrupt So first we append a gray stop and then a colored one both at 40% and we get this result It seems as if we have two different things Then we do the reverse at some other percentage say 60 So first the colored stop and then a gray and now it appears as if we have these three different sections So if I take one of these Gradients for these lines and I apply it to a rectangle It seems as if we have three rectangles or it's only one with a gradient applied to it and By changing these percentages when somebody is dragging this window and therefore some update function is called You can actually make it appear as if the gradient is moving along with your choice But it can also be very handy to visualize thresholds such as above a certain value Something is bad or good or it changes categories and here is an example of the mean body mass index for 50 randomly chosen countries in the last 40 years and above a 25 according to health institutions you're overweight above 30 you've become obese and I've colored these lines with a linear gradient all the same gradient So to show this threshold of something changing from from sort of neutral to bad more more apparent and this line I really just subtly becomes from gray to orange and Even if you change your data set you don't have to do anything about the colors So if you go from men to women the linear gradient doesn't care I mean the threshold is still in the same location So you don't have to think about that and I was also actually very pleasantly surprised to find out that Gradients can easily be animated And I was working on a fun project at the Lord where we had access to a data set where we knew what Education people had studied and then what occupation they were doing a year and a half after their graduation And you wanted to show this flow from education to occupation and I could do that with a thank you diagram So from one thing to another But I love circular things. So I wanted to try something more circular So I went back to a court diagram, which I love of course because it's circular and Then I started tweaking this around adding things. I even went into these resource code and made some changes here and there To make it look more like a circular thank you Although I've seen the term bad plot on the internet as well, which I think is kind of a catchy name though the bad plot Anyway, this is the end result. So we have educations on the left and occupations on the right But to make this flow from education to occupation more apparent I wanted to mimic that by actually making a Animated gradient from education to occupation, but not too much in your face though, but it was there It's like it's going that way and This also gave me an excuse animating a gradient to put Menard's famous map in my presentation Yay, so here I just wanted to show the troop movements so that the brown portion is moving towards Moscow and the black They're moving away from Moscow, but again never too much in your face, but there so we're finally leaving the realm of SVG gradients and moving into SVG filters and You might know these filters in a similar way that you know them from Photoshop or Instagram And to be honest, we're also sort of leaving the realm of effectiveness in the visualization behind and moving more towards Experimenting to have or create a bit of fun While creating a filter starts out very similar to a gradient So now we append a filter element to the devs. We still have to give it a unique idea though and Afterwards comes the magic part where a specific combination of filters creates some effect that you might never have expected But the good thing is is that once it works you can just copy that code and use it in whatever visual you want to use it in You don't have to change anything. Usually you can only change a few things anyway So I'm not going to show you the code here, but focus on the results. So what can you do with these filters and? Afterwards you select the element and you set the filter style by referencing this this ID All right, so the first one is very subtle, but it can have a nice added effect in the right circumstances Well, some people love radar charts and other people hate radar charts. I'm not part of that ladder group So a few months ago. I made a redesign of a radar chart in D3 I was fine with it the way it looks, but I remembered coming across some code for a filter to create a drop shadow or glow around text and I thought well Maybe that will make this more engaging as well. So I'll show you the glow. It's really subtle. I hope you can see it on the screen That was it and this is really also a matter of tastes, you know, some people might like it more some people Think it's it's worse. I mean I'm I liked it. So I left it in But what it does it's very simple Say you apply to a circle, then it creates a blurred version of that circle Paste the normal version back on top of it and then you have the appearance of a globe and you can do that with rectangles and Parts and circles, but not lines though. So no glow with glow although It's a bit better on my screen And one occasion where I found that really sort of made it look more special was when I was playing around with Spirographs and I really loved these as a kid and So now we have no glow and with a bit of glow. It just made it more neon made it jump off the page of it So with glow no glow. It's it's really subtle Well another filter where I found that it had a sort of a nice touch is had to do with motion blur and If things are moving faster or closer to us they appear blurred and with the right filter We can recreate that effect on the screen as well It's just these circles the faster they move the more blurred I make them appear to mimic this idea of fast movement And I first came across this when I saw a demo for an image gallery where images were just Sliding across the screen and I thought well, you know in data visualization We usually have movement while often show movement So just trying to figure out if I could use that there as well And it's very simple. It's just Making the element blurred in one direction. That's it X or Y As an example here, we have some circles moving outward no blur and with a bit of an exaggerated blur It looks like this So no blur With the blur, and I feel that the blur just makes it makes it a bit more human. I guess a bit more fun to look So for an appropriate data visualization, I thought well, let's visualize the top running speeds of some animals in the fastest human So when these circles are moving outward the faster they move outward the more blurred I make them appear Although I've seen that there is a ghost circle sometimes Which is not on my screen, but here it is so that remember forget the ghost circle So I when they moved out they were blurred, but probably you didn't actually really notice it It's like a subconscious thing So let me pull them back in and just show you the blur that was happening So the cheetahs moving fastest so it gets the most blur and then the turtle is practically not moving so it gets no And you can do this with more than just these SVG elements Say you wanted to append visuals or images to your data set Fine, they know that the filter doesn't mind if I move these outward they will get blurred as well Okay, so now this is my favorite filter the gooey effect and I first came across this one when I saw a really nice loading demo Somewhere on the on the web and I thought well, that's a good one to keep in mind And at some point I was working for the Deloitte ladies open Which is a golf tournament and people could do a golf clinic and do a few swings and then they could see their results on the screen and To visualize how far the ball had gone. I could just Let the points appear on the screen like this But that felt a bit boring So I thought why not mimic the golf swing and let the circles fly out from a starting point You know, I thought this was better, but I wasn't quite feeling it yet So then I remembered that gooey effect and by adding that Suddenly it felt as if the visualization was trying to acknowledge the effort that the participant was doing trying to get the ball as far away as possible Now it didn't make this more true or false But it just made it more fun to watch for these people and I'm not even going to explain how this filter works I only understand about half of the steps But besides having this fun gooey effect. It does some nice color blending as well. I think so That's really cool Well, I'm trying to think of some ideas for data visualizations other than the one I had Say we have one officialized 150 largest cities in the world We could just let them blur up out of this center dot Or instead if we wanted to bring them back together on a country level, I mean the country is one thing So once they come together they form one country again And this actually also reminded me of my boss talks collision detection. I mean, this is fun already It's working, but you know with this Right there go So I actually find this a lot of fun to like trying to keep that one out still the same but Seems like your mother would not have wanted you to play with this in real life sort of kind of ugly Anyway So it's time for the final example and this one has to do with those nice Color blending techniques that you have in Photoshop where one color overlaying another can create an entirely different color And I first try to do this with SVG filters And it is possible, but then I saw a blog that showed how it could be done with just two lines of CSS So I I skipped the filter part but although the It's no longer a filter the effects are still visible on SVG. So that's why I put it in so my two favorite blend modes are multiply and screen and You can create this effect by setting the mixed blend mode of these circles to either one of these two and It's also very important that you have to group these circles and isolate them Otherwise the background color will be taken into account when you when the Mac the blend mode is doing its thing and You might end up with seeing absolutely nothing on your screen having no error messages and not fit You can't figure out what the heck you're doing wrong. I've been there. I Didn't know that at start So no data visualization example right here, but just something that I can watch in definitely And and the the the blending really makes it for a better result because if I turn it off I mean, I'd say that definitely has less magic So I hope that Some of these examples will be assist you someday to create an even more effective or fun visualization I hope even more that I've inspired you to always Go and experiment with the norm so that you have to make as few concessions to the computer as possible To recreate the image that you have in your mind and above all I hope that you'll go beyond the ships Well, you'll be able to find all of these examples that you've seen with way more explanation and all of the underlying code on my blog soon And finally, thank you very much for your attention