One, two, three. Is it working? Sort of. Okay. Hi, everyone. I'm Lea. If you've ever heard about me before, it's probably due to a bunch of my Open Source projects. You might have seen some of them. The rest are on Github. I'm an invited expert on the CSS working group. I get together with other people four times a year and we spend a lot of time discussing use cases of decreasing likelihood. As my sort of day-to-day job, I've been exploring academia for the past year. I've been doing research at MIT. And I recently published a book with O'Reilly ten days ago. After spending almost two years on it. I hope you're not too sleepy after lunch, because we're going to be doing some live coding today. But enough about me. Let's talk about pie charts. Pie charts are everywhere. On XKCD, on Windows 95, on walls, on genitals, on food, on blackboards, and I really don't need to convince you that pie charts are everywhere on the web. You've probably had to do some, probably had to use some weird huge JavaScript framework for it. Why can't we make pie charts with CSS? Or can we? It's surprisingly difficult to create even the simplest pie charts with web technologies. And we're sort of going to explore this today. Take a moment, looking at this extremely simple pie chart. This is like as simple as it gets. It's two solid colors. It's only showing one percentage. Think about how you would do this with CSS. And I'm sure you're having some ideas,and we might explore some of them during the talk. If you had some idea that we didn't explore during the talk, please tell me afterwards, because I'll be very interested. So in certain cases, if our percentage is a multiple of 25%, it's pretty easy. We could do it with borders. As I'm sure you've tried -- something similar. We could do something like this. Let's make it bigger. And give it a border radius of 50%. Make it circular. And then we could do border-right-color: transparent, and end up with a Pacman effect. We could even use animations to animate it like this. Get Pacman. But this is about pie charts, not Pacman. So we could give it a background. Let's make it my favorite, magenta, and then rotation... And this would be a 25% pie chart. And you could make 50% pie charts as well, and 75% pie charts as well, like this. But not much more. So... Yeah, this is not actually a solution. I'm kind of trolling you a bit here. Let's move on to the actual solution. Well, the first one. So when I first thought about how to create pie charts with CSS, I thought -- oh, it's easy. I can use a pseudoelement that I'm going to skew to create all the possible variables. So let's explore this solution for a bit. We would still make it round, we would add a pseudoelement. This is pretty easy stuff. You guys know it very well, I'm sure. Let's give it an absolute position. A background, so we can see what we're doing. We want to see it, because it has no dimensions. Let's give it some padding of 50%. Now it has the same dimensions as our main element. Let's give it some offsets. We want it to be 50% from the bottom. And 50% from the left. And there it is. We need to see what we're doing, and also, we don't want it to bleed over, so the main element -- overflow hidden. There's our 25% pie chart again, but now we can apply transforms to it, and we can apply a skewing transform. Let's make it 5 degrees. So as I'm increasing this, you can see I'm sort of getting there. It's not quite right, it's not quite centered, but I'm getting there. You probably figured I can apply transform origin to control which point in the elements that is fixed. I want the bottom right... Sorry. The bottom left -- I'm terrible with directions -- I want it to stay fixed. So there we go. I'm almost having a pie chart. Usually we'll start from the middle point here, and they grow like this. So I want to do that. So let's flip it by applying a horizontal scale transform. Now it grows in the right direction, but I still need to rotate it. Let's apply rotation as well. 90 degrees. Minus 90, sorry. Other direction. So there is a pie chart. It goes through... If I want... Yeah. Minus 90 degrees would be zero, and then I can make it grow. The problem is... When it goes over a certain point, it kind of starts showing the thing here -- that this is actually a skewed pseudoelement. The obvious solution would be to increase the padding. And then I can keep increasing this, and at some point, it'll break again. I make it 5,000. That's how it works, right? You kind of fiddle with numbers until it works. But in this case, it will sort of work until 89 degrees. Now it will break. And there's nothing you can do. You can make this basically infinite, and nothing will work. Because essentially if you're skewing an element 90 degrees, what happens? You get something with infinite length and zero height. So even though I can sort of make this work, and I haven't shown you how to make percentages bigger than 50%, but as long as you get to 50%, you can sort of imagine -- I just flip the colors. And flip the element on the other side, and I can sort of get it to work. And yeah. This is how we would do percentages over 50%. I can just... You will see how it goes. I have to override the colors and basically flip them. It's not particularly great, though. So even though I might say that -- there, I solved it -- I made the pie charts with CSS, and there is my solution, it's kind of a horrible solution, isn't it? Maybe something with CSS is not good enough. There are so many solutions of -- yay, I made this with pure CSS, and look at my code! And I look at this, and I look at, like, the code with 200 or 300 lines of cryptic CSS, and I'm like... This looks like somebody vomited CSS on the screen. I don't understand what the hell is happening here. This is not straightforward. It makes no sense. I don't know how to change the most basic things about it. So just making something with CSS, or just making something that works in general, regardless of the language, is not good enough. A good solution needs to have, I think, three things. It needs to be flexible, it needs to be extensible, and it needs to be maintainable. So what do I mean by that? As for flexibility, I mainly mean how easy it is to change it. So is it possible to change it at first? Like, some solutions depend on specific numbers, on specific constraints, and you just can't make them work with -- if the conditions change even a little bit. But even if you can change things, can you change them inline? If I want to write a component, and use JavaScript to display percentages -- which is common. I might not use JavaScript to change the colors. Because that would be mixing styles -- but it's very likely I want to have a JavaScript component depending on something in my script, and I should be able to do that. I shouldn't have to modify the actual stylesheet to change the percentage shown on the pie chart and I shouldn't need to have multiple classes, one for each percentage, or ugly things like this, which I've seen actually happen. And also, even if something is possible to change and it's possible to change inline, how easy is it to change? How many changes do I have to make? Do I have to change code all over the place to make a simple edit? Like in ten places to get a different color on the pie chart? All sorts of transforms and weird numbers to change the percentage? How many places do I have to change for the size? These are things that you will almost certainly need to modify, and have variations of, in a pie chart example. But that's just an example. It applies to pretty much every component. Like how many -- I think of -- if there are big components of good code -- being possible to change it with as few edits as possible -- in software engineering, this is called DRY, which stands for don't repeat yourself. There's the opposite, which fewer people know, called WET, which stands for two things. There are two alternative explanations for this. We enjoy typing. Or write everything twice. And I'm sure you've all seen CSS that can be very WET. The second part is how extensible it is. Like, this doesn't quite have to do with changes, but more like -- how might... How I can... In what way will I want to make it... To make my component do more things in the future? For example, it might work perfectly for -- if I only want to show one percentage in my pie chart. But often pie charts show multiple percentages, multiple segments. Obviously this is very specific to pie charts, but there are questions for this for every component we might want to make. How am I going to want to extend it in the future? Even if you don't think you will want to now, chances are, the future will prove you wrong. So in the example of pie charts, how easy it is to have multiple segments, or can I animate it. Either to show the actual percentage with a transition, or to just animate the entire pie chart from 0 to 100 continuously, to make a timer. I'm sure you've all seen timers like this. Or perhaps can I apply effects to it? Do my segments have to be a solid color? Can they be gradients or patterns or textures or anything? Those are three things I might want to possibly extend it in the future, but you can think of others, I'm sure. And how maintainable is my code? This is also extremely important. Part of it... And that's just a heuristic. You might have tons of code that is perfectly reasonable, but in general, the more your code increases, the more difficult it becomes to understand. So the less code it requires, the better, generally. There are tons of exceptions. Don't take it as -- this is just a rule of thumb. Also does it require extra elements? Then I have to look at the HTML, figure out how to change the HTML as well if I want to make changes. Not just change the CSS. It just increases the overall complexity. And mainly, how straightforward is it to change? Can I figure out -- for example, to change the percentage -- can I figure out what I have to change, or do I have to do complex calculations? How straightforward is the code, overall? So let's look at this example. First off, it's extremely hacky. You probably felt kind of dirty as I was increasing the padding here. This is the kind of code that makes me want to go afterwards and wash my hands. It's horribly dirty. The skewing is also kind of weird. Like, I don't know what percentage is being shown here. Just by looking at the code, without looking at the pie chart. What does 30 degrees correspond to? I need to actually think that... Oh, it goes from minus 90 degrees to 90 degrees, or does it go the other way? You don't want to be picky like this. To have a percentage that's more than half, you need to edit three times. And to change the color, even if we just focus on this pie chart, to change the color, you could change the background here. Let's make this yellow-green. So that's good. Although if you want to override it on the more than 50% case, you would have to change it here too. But also, if I want to change the other segment, and make it... I don't know... This nice blue... Also... Wow. My slides are a bit stretched, by the way. This is not an ellipse. It's an actual circle. You just have to trust me on that. I can't prove it to you without turning my laptop. So I have to change it in the pseudoelement. So that's not good for inline styles. However, I can apply this trait. I can set color to... The color I actually want for my second segment. And then use current color here, which always refers to the body of the color property. And if I set the body of the color property here, then it will be black. But if I set it from the parent, because it's inherited, color will refer to that. So I can set an inline style of color on the main element, and it will... That's a weird rendering. It's not supposed to look like that. Yeah. Rendering. I went back, changed the slide, now it works. So... I can change the colors with inline styles. If I want to change the percentage, though, I need to make an edit to the degrees of skewing. I need to change the background. I need to change the color. And flip them. Let's change this to blue as well. And wait... Background... Yellow-green. So I would need to flip them. And I would need to make this... The blue. Yeah, it works. I don't know why it didn't update immediately. It's supposed to. Maybe it's Chrome. Maybe it's my JavaScript. But... It has nothing to do with the CSS. So I need to flip the colors. That's two edits. I was need to change the angle here. That's one more edit. And if I want more than 50%, I would need to also remove the skew, the scaling, the flipping. So that's another one. So actually four edits to change the percentage. If I want to go from 50% plus to less than 50% or the other way. So actually, how flexible is the solution? Well, I can change the colors easily. I can change the size easily. The value, not so easily. And it's not possible to set the value inline as well. I need to actually modify the pseudoelement. So that's kind of bad. I can sort of have multiple values by extra children. Instead of pseudoelements. I use the pseudoelement here for the segment I had, but I could use the child instead and have multiple children and rotate it. It's not great, but it's possible. Also it would be possible to animate. I would just flip the colors halfway through and I would animate the... You can see how it would work. But it doesn't make me feel great. And yeah, sound effects would be possible. I could just apply a gradient on the segment here instead of a solid color. Well, actually, if I'm using the current color solution I couldn't, but I could at least apply a gradient here, instead of the solid color. Sound effects are possible, even if they're not super easy. I don't have an extra element, that's a plus, but it's quite a bit of code. And I'm sure you've noticed how horrible and messy and hacky it is. So overall, it's not a great solution. So how else can we make pie charts? Skewing transforms are out of the window, but maybe I can hack rotations. Maybe I can progressively unveil something can rotations and kind of show something like this. Let's explore this solution for a bit. So here I have a circle to begin with. And instead of giving it a solid color, I'm going to color it with a linear gradient. To make it half magenta. And half gold. And it needs to be vertical. So there it is. And it needs to be... I don't actually want a gradient. I'm just using a gradient to... Color half of it in a different way, and half of it with a different color. So there we are. And now I'm going to cover this gold segment, this gold half of the circle, and progressively unveil it to create my pie chart. So let's do that. Let's give this a background of... I don't know. Some random color. Let's make it blue. Just to see what I'm doing here. Margin-left. But I only want it to cover half of my circle. Let's give it a border radius. I obviously have overflow hidden again, but I don't really need to. I can just give it a border radius that will make it a semi-circle. How? I will use the extended border radius syntax, which means different values for every corner and different horizontal and vertical values. So my top left corner would have a horizontal radius of zero, top right corner would be 100%, because I want the entire length to be curved. Look at the semi-circle behind it. The whole thing is curved. Same with the bottom right corner, bottom left corner also doesn't have a radius, and vertically, I want them to be 50%. So there's our semi-circle. And now let's make it magenta. So this would be our pie chart, if it was showing 0%. Now I can start rotating this, which is the fun part. So you can see that it's already sort of getting there. I'm sure you can spot what's missing. Because I don't want it to rotate -- right now it's rotating around its circle, which is around here. I want it to rotate around the middle of its left side, which is here. So I would give it a transform origin of left. And actually... Here it is. We already got the pie chart up to 50%. And I just have to change this value. And I don't even need degrees. I can use turns. Which is a new unit. So 0.1 for 10%, 0.2 for 20%, and so on. So that's really straightforward to change. Now there's a question of how do I make the other half? How do I make percentages that are over half? Because if I keep animating this and make it 0.6, it starts breaking. This is not 60%. This is 40%. And it's also kind of wrong. So let's make this smaller again. And I'm going to use the bottom -- I'm going to style the bottom pie, which has the plus over half -- to make it display 60%. And how will I do that? This will become pretty obvious once I show you again where our pseudoelement is, by giving it an outline. So this is our pseudoelement. And what is 60%, essentially? It would be... The pseudoelement just needs to be gold. That's all that I need to override in the pseudoelement. So to make -- to show a percentage over half, I need to start the rotation again from zero. That's one point of it. And also I will need to change the background to gold. And then I can just keep rotating it, and I can get all the percentages I want. This would be 70%. 80%. 90%. Wait a second. Ah, yeah. Yeah. I have to start from 0.1 again. And yeah, this is 60%. This is 70%. This is 80%. And so on. So... Well, first off, I don't want to repeat the color here, so I will apply the same trick. I will use the color gold. I will use current color in the gradient. And also here. So to go over half, I just need to set the background to current color, and start the rotations again. So if I want to animate it, it's not super trivial, but it's more straightforward than it was before. I need two animations. The first one is probably kind of obvious. The rotation goes from zero to 0.5 turns. Twice. Up to... From zero to 50%, and then from 50% to 100. It animates again from zero to half a turn. And also I need another animation for the color. Which flips it halfway through. And you might be wondering how will I flip it halfway through without actually animating it? But we'll get to that. Actually, let's make this one inherit. And this one current color. The animation will be easier that way. So if I wanted to just animate the rotation... Wait a second. Actually, you know what? Maybe this should be the way it was, and I shouldn't fiddle with it. Because that was working. Yes. Now it's 0%. So... You can probably see how that would work. >> Transforming the tube keyword? >> Oh, no, I don't need to. Oh, yes, yes, I see what you mean. By the way, we will have eventually a rotate property. It's been discussed in the group. Because many people tend to use... Tend to forget to use the transform. So... This would be the rotation. We want to make it linear, because we don't want it to accelerate. And for the color, we could start with something like this. Make it infinite as well. Make it linear as well. And you can see that this is sort of smoothly going between the two. And this is because, obviously, the linear function -- which means it linearly interpolates between gold and magenta -- but I can use step start to just make it flip halfway through, and it's halfway through because I've used 50% here. Essentially step start means -- don't smoothly animate it. Just go from this... From the first to the second key frame. And I don't want any animation. Which is exactly what I wanted here. So how do I combine these two? I just use two animations. And let's hope they line up. Uh... They don't. I think I need to... Yeah. Because... I was using... Yeah. So if I was using step end, which just flips it at the end, then it works. (applause) >> It will bite us later, but let's leave it for now. So I do have an animation now, which I can use as a timer of sorts. But I didn't actually want an animation. I wanted a static pie chart that displays the percentage I want each time, and I wanted multiple pie charts to show the percentages, but still I wanted static pie charts. So animations are kind of cool, but not what I wanted. So... How I can actually use this to display percentages without having to modify a bunch of values every time? The browser -- given that I've written this animation -- the browser knows how to go from 0% to 100%, and I basically told the browser how to go from 0% to 100%, which is how I created this animation. So all I need to do is tell the browser to stop it at the point I want. So how can I do this? This is what I tend to call static interpolation, which sounds kind of like a fancy academic term, but all it is really is... Interpolation is if you have a start and an end file, how do you figure out the in between states? And static is because it's not actually moving. So let's assume I have five divs here, which have a magenta background. And if I apply an animation to them, that makes them gold... If I apply this animation, over, let's say, one seconds, infinitely, so the browser knows how to go from magenta to gold. So I can use animation place state, paused, to pause it at any point, and now I can increment it and increment it and pause it at any point. I can put it on hover and any point I hover over them, they stop, but how do I control at which point they pause without having to interact with them? There's a property called animation delay which you've probably used or have heard of. So what it does is -- our animation, if it wasn't a linear progression, would look like this. Well, if it were from gold to magenta, and not the other way around. And if I use a delay of one second, it would look like this. You know this already. The thing you might have not realized is that I can also use negative animation delays. And what they do is this. And if I use the minus, -4 seconds, and remember, this animation is supposed to be 10 seconds, it would be like this. So if this animation is paused, and I use a negative delay, I can basically step through at any point in the animation I want to. So let's go back to our animation, which is paused here. If I use animation delay, say... Let's make this 100, so I have nice round numbers. So 25 seconds. This is 25% through the animation. If it's 50 seconds, it's halfway through the animation. So basically I can keep decreasing this, and step through my animation statically. So a lot of the time, this comes up when you're doing animations. You have an animation that lasts for half a second and you want to debug it. You're like -- I can't see what's happening. So you say -- maybe I can make it slower. So you make it 10 seconds and sit through... Watching it animate... Very... Slowly... To figure out what you're doing wrong and debug it, and every time you change something, you have to sit through the entire animation again, and wait for ten seconds, or 20, or whatever. But actually, if you use this, you could just step through at your own time, and go directly to the point you want. Say I want to see what 75% of the animation looks like. Easy-peasey. I just look at it. And there it is. And here I have different classes. This is 25, 75 -- so I can style them differently, and have a separate animation delay for each, and simultaneously step through my animation and give them different colors. So this would be -50. This would be -75. And yeah. Okay. And let's reapply this animation. Okay. There we are. And now for the tricky part. What do you expect should happen if I make this -100? Will it be gold? You would want it to be gold. Actually... It's going to be magenta! Why? Because the animation starts again. We're stepping through the animation that we have, and at 100%, it just goes to 0%, and it starts again, and our first frame is magenta. So I could do something awful like... This. And it would work, but I don't want to, because that makes me feel dirty, and not in a good way. So what I can do is... First off, I'm just stepping through the animation statically. I don't need it to be repeated infinitely. And I can use animation fill mode, which basically... What it does is... Let's comment this out and show you an actual animation, what it does. So if this is not paused, and I use animation fill mode forwards, and let's reapply this and make it shorter. Because I don't want to wait 100 seconds. I'm already pressed for time. So what it does is... The animation gets stuck at the last frame. So if I apply this in my case, which was the 100 seconds, and it was paused, and I was stepping through, then... The last frame would be gold. Just like I expected. So I can apply this to my pie chart here. I don't need it to be infinite, first off. And I can do the animation -- and pause it. And don't worry that it looks kind of weird now. I will do animation fill mode forwards. And the thing is -- I need this to repeat twice. Because I want it to line up with the color changes, and this is one second. This is two seconds. So this needs two iterations. And I can use an animation delay of... I have a bad feeling about this. Ah, yes. Because this is... No, wait. This is step start. Hm. Okay. This is weird. I think this was the point I remembered. Damn. Ah, wait! Yes! The total duration of the animation needs to be 100 to have anything useful here. Sort of... No... No... Um... Hm... Not quite. And I have six minutes to go. So that's not good. Anyway, I can swear that it worked. (laughter) And I will probably figure it out afterwards and be like... Damn. But it worked, and I can just step through and change the delay and it corresponded to the percentage, and it was glorious, but now it's gone. So let's assume that it works, and please roll with me on that. Because it did! So a rotated pseudoelement, I can change the color pretty easily, the size pretty easily, the value with just one edit -- trust me -- and I can set the value inline, because even though this is a pseudoelement, I don't have a evaluation in my main element, so I can set it here, it does nothing, and I can just inherit it here. So yeah. And it was working! So yeah. I could set it inline. Unfortunately, it's not possible to do multiple values. These are the things I've covered. It is possible to animate. We showed that. And we can't really do any effects. Gradients or patterns or whatever on it. Some extra elements, but less hacky than before. So it's kind of better. Yeah, this is the Chrome bug, where it disappears. But it was supposed to be a big Emoji like this. That's a Chrome bug. If you increase an Emoji up to a certain size, and I think this has to do with my resolution as well, it disappears. Try it. So yeah, it's not great. So our next idea might be SVG. And most people, when they think of SVG pie charts, they think of something like this. Not much styling. And the weird path with very cryptic syntax. I can tell you what it does, but it won't make it any easier to type. Yeah. It moves to like the top midpoint. Then it grows an arc to here and I have to manually figure out the coordinates of this. This is the 40.80. It's actually the coordinates of this element, of this point. And then it goes to the center and it's not possible to animate, it's not possible to write. It's just designed to be generated by applications. So most people... Feel kind of bad about doing this. However, we have something else that we can use. And I will just... I will show you what in a minute. So here I have a circle. Of where I have set the view box to 0 0 64 64. It means 100% in my SVG means 64. And these units mean nothing by themselves. It doesn't mean 64 pixels. It's just so I can refer to numbers inside my SVG and have them mean something relative to the size of the SVG. And I have the circle inside, which I can actually style with CSS. And I can give a stroke, for instance, of gold, and I can increase the width of the stroke. And here I'm just using the units of the SVG file. And there's this interesting property called stroke-dasharray, which lets you do dash borders by default. This is what it was designed for. And you can do all sorts of interesting dash borders for it, and you can provide multiple values and do super custom dash borders, which you usually don't need. But it's insanely useful in this case, if I increase the stroke width so much to occupy my entire circle. Which is 32. Because remember, my SVG was 64, total. So I want to increase the size of the gap here, after its dash, as much as the circumference of the circle. How much is that? So remember... Total width -- 64. Radius is 25%. So... 25% of 64 means radius is 60. So if we want to find the circumference, we need to multiply it by two and then by pi. Which means it's 100. Which is why I chose 64, actually. It was not random. It's so the circumference can be 100, so I can easily show percentages in what's going to become my pie chart, and they just correspond to the percentage I want to show. And obviously I need to style it a little bit more to actually resemble the pie chart. To make this disappear, give it a magenta background here, border radius to make it round, but yeah, that's about it. And the transform... Of maybe -90 degrees? Yep. And now I can show any percentage I want, and actually, all I have to do is set the percentage here, and it corresponds like -- this is 60%. I don't have to do any complex calculations. I just set it as the first value in the dash array. There it is. No weirdness between 50% or... Yeah. It's just... I just set the number. I'm going to animate it. Easy-peasy. I just use key frames from 0 to stroke-dasharray: 100, and... Let's make it 2 seconds linear infinite. There it is! No weirdness! (applause) Thank you. So... And this is how you can do multiple segments as well. And also I've used an animation here. If you notice. When I first noticed the slide -- I'm sorry. A transition. Because these are just transitional properties. Animatable properties. Dashoffset. That I can use to offset this by this. You can see here. Strokedashoffset -5. So supposes I have this segment. Dashoffset. Let's move it. And if it's positive, it moves it this way. Which is not particularly useful. But if it's negative, it just offsets it. Which is very useful if I want to do multiple segments, like I did here. This is actually -- the CSS is working with composition, by the way. Like browsers. So never say that W3C makes specs. It's actually mostly browsers. But that's just an aside. So let's review the stroke-dasharray solution. Easily change the color, easily change the size, easily set the value. You can set the value inline, I set an inline value in my circle, and SVG lets you set it in two different ways. Both by the style attribute, and also because these properties are also attributes. So here I've used attributes instead, and their main difference from inline styles is that they have specificity of 0. So be careful with that. Any style you set -- even with the universal selector -- it will override them. It's possible to do multiple values. We saw this. It's possible to animate it. It's possible to do gradients and patterns, but they have to be SVG gradients and SVG patterns, which is kind of messy. You do need extra elements, but you can add them with JavaScript. Only 7 declarations, and it's pretty straightforward. You change the value and the percentage changes. So SVG-dasharray is pretty cool. Is there a better way? So there's this thing called conic gradients. Which you might know from Photoshop as angle gradients. They look like this. In CSS. I can add multiple colors. I can make... You will see what I'm making. You're probably already seeing where this is going. Oh, and I forgot. Blue. I can set a border radius here. I have a hue wheel. If you ever need to make a color picker, there it is. Conic gradients to the rescue. I can make all sorts of crazy things with them. Let's see if anybody can figure out what I'll be doing now. If you can, just shout it. Not that I have a prize for whoever gets it first. So time is up. It's a checkerboard. And... Well, this is not about hue wheels or checkerboards. It's about pie charts. But you probably have already seen where this is going. If I want to make a pie chart, let's say gold, 40%, and the rest being magenta, there it is, actually. Just one declaration. I want to show... There it is. I want to show multiple segments. Well... That's pretty easy too. Yellowgreen, let's make it. There it is. I want to change the colors in one place? I want to change the percentages in one place? How much code? Three lines. They're defined in image value level four. And they're pretty awesome. Pretty much one edit to set anything. I can set the value inline and just override the gradient. I can have multiple values. Obviously easy to animate. Sound effects would be possible, but eh. Super straightforward. Conic gradients are pretty fucking awesome. (applause) Except one thing. (laughter) Yeah. Yeah. They're not supported anywhere. Anywhere at all. However... You're not powerless in this. Browsers prioritize what to implement based on what you guys request from them. Few developers realize how much power they have in this. How much say they have in this. Microsoft has set up this entire user voice forum so that developers can vote on features based on what they want them to implement next. This is not just how IE works. This is how every browser pretty much works. Just IE has become a bit more structured about it, because they got so much shit. So... If you want something to be implemented, and that doesn't just apply to conical gradients. That applies to anything. If there's a feature that you really like and you want it to be implemented, speak up! Don't just complain to other developers. Tweet about it. Post in bug reports. Vote in user voice. Make a thread about it, if it doesn't exist. Be vocal. It doesn't matter where. And yes, it's obviously better if you post in a bug report, because then you reach developers directly. But it doesn't really matter. As long as there's noise, developers will notice, and the squeaky wheel will get the feature. It's how it works. So if you like conical gradients, and I think they're awesome, you should make noise. But apart from that... I've shown you... I've shown you conical gradients here. And this is basically just a browser-based presentation. So how did I do it? So actually... This uses prefix behind the scenes to process the CSS, and it picks up the gradient references and draws them on a canvas and injects it inside of SVG so you don't have aspect ratios, and then it injects it in the background, which sort of looks like this. Actually. And I haven't... So since I wrote it for this talk, this is not public anywhere, but I was planning to release it during this talk. So this is my repo. It's private. But I'm going to make it public right now. (applause) And let's hope the Wi-Fi works! Waiting. Waiting. Waiting. Come on, Github! Yay! Oh, no. Wait. Still private? That's weird. Still private. What the hell did I do? Yes, conic gradient. Okay. Uh-huh. Uh-huh. Uh-huh. Yeah. Yeah. Yeah. So... What the hell? I can't seem to make it public! Github wants me to have private repos for some reason. >> It's loading for me. >> It's public! (applause) >> Woo-hoo! That's the URL. These examples are actually live. You can implement repeating gradients, so you can make star bursts like this. Although it's a buggy. It has this artifact here. I stayed up last night, but I didn't manage to fix it. And you can actually use it to create this. So there it is. And at the end... I'm already so much over time. But... Are pie charts actually a good idea? How many of you have heard of Edward Tufte? Many. Okay. So you might know that he doesn't like pie charts very much. He's this kind of... For those of you who haven't heard of him, he's this super famous information visualization guy. And he said a table is nearly always better than a dumb pie chart. The only worse design than a pie chart is several of them. For them the viewer is asked to compare quantities located in spatial disarray for within and between pies. Given their low data density and failure to order numbers along a visual dimension, pie charts should never be used. So first off... He has a point. Look at this pie chart. Can you order... Can you tell me which one is bigger? Which segment is bigger? Which one is showing the biggest percentage? Can you order them? You can probably see that they're very similar, but... It's kind of difficult to tell. Whereas with a bar chart, you can see this was a trick question, because they're all equal. Here... What about the... This was not supposed to be like this. It was supposed to have gold as well. This is what happens when you modify things. But look at the yellow and the blue and the... Yeah. Look at the yellow, green, and the white. It's kind of difficult to tell compared with the previous pie. But with the bar chart, it would probably be their own numbers. Yeah, that kind of broke. But you see the point. It's difficult to compare angles with other angles. Although if you have very simple data with huge differences between them, then pie charts can be a good choice, and actually, if pie charts are an equally good choice with another visualization, then pie charts are preferable, because there's actually research that proves that humans actually like curved things. Who would know? We're not rational animals at all. We're not rational. We just like curvy things. But also... Even if pie charts are not always a good idea, I hope you have figured out by now, after me talking for... Way more than I should about pie charts... This talk was actually not really about pie charts, was it? Thank you very much. (applause)