The overwhelming response to Pizza, our responsive pie charts, had us thinking that we could deliver up more than a slice of pie. So we went back into the kitchen and expanded our menu. Today, we're pleased to introduce our brand-new responsive charts and graphs, which we call Pizza Amore! (OK, we were listening to a lot of Dean Martin when we came up with the titles.)
What's in Pizza Amore!
- Bar Charts: You can use an unordered list with data attributes to define the height of each bar. CSS makes it easy to change the color of the axis and bars.
- Line Graphs: Simply use an unordered list with data attributes to define both the X and Y axis of a line. Like the bar charts, you can use CSS to change the color of the axis, lines and bullets. And it's easy to have more than one line per graph.
- Pie Charts: Pizza is still there so you can use an unordered list to create both pie and donut charts.
- Pepperoni
- Sausage
- Cheese
- Mushroom
- Chicken
- Other
Pizza Amore is naturally responsive (read: not hacked to be responsive), so you can easily plop them into your next mobile first project. We made use of HTML data-attributes so your data lives with your markup and not in a JavaScript file or footer. The charts and graphs uses pure SVG so they can scale without losing quality. An easy Sass mixin helps easily create a simple monochromatic color scheme. We even took advantage of Adobe's new cutting edge animation library, Snap.SVG, to make the animations as smooth as a Chianti.
If you can write an unordered list, you can make a graph. There's no graphing library so you can get right to kneading the dough of your data.
It Takes a Product Engineer to Make a Product Designer's Pie
The first version of Pizza came about when we were tossing out ideas for potential Playground pieces. One thing was certain: data was becoming a big part of the web experience. We'd never seen anyone do a dynamic pie chart. Could it be done with an unordered list? So we walked over to one of our engineers and asked. The response: "why not?"
Here's where we leveraged a product engineer to solve a product designer's problem. As designers, we often don't want to tinker too deeply in some JavaScript file. So working with our engineer, we looked into making Pizza use CSS and unordered lists to all our lives easier. We added Sass so it was possible to change the entire color scheme at once. Amore continues that process. We took what we learned from our pie charts to create the additional bar chart and line graph. And while we were in there, we also took the opportunity to fix a few bugs with the original.
Pizza Amore was originally going to be part of Foundation 5.1. But it wasn't quite ready for Foundation prime time ' at least, not yet! We're still experimenting so that we can make it the best tool for our Foundation users. But that didn't stop us from putting some of our work out there for you to start using on your next project. We've already started using it ourselves too!