The sunburst chart is used along with hierarchicaly typed data.

We prepare our data is first so to get a hierarchy consisting of

> GROUP->SUBGROUPS->FOODS_OF_SUBGROUP.

d => d.food_group.toLowerCase(),

d => d.food_subgroup.toLowerCase(),

// d => d.name

);

v => d3.count(v, d => d),

v => Array.from(v, d=>d.name) ,

d => d.food_group.toLowerCase(),

d => d.food_subgroup.toLowerCase()

Ayant une hiérarchie donnée, la méthode de navigation de la structure est flexible, nous pouvons par exemple penser a une approche *top down*; racine vers feuilles, ou inversement; en *bottom up*.

Notre approche sera une approche top down. Nous utiliserons l'attribut *children* pour naviguer la hiérarchie notamment pour la concaténation des éléments au DOM, chaque nœud porte l'information de ses coordonnées *(x,y)* et de son rayon *r*.

L'hauteur de la racine de notre hiérarchie est de 3.

Notre racine retourne un *undefined*, ses enfants directes; un groupe nutritif, dont les descendants sont les différents aliments.

'root&children':[hierarchy2bis.data, hierarchy2bis.children],

'1stchild&children':[hierarchy2bis.children[0].data[0], hierarchy2bis.children[0].children],

'1stgrdchild&children':[hierarchy2bis.children[0].children[0].data[0], hierarchy2bis.children[0].children[0].children],

'1stgedchASleaf':[hierarchy2bis.leaves()[0].data[1]]

children,

space = 300,

width = 500+space,

height = 500+(space/2),

fill = "white",

fillOpacity = .9,

stroke = "white",

padding = 3,

vb_pad = 10,

strokeWidth,

strokeOpacity,

} = {}) {

if(!(data instanceof d3.hierarchy))

throw 'Pump the jam'

const W = width - width/10

const H = height- height/10

const groupes = d3.map(data.children, d => d.data[0])

const color = d3.scaleOrdinal().domain(Array.from(groupes)).range(d3.schemeTableau10)

// Compute the layout.

function pack_data2() {

return d3.pack()

.size([W, H])

.padding(padding) // inter-cercles

(data);

}

const packed = pack_data2();

// Compute labels and titles.

const descendants = packed.descendants();

const feuilles = packed.leaves();

feuilles.forEach((d,i) => d.index = i);

let title = (d) => d.height == 0 ?

`${d.parent.data[0]}\n${[...d.data[0].split(',')]}\n`

: `${d.data[0]}\n` ;

// DOM

const svg = d3.create("svg")

.attr("viewBox", [-1, -vb_pad*2, width, height])

.attr('width', width)

.attr('height', height)

.attr('font-size', 10)

.attr('font-family', 'sans-serif')

.attr('text-anchor', 'middle')

.style('border', '1px solid black')

.style('stroke', 'black')

.style("fill", "none")

.style("stroke-width", '.03px');

const leaf = svg.selectAll("g")

.data(descendants).enter()

.append("g")

.attr("transform", d => `translate(${d.x},${d.y})`);

const circle = leaf.append("circle")

.attr("r", d => d.r)

.attr("fill", d => d.children ? d.height == 1 ? null : 'black' : fill)

.attr("fill-opacity", d => d.children ? null : fillOpacity)

.attr("stroke", d => d.height == 1 ? color(d.data[0]) : null)

.attr("stroke-width", d => d.height == 1 ? `${d3.max([4, padding-3])}px` : null)

.on("click", handleClick)

// title

.append("title")

.text(d => d.height < 2 ? title(d) : null)

// clef

const clef = svg.append("clef").attr("transform", `translate(${0},10)`)

svg.selectAll("text.clefs")

.data(groupes).enter()

.append("text")

.attr("class", "clefs")

.attr("font-size", "10px")

.attr("fill", "black")

.attr("x", width - 85)

.attr("y", (d, i) => i * 25 + 20)

.attr("text-align", 'left')

.text(d => d)

svg.selectAll("rect").data(groupes)

.enter()

.append("rect")

.attr("x", width - 105)

.attr("y", (d, i) => i * 25 + 25)

.attr("width", 40)

.attr("height", 10)

.attr("fill", d => color(d))

.attr("stroke", "black")

.attr("stroke-width", '.15px')

.attr("transform", `translate(0,-25)`)

return svg.node()

let arr = []

console.log(event)

let clicked_node = event.target.__data__

console.log(clicked_node.data[0])

let parent = clicked_node.parent

console.log(parent.data[0])

}

title: (d, n) => `${n.ancestors().reverse().map(({data: d}) => d.name).join(".")}\n${n.value.toString()}`,

width: 1000,

height: 1000,

padding: 1

