CSSconf EU 2015 | Lea Verou: The Missing Slice

so hi again I'm Lea so I was introduced quite nicely thank you but here's a fun fact you don't know about me I grew up in the Greek island of Lesbos which technically makes me geographically lesbian this is something that not many people know about me so if you've ever heard about me before it's probably from one of my open-source projects I'm also the census working group which just means that I've gotten better at spending increasing amounts of time discussing issues of decreasing importance and then the last year I've been exploring the wondrous world of academia and trying my luck at research I'm doing a human-computer interaction research basically trying to make it easier to create web applications mainly data-driven web applications so enough about me oh and I've written the book if you have it I can sign it just find me in one of the breaks or the party so enough about me let's move on to something more interesting such as pie charts pie charts are everywhere in xkcd in old windows on walls on genitals on food on blackboards and of course there they're very ubiquitous on the web we see pie charts all the time elf wave for evil to show percentages or just as spinners to for as a loading indicator but still it's surprisingly difficult to make them with web technologies for example look at this very very simple pie chart this is what we'll be working on for most of this talk how can we make this pie chart with web technologies it's super simple it's just two colors it should be very easy right can you think of a solution can you try to think about it for a bit just a very simple tight thing needs to go it needs to show one percentage from zero to 100% how would you do it so when I thought about it my first idea was okay we need to show custom angles in some way let's try skew transforms so we start with a square element we give it a border radius of 50% to make it round and then we add a pseudo element with an empty content we position it absolutely let's give it a background as well to see what we're doing right now it won't show because it has no dimensions bottom 50% left 50% and let's give it a padding of 50% as well now we're starting to see it let's give this overflow:hidden so that it doesn't obscure our code and it looks more like a pie chart so this already looks like a pie chart with 25% more scape like most times the 1 25% won't be what we want so this is where transforms come in let's try skewing transform so we're sort of starting to get there but not quite because this is not exactly staying in the center but you know how to fix that right we just use the transform origin or bottom left and now it looks more like a pie chart hey thank you but wait a bit because yes we can show different percentages but as it grows it starts showing the problems which you we can sort of patch by increasing the bad thing but at some point it will come back to bite us we can increase the padding even more whether I can't make it infinite so that 90 degrees it will disappear but we can sort of get around that we can special case everything we can special case 50% because it's easy to just give it a different colour and have the the on half the the circle the difficult part was showing the angles right and we can give it a SAN over half class and apply and change the transform and append the color and swap the colors to show percentages over 50% so we can we can sort of do it with skewed suit of elements so there I sold it I made pie charts with CSS is it good is it a good solution would you work would you want to work on this code would anybody want to work on this code doesn't it make you feel dirty that we used CSS and that in such a way and pure CSS is not good enough just using CSS to mate is to just claim hey I did this with pure CSS so what will you CSS because of its the clarity of reactive nature because sometimes it actually helps us simplify our code just being able to do something in CSS without actually ending up with code that's maintainable or or even understandable that what the hell does this do how do I set this pie charts to show 30% I will have to say think that Oh minus 90 degrees was zero and then 90 degrees was 50% so 30 bit seriously nobody wants to think to think like that usually we should just be able we should be able to just set a straightforward number so to sorry for a super CSS solution to actually be a good idea it needs to be flexible it needs to be maintainable and ideally it should be extensible that's not as important but it should be it's good thing if it's also extensible and flexibility means multiple things such as is it possible to change things what things well you can sort of foresee what you might want to change about something in the pie chart example you might want to change the colors or of course you will want to set the percentage so these things should be possible to change but it shouldn't they should just be possible to change it should be possible to change them in line ideally because a lot of the time we'll have a widget that we stylist with CSS and then we change something with JavaScript and with JavaScript we can only set inline Styles yes with CSS variables that won't be a big problem because we can just set the CSS variable and then we can use it in pseudo elements so that won't be a problem but right now if we need to change something in a pseudo element to modify the percentage that's a problem because we can't in like we can't set pseudo elements by inline Styles and if you're wondering by the way CSS variables have pretty bad browser support right now so it's still a concern so and also it's not just about being possible to change and being possible to change it in line but also how easy is it to change and how many places do I have to change stuff to make a simple edit because the more edits I have to do the more the more likely it is that I will forget one and or that the future developer after me will forget one or they will not even know how that they need to make changes all over the place so it's software engineering this is called don't repeat yourself so the acronym is dry dry code is a good thing strive to make your code as dry as possible the opposite who's wet by the way we enjoy typing good CSS solutions should also be maintainable which is also sort of it's hard to define but a heuristic and it's just a heuristic because you can have tons of code that is very understandable very well commented it's just a rule of thumb the more code usually the more effort it takes to understand it also in the case of HTML CSS does it require extra elements do I need to add extra elements to make this work that's a problem because it makes I have to it I have to change two things to make the solution work so it's sort of it it's more things that I have to know about the code to work on it and is it straightforward that's which which cannot be strictly defined but you know when the code you've written is not straightforward right you know that this to skew the pseudo-element example is not straightforward in any definition of the word right it's it feels hacky it feels bad it feels like this is not what we should be doing that means it's usually it's not maintainable and extensibility is how easy it is to add more things in the future how easy is it to extend what it does for example in the in the pie chart case can I add multiple segments what if I don't want to just show one percentage but I want to show multiple that's it something that we can foresee doing can we do it or do we have to completely change how we're styling our pie chart also can we have a patient can can we animate either the whole thing and make and turn it into a spinner or just the pie the pie segments as they appear can we show them with a transition or can I have effect can I color the segments with gradients for instance or patterns or something so in the case of the skewed Suellen pseudo elements yeah I can change the colors in one place I can change the size in one place I need to make four edits to change the value ah well in the simple case I can only make one at it if I'm changing it from 10% to 20% in the general case I need to make four edits if if it goes from below 50% to above 50% and it's not possible to set the value in line because my transform is in the pseudo element so I can't set that in line the good thing is it's not using any extra elements it is using 14 declaration in four rules which for a simple tried pie chart are a bit too many and it's terribly messy in hockey most importantly extensibility wise I can sort have multiple segments I can sort of animate I can sort of do some effects it's a pain in the ass to do any of these so it's sort of okay but still overall the skewed sewer element is a bad idea can we do better let's let's try to think of a better idea how can we show custom angles in a circle in CSS how could we show custom angles we we try to secure transforms it didn't work very well what else do we have we have rotations can we do it can we make it work with rotations what if we call it our circle half of it being our base color this f06 this magenta and the other half being gold stay with me here so let's try to do that for a bit so now I have a gradient but it would turn it will turn into what I've described very quickly so these will come together and actually this doesn't even need to be 50 it could be anything it could be zero as long as it's smaller than the previous one it works so I will tend to use zero and all the in any gradients you might see in the future in this talk it just means it's equal to the previous one the browser does this for you so you don't have to type it twice so there I've colored my circle with two colors so now what if I add a pseudo element that is also magenta f06 let's set this and I move it to the side by margin left 50% I give it a height of a hundred percent and of course now it's square I could either solve it this by overflow:hidden or I could solve this by nice use of border radius so I want to make it a semi circle right so 50% won't work what will work is if I use the extended border radius syntax which lets me set the different on every corner both horizontally and vertically so I let's think about it I want a semicircle on the bright side so the top right the top left corner is zero has has no rounding horizontally the top bright one has a hundred percent the bottom right one has a hundred percent and the top-right one has a hundred percent and sorry zero and vertically it's fifty percent so there we have it I can give it a different color if you don't believe me that this is actually my element it is my element so it's a semicircle now and this is where the magic begins because now I can start rotating it and it's almost almost getting there what do I need transform origin which will be on the left center so left and there it is now so you might be wondering why is this better than the previous one well for one I don't have weird artifacts when I get to a hundred and eighty I just need to change one thing and it works and also it still needs us it still needs a class to get to the show percentages over 50 percent ha but the only thing that's needed here to show percentages over 50 percent is to set a background of gold to my pseudo element and then I can show any percentage I want over 50 percent see the bottom pile I can show any percentage I want on it so it's sort of slightly slightly more straightforward you might start thinking well I've repeated my colors and stuff in many places so that's not very maintainable yes I have but I can eliminate that repetition let's eliminate the repetition so here I've set it to f06 but it's in a gradient so I can't really use it anywhere else instead I'm gonna set it to transparent and I'm gonna move the color as a background color so now instead of retyping f06 here I can just inherit but if I just didn't hear it on the background you see what happens because it inherits the whole to color background so I have to show it to change this the background color also okay you might be thinking okay you did this with the background color but what will you do about gold because otherwise we would have to repeat it here well actually we don't because I can just set the color to gold and then I changed this gradient color stop to current color which always refers to the value of the color property if I change this to say green then it changes in the gradient so now I can set this to current color as well because color is an inherited property so my studio element also has a color of gold and now if I change it it changes in both places and also I can make this a little more sensible by using turn units so now this is 10% and a corresponds to point one turn so I don't have to do weird weird math with angles 20% 30% and so on and yes above above 50% it would have to reset again like 50% corresponds to zero turns and 60% is point one turns but compared to what we had to endure with the skewed hack with the skewed element hack that's slightly better and can I animate it with it with the skew transform it was a it was a huge pain to even attempt animation on it here it's not super straightforward but we can do it we will need to animate two things the color and the rotation so the color will go from we'll alternate between current color and inherit and the spender rotation will also will go from 0 to 0.5 tonnes and we have to remove this one it just gets the default of 0 by the way you notice I didn't use from and two key frames this is because when you don't specify from a new key frame or from or two key frames the browser generates them for you so in this animation the from key frame is just rotate zero which is the state of this rule that will apply it on so we set the color over we animate the color over two seconds actually let's do it wrong first so that you see what happens this will be linear they will both be infinite oh and here we're doing a background color again not background so you can see the problem the caller doesn't actually abruptly change it smoothly changes which is usually great this is why we love CSS animations in this case though we wanted it to abruptly change it's 50% so what do we do we specify an animation timing function of step start and when we apply it there we have an animating pie chart now however we might be thinking well what we actually wanted was not an animated pie chart it was just a simple little tiny static pie chart we just wanted to show different percentages on a static pie chart so what can we do the thing is the browser knows how to progress an animation what if we could just tell the browser stop the animation at 10 percent or stop the animation at 50 percent stop the animation at 80 percent this is exactly what we want to display a percentage and then we would be able to just change one value and display a custom percentage why don't we have something like this in CSS like an interpolate function or something like this well sadly we don't but we can hack it with what I call static interpolation which is not actually a real thing interpolation is when you is figuring out the intermediate states between two keyframes and static just means that I'm basically going to be using an animation but nothing will actually animate so let's let's examine it first on a simpler animation let's write the keyframes rule here let's call it foo and let's make it go from gold to f06 you'll see a lot of f06 here it's my favorite color so let's attach it here let's give it two seconds or maybe five whatever and you can see how it switches from gold to f06 and the browser knows all the intermediate stages but how could we make it how could we say I want the background to be 50% between gold and f06 there's no function for that however what we could do is there is a property animation play state which is by by default it has the value the value running but it can get the value post which poses our animation okay big deal you might be thinking I would just have gold and nothing else yes but we have this amazing property called animation delay which doesn't look like much when you first see it because it's basically it may delay your animation by a bit so we've animated but your normal animation from gold to f06 would look like this over time say with a 10 second duration an animation delay of one second would shift it over time and it would start one second later not very useful right but you can have negative and delay and what did let what that does it shifts it on the other direction so you can actually step through your animation and if your animation is paused what you get is this the study of creams that the browser generated and no animation so let's try this let's use that seconds here and animation delay say - 5 seconds so yep I'm not sure if you if it shows very much but we're basically stepping through the animation it starts showing you an awful lot like f06 after a certain point alright because we need to make it linear otherwise its accelerates after a certain point so after 50% the values are very similar so yes this is actually 50% between these two colors and let's make it a hundred so that these actually correspond to percentages so this is 50% this is 25% this is 75% and 99% what do you expect - 100 seconds to show it should show f06 right nope and the reason for that is that basically you're stepping through the animation as if it actually was it was actually playing it's just that it's paused but it's it's the same thing as if it was playing and what happens to an animation of it after it finishes it snaps back to the beginning unless you use animation film mode for words and then this means when the animation ends freeze the last frame and just show me that I don't want you to snap back to the beginning I don't want you to do anything just show me the last frame and you don't even need a separate property because it's part of the animation shorthand so you can just add it here so let's go back to our pie chart here let and let's convert it to use animation delay first we remove the infinite iterations because we don't need that anymore we'll just be statically going through it we do need to add two iterations here because its duration is half and then we add forwards to both of them or actually it's probably best to do a separate declaration here just so that we don't repeat it remember dry and animation delay let's ah let's make this a hundred so that we actually have numbers that could do correspond to percentages since the durations don't really matter anymore and our animation play state as well because right now you see it's playing it's very slow but it's still playing let's pause it let's set a delay of say minus ten seconds and let's reapply it yes this is ten seconds we want to show 20 percent yes this is 20 percent 30 percent and so on we can just set the percentage by changing one number and it works even at a hundred percent so this is already a huge improvement you might be thinking though thank you you might be thinking though this is inside the pseudo-element we can't set inline styles and pseudo elements so okay you made it changeable by one property but what good does it do may still can set it by a JavaScript but we don't have an animation on the main element do we so animation delay on the main element won't do anything right so I can just inherit it here and then I can set it on the main element and this could be an inline style thank you so rotated pseudo-element one cut one edit to change the color one to two edits this change the size one edit to change the value that's the big improvement here and we can set it in line very big improvement it doesn't use any extra elements still has a lot of code somewhat less hacky but still can affordable you can't have multiple segments that's a pretty big limitation because you know pie charts often used I often show multiple percentages it is possible to animate we've already seen it we can't really do any effects due to how it works and this whole happiness of like uncovering half of the circle know that maybe we can do a few limited effects but not really so overall it's not really that great so can we do better how well we could use SVG and the reason SVG the thought of using SVG on this would give most people shivers is because most people would think of doing pie charts by this way very little CSS and a path with very weird numbers you can see this path syntax what does it do how does it work how many people here can understand what all these numbers here do yeah only the person who created SVG I can actually tell you what they do the first command moves it to 50/50 the the point 50 horizontally and C and 0 vertically and then it draws an arc with the 50 50 the point 50 comma 50 is its center this one and it throws an arc with a radius of 50 to this point which is 40 point 80 on the coordinate system of the SVG which have defined in the view box okay and how do I figure out what point I want how do I figure out what the end point of the path should be for dica my idea okay that makes sense because I actually wanted to show a percentage of like 30 something percent how do you figure out these numbers I have to do a lot of trigonometry and I would really rather not is there any better solution there is of course so here's an SV here's another SVG it's it's an it's an HTML element as well it's an inline SVG so it has a class of Pi I've divided defined its units as 64 width and 64 height you'll see soon why this weird number it just makes some calculations easier and it has a circle with 25% its radius so what can we do with this per circle we can style it with CSS we can give it a stroke yeah the SVG version of CSS is a little different we can cancel its fill so that we don't have this horrible none this horrible black we can set stroke width and one is the default where we can make it thicker and there's also another property called store stroke dezirae which lets us do custom dashed borders in CSS this sets the dash width this sets the dash gap so you can do some pretty trippy things if you increase the stroke as much as the radius so that there's no circle and just stroke oh and let's give it a background because remember this points to the SVG element which is just another HTML element so you can give it normal CSS properties like background or border radius so we can do some pretty cool stuff but okay let's not get distracted because that's rays cool let's remember we were trying to do pie charts how do pie charts relate to this well I could increase my gap a lot like seriously a lot like as much as the circumference of the circle and well I could just do this by trial and error I'll could just calculate what the circumference is this is where these weird numbers come in so my radius is 25% of what of 64 because that's my view box so 25% of 64 and then remember what's the formula for the circumference of the circle two times pi times R we have the R we need to multiply by 2 and pi so this is our sin cumference a little over a hundred and why is this convenient because then as long as we set the the gap width to be as much as the circumference the dash width basically corresponds to the percentage we want to show in our pie so we can set any percentage we want with just this one property it corresponds to the percentage were actually trying to show okay I know what you're thinking it doesn't have the right orientation let's fix that remember we can play regular CSS properties here so let's do - okay and there we can show any percentage we want just by adjusting this one number can we animate hell yeah yeah I'm not very good with names as you as you might have noticed just foo and let's make this zero so there's our animation just one line one simple animation one line two it's basically as simple as it gets and you can have multiple segments here here's how I've used attributes here you don't have to use attributes I've just used them so I can have my whole thing in one place SVG has these weird inline Styles that are basically attributes but they're different from inline Styles so it has both it has inline Styles as well and it has attributes attributes have zero specificity so they're kind of like the opposite of inline Styles if I apply any CSS to this it's a the it overrides the attributes but for all intents and purposes in this case they treat Emma's properties so you can just use - offset if you want to have multiple segments you can just add another circle give it an offset so that it doesn't cover the other one and you can have as many segments as you want this is actually a real pie chart you can see that most of the CSS working group is member companies like browsers basically so next time somebody tells you that browsers just have to implement whatever standards w3c Springs on them you know you know better flexibility we can change the colors in with one edit we can say is that we can change the size within to edit we will probably make it with one as well if we really try one edit for the value we can set the value in line yes we do need extra elements but we can just write a short JavaScript script to add these seven declarations only it's the shortest solution we've seen so far it's pretty straightforward by the way if you're wondering about accessibility any SVG element can have a tight little child so you can just have a title element inside it and all the content you want multiple values are possible it's easy to animate we've seen it effects are possible don't mess it because you have to use SVG syntax for adding safe gradients or patterns and it's not a great syntax but it's possible so overall the SVG stroke - array method is pretty much beats both as which CSS methods we've seen can we do better so here's their night another idea how many of you have heard about conic gradients how many of you have heard about Kony gradients in the context of CSS cool nice so this is a conic gradient basically it's a ray changing color and rotating around a fixed center point the gradient I'm making right now has nothing to do with pie charts it's just a cool gradient it's basically the hue wheel that you see on all color Pickers we would be able to do it with a conic gradient and okay let's not get distracted pie charts pie charts so how do these help us do pie charts well we can just have a conic gradient like this with two stops there it is remember zero is equal to thirty percent but so that we can change the percentages one place so yeah basically it's one line of code and we can show all the percentages we want just with this one line do we thank you and what if we want multiple segments well easy-peasy there you go that's not a great percentage let's do something nicer yeah all right 60 yeah that looks better so there you can have as many segments as you want still one line of code and that spec is in CSS images level four and actually it has many nice examples it has the pie chart as an example I made sure I I added this so I made sure to include that you can even have repeating gradients which may likely do starbursts you contribute checker boards with conic gradients so let's evaluate this solution flexibility wise wanted to change the colors one edit to change the size wanted to change the value we can set it in line you can just set the gradient no extra elements only three declarations the other two of which are border radius and padding very straightforward just one line multiple values are possible super easy to animate just animate the colors top position some effects are possible you can just instead of doing the same color stop just do two and then you can have a small gradient okay that's sort of a bad thing about it the effects are difficult but still overall it's a pretty awesome solution except one little thing this is the browser support yeah come on come on browsers please especially Microsoft can implement it more easily than any others and actually Microsoft has put it on the backlog which means they are actually actively interested in their planning to work on it and you know how it works once one browsers it implements it the others follow here's you where you come in actually many developers think that browsers decide what to implement in a vacuum and it doesn't matter what developers want what developers want is the primary motivation for prioritizing what to implement sure if developers want something that's super difficult to implement like a parent selected like the parent selector yeah that's that's more difficult to get browsers to do to do it but in general browsers have teams that whose entire jobs are to monitor what developers want every browser maybe except Apple because Apple doesn't really care but every browser has a developer relations team which whose main purpose is to connect with developers see what they want bring it back to the browser so where do you where do you come in you can you can tweet about it you can vote on Microsoft's user voice which actually all the browser's follow it not just Microsoft you can vote on the bugs if you have anything useful to add you cannot comment on the bug reports there are bug reports on with every major browser on this your voice matters as long as you make as long as you make sure that you're heard it matters and you can make browsers implement what matters to you and that doesn't just apply to connect gradients it applies to anything it's like the closest thing we have to direct democracy so the other thing is okay like I've just said no browser implements connect gradients so what was I showing you right now I mean have you've seen that my slides are basically an HTML page in chrome so what was I showing what is this so I've actually made and released a polyfill it's on this address don't get hub and there's even it works with prefix-free but there's also a post CSS plugin we're using the same code you can you don't you can play with it directly on the page these are live okay that's a bad choice these are live you can edit them right there if you want to experiment with conic gradients so after spending 40 something minutes telling you how to make pie charts I actually pie charts a good idea how many here have heard of Edward Tufte he's like the information visualization master he is a very big name in information visualization he's written tons of books he runs tons of workshops so one of the things he's often quoted as saying he wrote it this way in one of his books 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 spite in spatial disarray I will explain what this means shortly both within and between pies given their low data density and failure to order numbers along the visual dimension pie charts should never be used okay he does have a point he's not always right he's not right in every case there are several exceptions but he does have a point look at this pie chart which slice is bigger which slice is smaller can you rank can you order them based on an order of which percentages in an in order of size of percentage they're very similar right it's hard to do it with a bar chart you can instantly see that they're actually the same and I've been trolling you all along what about this one which one's smaller which one's bigger it's kind of hard to tell with a bar chart you can we can do it instantly well yes this applies when you have a pie chart of multiple percentages very close to each other when you want to show a trend pie charts are great when you only want to show two percentages maybe three and they're not that close together but you want to show a trend pie charts can be a good idea and in some cases pie charts shine if you want to show whether it's if the important bit is whether something is lower or higher than 50% this is much easier to show with a pie chart than it is with a bar chart however does it really matter this top was never really about pie charts right thank you very much

Channel: JSConf

Views: 19,740

Rating: 4.9191918 out of 5

Keywords: CSS, Lea Verou, CSSconf EU, talk, SVG, pie chart, Web Design (Interest), Cascading Style Sheets (Programming Language)

Id: eVnUDTtOLE0

Length: 43min 20sec (2600 seconds)

Published: Tue Oct 13 2015