Category Archives: Visualizations

Rethinking Nutrition Calculators

I’ve created a Visual Nutrition Calculator that allows you to visually inspect a restaurant’s menu based on the relative calorie, fat, protein, and carbohydrate values of the food.


The idea is to give a different view of a restaurant’s menu. Rather than picking your meal based on pictures, or choosing a meal and then seeing how many calories it has, the idea is to find and pick items based on their health characteristics. Additionally, a nutrition table is supplied at the bottom that lets you see the stats of your selected choices. You can even view the percent of calories that come from protein, fat and carbohydrates.


The bubble chart idea came from a cool presentation by Jim Vallandingham on D3.js’s force layout. I had been looking for another side project to do with the D3 visualization library, and after playing around with Jim’s example bubble chart, I thought it might be fun to try and make my own. I just needed an idea of something to visualize.

Fast forward a few hours and its dinner time and I’m at I’m toggling the different selections to see how they effect the output and suddenly it hits me! Nutrition calculators have been around on the web for almost two decades. And sadly, they haven’t really evolved much. You check a few boxes, maybe click on a picture of a hamburger, and then you push a button to see how many calories you’ll be eating. The tools don’t really help you make a healthy choice.

Using a bubble chart, I knew I could make a calculator where you could easily see the health impact of each item. It’d be sort of like WiseGeek’s What Does 200 Calories Look Like, except it’d be of what you’re currently thinking of eating.

I started the project shortly before I posted my entry on visualizing data and I was originally going to include a whole host of helpful visual aids. My favorite being a sugar cube visualization that would show you the equivalent amount of sugar cubes you’d be eating (similar to Sugar Stack’s How Much Sugar is in Sodas pictures), but I nixed the ideas in favor of just finishing the main idea – I’m bad about starting projects and then not finishing them. Though I still like the sugar cube idea – I think it’d be a cool addition to nutrition calculators.

The Patent…

