 I'm Leah, if you've ever heard about me before, it's probably due to one of my open source projects. You might have seen some of them. The rest are on GitHub. I'm an invited expert in the CSS working group, which just means mainly that I gather with some other people four times a year and we spend increasing amounts of time discussing use case, discussing edge cases of decreasing likelihood. In my, 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 Riley. It went to print 10 days ago, yay. Finally, after spending almost two years on it. So I hope you're not too sleepy after lunch because we're gonna 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 seen it, you've probably had to do it. You've 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 still surprisingly difficult to create even the simplest of pie charts with web technologies. And we're sort of going to explore this today. Take a moment, looking at this extremely simple pie charts. 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 we don't, and if you had some idea that we didn't explore during the talk, please tell me afterwards, because I would be very interested. So if, 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, you could do something like this. Let's make it bigger. And give it a border radius of 50% to make it circular. And then we could do border right color transparent and end up with a Pac-Man effect. We could even use CSS animations to sort of animate it like this and get end up with a Pac-Man. But this is about pie charts, not Pac-Man. So we could give it a background. Let's make it the, my favorite magenta and the transparent rotation. And this would be a 25% pie chart, but, 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 just use a pseudo element that I'm gonna skew to create all the possible angles. So let's try to do this and let's explore this solution for a bit. We would still make it round. We would add a pseudo element. I mean, 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 still won't 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 let's give 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 five degrees. So as I'm increasing this, you can see I'm sort of getting there. It's still not quite right. It's not quite centered but I'm getting there. You've probably figured that I can apply a transform origin to control which point in the element stays fixed which 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 angles 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 like this. Now it grows in the right direction but I still need to rotate it. Let's apply a rotation as well. Just 90 degrees minus 90, sorry, other direction. So there's 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 hack here that this is actually a skewed pseudo element. What do I do? Well the obvious solution would be to increase the padding and then I can keep increasing this and at some point it will break again. Let's 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'll break and there's nothing you can do. You can make this basically infinity and nothing will work because essentially if you skew 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 showed you how to make percentages bigger than 50% but as long as you get to 50% you can sort of imagine, I can 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 can 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's my solution. It's kind of a horrible solution, isn't it? Making something with CSS is not good enough. There's 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 pen with like or the doublet with like 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 a good solution needs to have 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 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 in line? Can you make, can you change them via inline styles? If I wanna write a pie chart component and use JavaScript to display different percentages which is pretty common, like I might not use JavaScript to change the colors because that would be mixing style with. But it's very likely that I might want to have a pie chart component and show different percentages depending on some value in my script and I want to be able to do that. I shouldn't have to modify the actual style sheet to change the percentage shown on the pie chart and I definitely shouldn't have to, shouldn't need to have multiple classes, one for each percentage or ugly things like this which I've all seen actually happen. And also even if something is possible to change and it's possible to change in line, how easy it is 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? Do I have to change the color in like 10 places to get a different color in the pie chart? Do I have to change all sorts of transforms and weird numbers to change the percentage shown? How many places do I have to change for the size? These are pretty, these are things that you will almost certainly need to modify and have variations of in a pie chart example but that's just, that's just an example. It applies to pretty much every component like how many, I think a very big component of good code is making a, 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 and there's actually the opposite that 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 even, this doesn't quite have to do with changes but more like how, in what way will I want to make it, to make my component do more things in the future? For example, if it might work perfectly for if I only wanna show one percentage in my pie chart but often pie charts show multiple percentages, multiple segments and obviously this is very specific to pie charts but there are questions like this for every component you might wanna make. How can I, how might I 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 zero 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? Like do my segments need to be a solid color or can they be gradients or patterns or textures or anything? Those are three possible things that I might want to 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. A part of it, and just that's just a heuristic you might have tons of code that is perfectly readable 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? Cause then I have to look at the HTML to figure out how to change the HTML as well if I want to make changes not just how to change the CSS it just increases the overall complexity. And mainly how straightforward is it to change? Can I figure out for example, let's say to change the percentage can I figure out what I have to change or do I have to do complex calculations or like how straightforward is the code overall? So let's look at this cute example. First off it's extremely hacky. Like I'm sure you already felt kind of dirty as I was increasing the padding here and this is the kind of code that makes me want to go afterwards and wash my hands. It's just horribly dirty. And like 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 it goes from minus 90 degrees to 90 degrees or does it go the other way and what it is so 180 degrees is 50%. Yeah, you don't want to be thinking like this. And to have a percentage that's more than half you need to override it three times. And you also, to change the color even if we just focus on this pie chart to change the color, you can 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. God, this looks kind of awful. Also, wow. Yeah, my slides are a bit stretched by the way. This is not an ellipse, this is 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 pseudo element. So that's not good for inline styles. However, I can apply this trick. 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 value of the color property. And if I set the value of the color property here then it will be black. But if I set it on the parent because it's inherited current color will refer to that. So now I can just set an inline style of color on the main element and it will, that's a weird rendering artifact. It's not supposed to look like that. Yeah, rendering artifact. 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. I would need to flip the colors, that's two edits. I would 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 scaling, the flipping. So that's another one. So actually four edits to change the percentage if I want to go from 50% less than 50% or the other way. So actually, how flexible is the solution? Well, I can change the colors easily. Can change the size easily. The value, not so easily. And it's not possible to set the value in line as well. I need to actually modify the pseudo element. So that's kind of bad. I could sort of have multiple values by extra children instead of pseudo elements. Like I used a pseudo element here for the segment I had but I could have used the child instead and then I could have multiple children and kind of 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, some 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 a solid color. And so some effects are possible. It's not super easy though. I don't have any extra elements, that's a plus. There'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 sort of hack rotations. Maybe I can like progressively unveil something with rotations and kind of show a custom angle 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 gonna color it with a linear gradient to make it half magenta and half gold from, 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. And margin left because I only wanted to cover half of my circle. Let's give it a border radius. I mean I could obviously overflow hidden again but I don't really need to because I can just give it a border radius that will make it a semicircle. How? I will just 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 semicircle behind it. The whole thing is curved. Same with the bottom right corner. The bottom left corner also doesn't have a radius. And then vertically I want them to be 50%. So there's our semicircle. 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 stored of getting there. I'm sure you can spot what's missing. Transform origin. 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 turn would be if I wanted to show 10%. 0.2 turns is 20, 0.3 is 30% and so on. So that's pretty straightforward to change. Now there's the question of how do I make it over 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 gonna use the bottom pie which has the class 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 pseudo element is by giving it an outline. So this is our pseudo element. And what is 60% essentially? It would be, the pseudo element just needs to be gold. That's all that I need to override in the pseudo element. So 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%. That's weird, wait a second. Ah yeah, yeah. I have to start from point one 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 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 rotation is 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 point five turns twice. 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 because the animation will be easier that way. So if I wanted to just animate the rotation 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 zero percent. So you can probably see how that would work. No I don't need to it's ah yes yes 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 forget to use the transform. So this would be the rotation and we also want to make it linear. We don't want it to accelerate. And for the color we could start with something like this and make it infinite as well and make it linear as well and you can see that this is sort of smoothly going between the two and this is because obviously I've used a linear easing function which just 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 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. They don't. I think I need to yeah it's because if I was using yeah so if I was using step end which just flips it at the end then it works. It will bite us later but let's leave it as step end. For now. So I do have an animation now which I could 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 to use multiple pie charts to show different percentages but still I wanted static pie charts. So animations are kind of cool but not what I wanted. So how can I 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 zero to a hundred percent and that's what it uses to... I've basically told the browser how to go from zero percent to a hundred percent 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 just if you have a start and an end value 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 background, a magenta background and if I apply an animation to them that makes them gold, ah, two, of course. If I apply this animation over, let's say, one second, infinitely, so the browser knows how to go from magenta to gold so I can use animation play state paused to pause it at any point and now I can uncomment it and comment it and pause it at any point I want. I could even put it on hover and every time I hover over them they stop but how can I control at which point they're paused without having to interact with them? There's this property called animation delay which you've probably used or you might have heard of so what it does is by default it's zero and our animation, if it wasn't a linear progression it would look like this. Well, if it was from gold to magenta and not the other way around and if I use the delay of one second it would look like this and 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 four 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 that I have nice round numbers. See 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 debugging animations because you have this animation that lasts half a second and you want to debug it and you're like, I can't see what's happening. I mean, maybe I should make it slower so you make it like 10 seconds and then you 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 10 seconds or 20 or whatever but actually if you use this you could just step through at your own time and go directly at the point you want. Say I wanna see what 75% of the animation looks like. Easy peasy, I just type minus 75 seconds and there it is. And here I have different classes like this is 50, this is P24, 25, this is P75 so I can even, 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 minus 50, this would be minus 75 and yeah, I'm okay. And let's reapply this animation, okay. Oh, and I've over in here, there we are. And now for the tricky part. What do you expect should happen if I make this minus 100? Will it be gold? You would want it to be gold. Actually, it's gonna be magenta. Why? Because the animation starts again. We're stepping through the animation that we have and at 100% it just goes to zero 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 in 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 it gets, the animation gets stuck at the last frame. So if I apply this in my case which was 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 animation play state, pause to 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 wanted 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. Okay, this is weird. I think this was the point I remembered was kind of, maybe if I flip these. Yes, the total duration of the animation needs to be 100 to be able to have anything meaningful here. Not quite, it's sort of no, no, not quite and I have six minutes to go. So that's not good. Anyway, I can swear that it worked and I will probably figure it out afterwards and be like damn, but it worked and you could just step through and change the delay and it corresponded to the percentage and it was glorious, but now it's not. So let's assume that it works and please roll with me on that because it did. So the rotated pseudo element, I can change the colors pretty easily, the size pretty easily, the value with just one edit, trust me, and I could set the value inline because even though this is in a pseudo element, I don't have an animation in my main element so I can just set it here and 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 due to the way things uncover. It is possible to animate, we saw that and we can't really do any effects. It would be really difficult to do any gradients or patterns or whatever on it. No extra elements, still quite a lot of code, but somewhat less hacky than before. So it's kind of better. Yeah, this is the Chrome bug where emojis disappear but it was supposed to be a big emoji like this. Yeah, actually that's a Chrome bug on OSX if you increase an emoji up to a certain size and I think this has to do with my resolution here 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 a weird path with a very cryptic syntax. I can tell you what it does but it won't make it any easier to type. So yeah, it moves to the top midpoint, then it draws 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 draws a line to the center and it's not possible to animate, it's not possible to handwrite, it's 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 show you what in a minute. So here I have a circle of where I've set the view box to 006464 which just means the coordinates, 100% in my SVG means 64 and these units mean nothing by themselves. It doesn't mean 64 pixels, it's just so that I can refer to numbers inside my SVG and have them mean something relative to the size of the SVG and I have this circle inside so which I can actually style with CSS and I can give it 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 dash array which lets you do dashed borders by default, this is what it was designed for and you can do all sorts of interesting dashed borders with it and you can even provide multiple values and do super custom dashed 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 each 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 our radius is 16 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 that the circumference can be 100 so I can easily set 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 like make the default black fill disappear and give it a magenta background here and the border radius to make it round but yeah that's about it, and I transform of maybe minus 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 16% I don't have to do any complex calculations I just set it as the first value in the dash rate I want to set 90, there it is no weirdness between 50% or yeah I just set the number I want to animate it, easy peasy I just use keyframes from zero to stroke dash array 100 and let's make it two seconds linear infinite there it is, no weirdness, thank you so and this is how you can do multiple segments as well and also I've used an animation here if you noticed when I first loaded the slide sorry a transition because these are just transitionable properties, animatable properties that's stroke dash array and stroke dash offset that I had to use for to offset this by a bit you can see it here stroke dash offset minus five so what this does is let's suppose I have this segment dash offset lets you 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 working group composition by the way all of it is member companies like browsers so don't never say that W3C makes specs it's actually mostly browsers but that's as an aside so let's review the stroke dash array solution you can easily change the color you can easily change the size you can easily set the value you can set the value inline I just set an inline style on my circle and actually SVG lets you set inline styles 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 a specificity of zero 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 graded SVG gradients and SVG patterns which are kind of messy you do need extra elements but you can add them with JavaScript only seven declarations and I think it's pretty straightforward you just change the value and your percentage changes so SVG stroke dash array 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 could 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 and 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 say I 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 thumbs up it's a checkerboard and well this is not about hue wheels or checkerboards it's about pie charts but you might you've probably already seen where this is going if I wanna make a pie chart let's say gold 40% and the rest being magenta there it is actually just one declaration I wanna show a certain percentage there it is I wanna show multiple segments well that's pretty easy too yellow, green let's make it there it is I wanna change the colors in one place I wanna change the percentages in one place how much code? three lines they're defined in image values level four and they're pretty awesome pretty much one edit to set anything I can set the value in line I just overwrite the gradient I can have multiple values obviously easy to animate some effects would be possible but eh no extra elements only three declarations super straightforward corner gradients are pretty fucking awesome except one thing they're not supported anywhere anywhere at all however you're not powerless in this it's 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 is a bit more has become a bit more structured about it because they got so much shit so if you just if you want something to be implemented and that doesn't just apply to corner gradients that applies to anything if there's this 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 a 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 showed 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 I wrote a polyfill for this talk it uses prefix-free behind-the-scenes to process the CSS and it picks up corner gradient references and it draws them on a canvas and then it injects this canvas inside an SVG so that it doesn't have an aspect ratio so that it behaves like a real CSS gradient anyway I'm going into implementation details 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 gonna make it public right now and let's hope the Wi-Fi works waiting waiting waiting I'm on GitHub yay oh no wait still private that's weird no it's still private what the hell did I do yeah make public yes corner gradient okay uh-huh uh-huh uh-huh yeah so make it public GitHub wants me to have private repos for some reason it is there's the URL these examples are actually live I've even implemented repeating gradients so you can make starbursts like this although it's a little buggy it has this kind of artifact here which I stayed up last night but I didn't manage to fix it so and you can actually use it in pages so yeah there it is and at the end of oh god I've already won so much over time but uh our pie chart's actually a good idea how many of you have heard of Edward Tuft? many okay so you might know that he doesn't like pie charts very much he's this kind of for those of you that haven't heard of him he's this like uh 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 then the viewer is asked to compare quantities located in spatial disarray both within and between pies given their low data density and failure to order numbers along a visual dimension pie chart should never be used so first off he has a point look at this pie chart can you can you order can you tell me which one's bigger which segment is bigger which one's showing the biggest percentage can you order them you can probably see that they're very similar but you it's it's kind of difficult to tell whereas with a bar chart you can see that this was a three question because they're all equal 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 up to last moment um 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 uh or compare them with the previous pie but with a bar chart will probably be their own numbers um yeah that kind of broke but you see the point it's difficult to compare angles with other angles although if you have no 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 uh then pie charts are preferable because there's actually research that proves that humans actually like curved things who would know um you were not rational animals uh at all we're we're we're not rational we just like curvy things um but also even if pie charts are not always a good idea you I hope you have figured out by now after me talking for way more than I should uh about pie charts this talk was actually not really about pie charts was it thank you very much