data_fooDB = {

let group_map = {};

fooDB.forEach( food =>{

var group = food.food_group

var subgroup = food.food_subgroup

if(! group_map[group])

group_map[group] = {}

if(!group_map[group][subgroup])

group_map[group][subgroup] = []

group_map[group][subgroup].push(food.name)

});

return group_map;

(({ id, name, name_scientific, description, food_group, food_subgroup, food_type, category}) =>

({ id, name, name_scientific, description, food_group, food_subgroup, food_type, category}))(object)

Le jeu de données **food_h_parsed** contient énormément de descriptions, **cols_det** est un objet pour simplifier la logique de la sélection des données à extraire.

Ce jeu de données contient des descriptions sous la colonne *"name"*, pour concorder avec la partie AQR, l'objet **aqr_gObj** contient le nom du groupe alimentaire décrit dans la section de rapports nutritifs, et une petite sélection manuelle de noms qui tombent sous cette catégorie.

Une bonne préparation de ces données est malheureusement *time consuming*.

identification : ['name', 'serving_size'],

vitamins : ['vitamin_a', 'vitamin_a_rae','vitamin_b12', 'vitamin_b6',

'vitamin_c', 'vitamin_d', 'vitamin_e','vitamin_k'

],

main : ['total_fat',

'saturated_fat',

'sugars',

'calories',

'fiber',

'carbohydrate',

'protein',

'calcium',

], // How many on the screen first

more : ['irom', 'magnesium', 'sodium', 'water', 'caffeine', 'alcohol', 'cholesterol', 'lactose']

"Conserve" : ['canned'],

"Fruits et légumes" : ['Fruit', 'tomatoes', 'cherries', 'vegetable', 'berries', 'berry', 'grapes', 'eggplant',

'broccoli', 'pepper', 'cucumber', 'mushroom', 'seaweed', 'celery', 'chicory', 'pear',

'carrots', 'onion', 'peas', 'asparagus', 'raddish', 'apricot', 'celeriac', 'celtuce'],

"Fruits à coque": ['Nuts', 'quinoa'],

"Légumineuses": ['lentils', 'beans', ],

"Produits céréaliers": ['biscuit', 'pasta', 'bread', 'wheat', 'tapioca', 'cous ncous', 'pretzel'],

"Produits laitiers": ['milk', 'cheese', 'whey'],

"Viande et volaille": ['meat', 'beef', 'ostrich', 'lamb', 'turkey', 'egg', 'chicken', 'veal', 'pork'],

"Poisson et fruits de mer ": ['fish', 'salami'],

"Charcuterie": ['bacon', 'ham', 'sausage'],

"Matières grasses ajoutées ": ['oil', 'fat'],

"Produits sucrés": ['candies', 'sugar', 'syrup', 'honey', 'ice cream'],

"Boissons": ['water', 'juice', 'nectar', 'drink'],

"Sel et epices": ['salt', 'spice', 'cornstarch', 'sauce', 'flour'],

"Fast food" : ['mcdo', 'keebler', 'kfc', 'denny', 'taco bell', 'fast food']

d3.map(food_h_parsed, d => Object.values(d).every(x => typeof(x) !== 'undefined')).filter(n => n == false)

d3.rollup(base,

d => d,

d => d.name.toLowerCase().includes(str.toLowerCase())

)

Et grâce à ce dernier objet,

let map = new Map()

let apport_total = 0

for(let nutr of cols_det.main){

map.set(nutr, v[0][nutr])

if(nutr != 'calories' && nutr != "saturated_fat")

apport_total += v[0][nutr]

}

return new Map().set(map, apport_total.toFixed(2))

}, d => d.group,

d => d.name)

.sum(([,value]) => value)

.sort((a, b) => b.value - a.value)

.sum(([,value]) => value)

.sort((a, b) => b.value - a.value)

> [D3 Intro](https://observablehq.com/@d3/learn-d3).

> Good *(and official)* explanation of [d3.hierarchy](https://observablehq.com/@d3/d3-group-d3-hierarchy). *stamped*

> Exploration of [hierarchies](https://observablehq.com/@d3/visiting-a-d3-hierarchy).

> Data manipulation; [groups, rollups & hierarchy](https://observablehq.com/@stopyransky/making-hierarchy-from-any-tabular-data) *here*

> [d3 path](https://observablehq.com/@d3/d3-path)

> Sunburst : [interaction](https://observablehq.com/@shuaihaofzny/sunburst-map-of-nyc-crime-data-in-2018)! And [animation](https://observablehq.com/@kerryrodden/sequences-sunburst).

> Official Observable on [Circle Packing](https://observablehq.com/@d3/pack) and [Circle Packing with rollup](https://observablehq.com/@d3/pack-rollup)