This is an example of using d3.layout.partition to generate a zoomable sunburst tree derived from hierarchical data. A sunburst tree is a radial space-filling visualisation, analagous to an icicle tree.
The original colours appear to have been selected by the designer, as opposed to matching any standard colour name palettes. So I painstakingly copied the colours from the outermost (leaf) nodes of the tree to match the original.
The inner node colours are calculated automatically by taking the average of the two child nodes in HSL colour space.
The label colour of black or light grey is automatically chosen by calculating the colour brightness of each node. If a label has more than one word, it is split into two lines and placed equidistant to the centre of the segment.
The original coffee flavour wheel was created by the Specialty Coffee Association of America in poster form but it appears in various places on the Web. Rogers Gourmet Coffee & Tea Market seems to have the most information about its origin:
…a flavor wheel created in 1997 by the Specialty Coffee Association of America, the Colombian Coffee Federation, and Jean Lenoir. It's part of the poster called, "The Coffee Tasters' Flavor Wheel" that you can buy on the SCAA website.
Built with D3.js. Sunburst zooming based on an example by Mike Bostock.
Thanks to Bart Mesuere for suggesting a performance optimisation for Firefox.
© Jason Davies | Privacy Policy.