Important

This slide deck was created for use in a controlled environment, during a talk. It works best with Chrome at 1280x720 or 1024x768. It WILL NOT work properly in other browsers. The demos were live coded, so these slides are a bit pointless if you never watched the talk.

The Missing Slice

By Lea Verou (@LeaVerou)

Picture of me
Hi, I’m Lea

#funfact

I grew up in Lesbos, Greece

…which technically makes me geogrpahically Lesbian

CSS WG Invited Expert

MIT Haystack Group @ CSAIL

CSS Secrets by O’Reilly

Pie charts are everywhere!

Can we make pie charts with CSS?

What I think about during a talk

The talk content

How much I have to pee

0-9 minutes
10-29 minutes
30-49 minutes
50+ minutes

Time elapsed

Idea: Skewed pseudo‑element

There, I solved it!

“Pure CSS” is not good enough

Evaluation

Flexibility

Maintainability

Extensibility

Flexibility

Maintainability

Extensibility

Skewed pseudo‑element

Skewed pseudo‑element

Skewed pseudo‑element

Skewed pseudo‑element

Idea: Rotated pseudo‑element

transparent, currentColor, turn unit,
animation (color 50% inherit, spin to .5turn)

Static Interpolation

animation-delay


@keyframes bar { to { background: #f06; } }

.foo {
	background: gold;
	animation: 10s bar;
}

infinite, 2x iterations, forwards, inherit delay

Rotated pseudo‑element

Rotated pseudo‑element

Rotated pseudo‑element

Rotated pseudo‑element

Idea: SVG

W3C CSS WG composition

W3C staff (5)

Member companies (83)

Invited Experts (8)

SVG stroke-dasharray

SVG stroke-dasharray

SVG stroke-dasharray

SVG stroke-dasharray

Idea: Conic gradients

Conic gradients

Conic gradients

Conic gradients

Conic gradients

Except one little thing…

Conic gradients Browser support

Come on, Microsoft

Come on, Google

Come on, Mozilla

Come on, Opera

Come on, Apple

Are pie charts a good idea?

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 charts should never be used.”

— Edward Tufte, The Visual Display of Quantitative Information

This never really was about pie charts