Color is pretty good for separating things. That’s what your basic pie chart is, isn’t it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination.
Patrick Dillon tackled the Pie Chart thing
When one of the slices is filled with something more than color, it’s easier to figure out [who the Independents are]:
Filling a pie slice with a pattern is not a common charting library feature (yet), but if your library of choice is SVG-based, you are free to implement SVG patterns.
As in, literally a
<pattern /> in SVG!
Here’s a simple one for horizontal lines:
<pattern id="horzLines" width="8" height="4" patternUnits="userSpaceOnUse"> <line x1="0" y1="0" x2="8" y2="0" style="stroke:#999;stroke-width:1.5" /> </pattern>
Now any SVG element can use that pattern as a fill. Even strokes. Here’s an example of mixed usage of two simple patterns:
That’s nice for filling SVG elements, but what about HTML elements?
Irene Ros created Pattern Fills that are SVG based, but usable in CSS also.
There are several ways to use Pattern Fills:
You can use the
patterns.cssfile that contains all the current patterns. That will only work for non-SVG elements.
You can add your own patterns or modify mine! The conversion process from SVG document to pattern is very tedious. The purpose of the pattern fills toolchain is to simplify this process. You can clone the repo, run
grunt devto get a local server going. After that, any changes or additions to the
src/patterns/**/*files will be automatically picked up and will re-render the CSS file and the sample pages. If you make new patterns, send them over in a pull request!
Here’s me applying them to SVG elements (but could just as easily be applied to HTML elements):
The CSS usage is as base64 data URLs though, so once they are there they aren’t super duper manageable/changeable.
Here’s Irene with an old timey chart, using d3:
Managing an SVG pattern in CSS
If your URL encode the SVG just right, you and plop it right into CSS and have it remain fairly managable.
Other Examples Combining Color
Here’s one by John Schulz:
Ricardo Marimón has an example creating the pattern in d3. The pattern looks largely the same on the slices, but perhaps it’s a start to modify.
Other Pattern Sources
We rounded a bunch of them up recently!