So I had just finished writing my nutritional calculator and was working on this blog entry when I discovered something that made my heart sink. It turns out there’s a reason that there hasn’t been a lot of movement in the nutrition calculator area, and that’s because back in 2003 the US government granted someone a patent for “Method and system for computerized visual behavior analysis, training, and planning” that covered most of the base aspects of a nutritional calculator. It’s two major claims being:

  1. A system of computerized meal planning, comprising:

    1. A User Interface;
    2. A Database of food objects organizable into meals; and
    3. At least one Picture Menus, which displays on the User Interface meals from the Database that a user can select from to meet customized eating goal.

  2. A system of computerized meal planning, comprising:

    1. A User Interface;
    2. A Database of food objects; and
    3. A Meal Builder, which displays on the User Interface meals from the Database, and wherein a user can change content of said meals and view the resulting meals’ impact on customized eating goals.

    I couldn’t believe my eyes. How could something so general be patented? What was the US patent office thinking?!

    I googled around and discovered the patent holder had been aggressively going after anyone they felt violated their patent. I went back and studied their patent information and sample images. Only their second claim didn’t involve pictures of the food, and that claim seemed to center around a Meal Builder and “meet[ing] customized eating goal[s]”. According to “summary of the invention” section of the patent, the Meal Builder was based around to picture menus. Looking at their sample images (Fig 9), I noticed they had alerts pop up when food parameters like fiber got too high. I reasoned with myself that nothing about mine used pictures or gave advice about goals in general, so I should be safe. But I still felt uneasy. It wasn’t until I came across some recent news stories that I felt comfortable again.

    Bravo Gets the Patent Invalidated

    To my relief, one of the companies sued back in 2012 – Bravo – decided to fight back, and in July of this year they got the US District Court for the Southern District of New York to invalidate the patent. Additionally, earlier this month a batch of Texas lawsuits that the patent holder had filed were dismissed due to collateral estoppel. The patent holder plans to appeal the NY ruling, but for now it looks like its safe again create nutrition calculators.

    Prior Art?

    So near the beginning of this article I mentioned that nutrition calculators had been on the web for almost two decades. Using the Internet Archive, I was able to find one by the Hearst Corporation that existed in 1996. It’s been defunct since early 2007, but finding it took around 10 minutes.

    If these types of apps existed in 1996, how was someone able to patent one in 2003? I’m actually not sure – and in a bizarre twist, the patent holder actually filed a lawsuit against the Hearst Corporation over a meal maker that they created for in 2011. The last I could find on the lawsuit was that it was being transferred to the Southern District of New York along with the Bravo case in late 2013. I’d be curious to know if the Hearst Corporation was aware that they had previously created a nutrition calculator back in 1996. Hell, I wonder if anyone involved in any of the cases actually took the time to see if a nutritional calculator existed in the Internet Archive.

    Another Patent…

    While researching the meal planning patent I also came across another patent that gave me pause. This one involved visual size and nutritional characteristics:

    A system is shown to teach individuals the relationship between the visual size and the nutritional characteristics of portions of food by using either a life size image of, or the corporeal finger of the individual as a scale against life size images of different sized portions of different kinds of food, while showing the nutritional characteristics of such portions; and to adjust the relative sizes of portions of food to provide a nutritionally well-balanced meal.

    This patent is now expired though, so thankfully there was no need to worry.

    Final Thoughts

    Even though small projects are unlikely to be the target of patent holders, it sometimes happens. I’m glad Bravo decided to challenge the meal planning patent. It costs them more money than settling*, but it makes things better for the little guy.

    I think visualization tools like D3.js could be really useful for nutritional sites. This app is really just sort of a proof of concept / prototype. I made it mostly just for fun to see how it would turn out. However, if I were running an actual nutrition site, I could see all sorts of crazy possibilities for something like this.

    * I originally came across the patent when I was using the Jimmy John’s nutrition calculator. The patent information is in small grey text under the “Add to Meal” button.

    Visualizing data for CS related jobs

    In honor of labor day weekend, I thought it might be fun to create a visualization of data from the US Bureau of Labor’s website. For those unfamiliar with the BLS, here’s a quick run down from wikipedia:

    The Bureau of Labor Statistics (BLS) is a unit of the United States Department of Labor. It is the principal fact-finding agency for the U.S. government in the broad field of labor economics and statistics and serves as a principal agency of the U.S. Federal Statistical System. The BLS is a governmental statistical agency that collects, processes, analyzes, and disseminates essential statistical data to the American public, the U.S. Congress, other Federal agencies, State and local governments, business, and labor representatives.

    Included in this data collection is worker compensation, which is normally a pretty secretive topic. Many companies have rules prohibiting you from discussing your salary with colleagues, and it’s almost always a terrible idea to tell someone your salary. But not knowing what other people are making makes it hard to judge if you’re being paid fairly or not. This is why these stats are so interesting.

    On their page for Computer Programmers, they provide the data they’ve collected as well as a number of tables and map visualizations, relating to employment rates and salary. Even though these tables and maps cover a lot of ground, the raw data set has a lot of information that isn’t shown on the page, like the 10th, 25th, 75th, and 90th percentile rankings for all of the different geographic areas measured. I thought it might be cool to try and come up with an interactive visualization that allowed you to easily see and explore this information.

    You can see what I came up with here, or just check out the screen cap below (there’s over 480 areas in the actual chart, so below is just the top 14 best paying areas – for “Computer Programmers”).


    As you can see above, I decided on a chart where each geographic area was on its own line and its percentile data was color coded and plotted on a linear scale. I felt this made it easy to scan through the data and prevented any information from being hidden. I also put in some filtering options so you could narrow the data down to compare specific areas and specific job titles (e.g., Software Developer or Computer Programmer).

    Computer Programmer vs Software Developer?

    For some strange reason, the BLS has decided to distinguish between “Computer Programmer” and “Software Developer”. This goes against what many people think of when they hear the titles, and I honestly think it messes up their data set.

    Initially I was confused when Maryland ended up in the top two spots for “Computer Programmer”, and it wasn’t until I read the fine print that I realized what was going on. The BLS defines a Computer Programmer as follows:

    Create, modify, and test the code, forms, and script that allow computer applications to run. Work from specifications drawn up by software developers or other individuals. May assist software developers by analyzing user needs and designing software solutions. May develop and write computer programs to store, locate, and retrieve specific documents, data, and information.

    They then define a “Software Developer, Applications” as:

    Develop, create, and modify general computer applications software or specialized utility programs. Analyze user needs and develop software solutions. Design software or customize software for client use with the aim of optimizing operational efficiency. May analyze and design databases within an application area, working individually or coordinating database development as part of a team. May supervise computer programmers.

    Aye yai yai, whoever created these definitions doesn’t know the field. I imagine a lot of people marked themselves down as “Computer Programmer” without realizing what the BLS thinks it means. It’s even clear from the stats that they’ve captured. For example, “Santa Fe NM” has really high paying jobs for “Computer Programmers”, but so-so paying jobs for “Software Developers, Applications”. If Computer Programmers really answered to Software Developers, this wouldn’t make any sense.

    Which title a person chose was probably due to its regional use, and since the BLS has decided on their own definitions, the stats can’t be completely trusted. However, I still think they’re interesting, and I’ve gone ahead and added several Computer Science-related fields to the visualization’s Options section. At the very least, I think the stats give a good idea of the range in pay for different areas.

    Anyway, I put this together mostly because I thought it would be a fun little project. I’m not a payroll expert, and I’d honestly take this information with a grain of salt, so please don’t make any major life decisions after playing around with the visualization.

    Creating a d3.js Game of Thrones Visualization

    For any Game of Thrones fans out there, I’ve created a neat little interactive visualization. It ranks characters by how many episodes they’ve been in, makes note of who’s alive and who’s dead, and allows you to go backwards in the show’s history to see how things have developed over time.

    It also reveals some interesting stats:

    • After 40 episodes, the show has around ~140 notable characters.
    • The show seems to kill an average of 13 notable characters per season, or 1.325 per episode.
    • 37.1% of the notable characters have been killed off so far.

    You can see a spoiler-free version of the visualization below (character avatars and death information has been removed):


    The chart is written on top of d3.js, which is a web-based visualization library. I learned how to use it earlier this year and have been on the lookout for projects I could use it for. After seeing the bubble chart from Matthew Daniels’s Largest Vocabulary in Hip Hop visualization and noticing it was based on an example by Amelia Bellamy-Royds, I decided to see if I could create my own bubble chart.

    D3 Context Menus

    I didn’t see any d3.js context menu plugins while doing this project, so I wrote my own. I could have used a jQuery plugin, but I wanted to keep as much of the code within the D3 way as possible (it just made working within their event structure easier).

    Other Game of Thrones Visualizations

    So there’s are plenty of other Game of Thrones visualizations out there. If you’re looking for more, I’ve compiled a short list below of some of the best ones I’ve found.

    • Events in the Game of Thrones – A visualization of the events from the first 5 Game of Thrones books.
    • Game of Thrones Map – Interactive map of the Game of Thrones universe.
    • Beautiful Death – A piece of artwork drawn for each episode in the show. I’m not sure if this technically counts as a visualization, but they’re pretty cool.