SVG изображение и HTML / JavaScript страница для взаимодействия с SVG

Необходимо нарисовать SVG изображение, представляющее из себя два круга, один в другом. Внутренний круг представляет из себя несколько групп вкусов (например - пряные, кислые, сладкие и т.п.), внешний - конкретные вкусы (например - цитрус, апельсин, лимон и т.п.). В приложенном файле можно видеть пример. Актуальный список групп / вкусов будет доступен немного позднее. Инфографика приветствуется.

Изображение нужно вставить в HTML страницу и написать JavaScript / jQuery функции, которые будут делать следующее:

- при загрузке страницы обращаться к HTTP API и запрашивать список вкусов в формате

[

  {

    "flavour": "orange",

    "inStock": true

  },

  {

    "flavour": "lemon",

    "inStock": false

  }

],

если API отвечает, что вкус есть - подсвечивать вкус, а также группу вкусов, в которую данный вкус входит, нет - затемнять;

- при клике на вкус или группу вкусов - callback, который должен возвращать, кто его вызвал - группа / вкус и его название.