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.
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?"
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!