Consider using pie charts for nutritional values

[aleksejrs]

Why

• It's hard to understand nutrient ratios in a table. At least the current product could have one (for P/F/C/other_major_stuff/the_rest and tooltips or lines if text cannot be fitted).

What

Small pie charts could be put into the columns of each table.

Part of

• product page

[hangy]

This donut chart could be cool to include "hierarchial" data (total fats, saturated unsaturated fats, …). We already use Highcharts for the product history, so this should be pretty straightforward.

[aleksejrs]

When space is restricted (a small chart): Russian milk has about 11% divided among 3 nutrients, so including "the rest" would make the chart almost useless. An example of a nutrient-only chart on Russian milk: http://static.openfoodfacts.org/images/products/464/001/735/0536/nutrition_ru.9.full.jpg (left; the one on the right shows energy)

[aleksejrs]

A variation of donut chart showing empty space where the depth does not reach the maximum depth (requires more space to be clear): https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_.2F_Sunburst_chart_.2F_Multilevel_pie_chart (like Baobab or Filelight: https://commons.wikimedia.org/wiki/File:Disk_usage_(Boabab).png ) There is even empty space for "the rest".

[hangy]

The best match that I've found in Highcharts (up to now) would be http://jsfiddle.net/eonkddx3/, because the donut chart does not seem to work well with a lot of "rest"/undefined nutritional values.

[aleksejrs]

What about showing "rest" using the size (diameter or area) of an additional inner circle (or an outer annulus)?

[aleksejrs]

Maybe some kind of absolute maximum of energy per 100 g could be found, so that it looks proportional to the nutrients and can be rendered as a part of an annulus with a starting point.

[aleksejrs]

There are approximate energy densities for some nutrients (e.g., the table at the bottom of https://en.wikipedia.org/wiki/Food_energy#Nutrition_labels), that could be used to connect their parts in a render with separate segments of the energy annulus for each nutrient (fun, but maybe not worth it), or to really compare the average amounts with the stated ones and other data.

[aleksejrs]

There are some implementations using D3.js: https://github.com/d3/d3/wiki/Gallery Most of them need adding text and a state indicator, or contain third-party data and have no license specified.

• Various sunburst charts, including: Zoomable Sunburst (GPLv3, no text) Coffee Flavour Wheel (Zoomable Sunburst with text labels, no license specified) ** Sunburst with Distortion (GPLv3)
• Many treemaps, like https://mbostock.github.io/d3/talk/20111018/treemap.html
• Zoomable Icicle (GPLv3).

Two years ago someone made his own implementation (code, MIT license in the master branch; article in Russian about writing it) and said D3.js was too big, and that it used SVG and so was too slow for mobile.

[teolemon]

http://duns.ethz.ch//request?query=ProductDetails&xml=MessageData&xml=MetaData&xsl=ListDetails&productId=131&lan=en&letter=A&pageKey=ListDetails

[hangy]

After some research, to me, it looks like Sunburst diagrams are really cool for displaying larger amounts of data with a little bit more depth/levels. But for what we have with nutrition values, a pie chart is more appropriate and doesn't require as much space.