2c:null 2d:["$","title",null,{"children":"Scatter Plot, Line Chart & Histogramme | zidane | Observable"}] 32:T9ca,scatterplot = (dataset, xVar, yVar, plotVar) => { ///////Parametres ////////////////////////////////////////////////////////////////////// const width = 300 const height = 200 const y_Mrange = [0, height-(height/4)] const x_Mrange = [0, width-(width/3)] let viewBox = [0,0, width, height] const rayon_circles = (y_Mrange[1]+x_Mrange[1])/width ///////Contexte ////////////////////////////////////////////////////////////////////// const svg = d3.create("svg") .attr("viewBox", viewBox) .attr("style", "border:1px dashed black") const group = svg.append("g").attr("transform", "translate(10, 10)") ///////Axes, Echelle ////////////////////////////////////////////////////////////////// // Echelles de x et y sur une plage de 0 au maximum de donnees const x = d3.scaleLinear() .domain([0, d3.max(dataset, d => d[xVar])]) // plage des valeurs de l'attribut x du dataset, .range(x_Mrange) // correspondance respective a l'echelle (pixel values) const y = d3.scaleLinear() .domain([d3.max(dataset, d => d[yVar]), 0]) .range(y_Mrange) const axe_x = group => group.attr("transform", `translate(25, ${y_Mrange[1]+10})`).call(d3.axisBottom(x)) const axe_y = group => group.attr("transform", `translate(25, 10)`).call(d3.axisLeft(y)) group.append("g") .call(axe_x); group.append("g") .call(axe_y); ///////Dots /////////////////////////////////////////////////////////////////////////// const color = d3.scaleOrdinal(d3.schemePaired) group.selectAll("circle").data(dataset) .enter() .append("circle") .attr("cx", d => x(d[xVar])) .attr("cy", d => y(d[yVar])) .attr("r", rayon_circles) .attr("fill", d => color(d[plotVar])) ///////Clef /////////////////////////////////////////////////////////////////////////// const plotted_var = Array.from(d3.group(data, d => d[plotVar])) group.selectAll("text.clefs").data(plotted_var) .enter() .append("text") .attr("class", "clefs") .attr("font-size", "10px") .attr("x", x_Mrange[1]+width/6 - 10) .attr("y", (d, i) => i * 20 + 57) .text(d => d[0]) group.selectAll("rect").data(plotted_var) .enter() .append("rect") .attr("x", x_Mrange[1]+width/8 - 10) .attr("y", (d, i) => i * 20 + 50) .attr("width", 10) .attr("height", 10) .attr("fill", d => color(d[0])) .attr("stroke", "black") /////// return svg.node() }33:Tf31,//var_y must be numerical (summable) //var_x must be date typed linechart = (dataset, grouped_data, title, var_x, var_y, var_color, W, x_legend = var_x, y_legend) => { // Paramètres ///////////////////////////////////////////////////////////////// if(W<500) W = 500 const H = W/2 + W/10 const x_max_r = W-(W/5) const y_max_r = H-(H/6) const margin = {start: 15, bottom: 25, top: 50, end:50} const y_range = [margin.top, y_max_r] const x_range = [margin.start*2, x_max_r] const translate = {x:H-margin.bottom,y:margin.start*2} // Element racine /////////////////////////////////////////////////////////////// const svg = d3.create("svg").attr("width", W).attr("height", H) // Insertions const g = svg.append("g").attr("transform", `translate(${margin.start}, 0)`) // somme des y=prix par x=annee let sum = Array.from(d3.rollup(dataset, r => d3.sum(r, d=>d[var_y]), d => d[var_x])) // Mises a l'echelle ///////////////////////////////////////////////////////// let yMax = d3.max(dataset, d => d[var_y]) const x = d3.scaleTime() .domain(d3.extent(dataset, d=>d[var_x])) .range(x_range) const y = d3.scaleLinear() .domain([yMax, 0]) .range(y_range) // couleurs const c = d3.scaleOrdinal(d3.schemeCategory10) .domain(grouped_data.map(d=>d[0])) // Axes ///////////////////////////////////////////////////////////////////////// const xAxe = g => g.attr("transform", `translate(0, ${y_max_r})`) .call(d3.axisBottom(x)) g.append("g").call(xAxe); const yAxe = g => g.attr("transform", `translate(${translate.y}, 0)`) .call(d3.axisLeft(y)) g.append("g").call(yAxe); // Lignes ////////////////////////////////////////////////////////////////////// let ligne = d3.line() .x(d => x(d[var_x])) .y(d => y(d[var_y])) svg.selectAll("ligne").data(grouped_data) .enter() .append("path") .attr("transform", `translate(${margin.start}, 0)`) .attr("class", "line") .attr("fill", "none") .attr("stroke", d => c(d[0])) .attr("d", d => ligne(d[1])) // Legendes /////////////////////////////////////////////////////////////////////// // Titres X et Y svg.append("text") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("font-weight", "bold") .attr("font-size", W/70) .attr("x", W/2 - margin.start) .attr("y", y_max_r+margin.bottom) .text(x_legend) const titreY = svg.append("g").attr("transform", `rotate(-90,0,0)`) titreY.append("text") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("font-weight", "bold") .attr("font-size", W/70) .attr("x", -translate.x/2-margin.start) .attr("y", margin.start/2) .text(y_legend) // Ajout du titre svg.append("text") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("stroke", "#3F3F3F") .attr("x", W/2 - margin.start) .attr("y", H-margin.bottom*0.75) .attr("font-size", W/55) .attr("font-style", "italic") .attr("font-weight", "lighter") .text(title) // Clef //////////////////////////////////////////////////////////////////////// const groups = Array.from(grouped_data) g.selectAll("text.clefs").data(groups) .enter() .append("text") .attr("class", "clefs") .attr("font-size", W/70) .attr("x", x_max_r + margin.end) .attr("y", (d, i) =>margin.top + i * 20 + 8) .text(d => d[0]) g.selectAll("rect.clefs").data(groups) .enter() .append("rect") .attr("x", x_max_r + (margin.end/1.5)) .attr("y", (d, i) => margin.top + i * 20 ) .attr("width", 10) .attr("height", 10) .attr("fill", d => c(d[0])) .attr("stroke", "black") return svg.node() }34:T955,histogram = (dataset, attr_bucks, title, var_x, color, W) => { // Parametres ////////////////////////////////////////////// if(W<500) W = 500 const H = W/2 + W/10 const x_max_r = W-(W/5) const y_max_r = H-(H/6) const margin = {start: 25, bottom: 25, top: 50, end:50} const y_range = [margin.top, y_max_r] const x_range = [margin.start*2, x_max_r] const translate = {x:H-margin.bottom,y:margin.start*2} let x_legend = var_x // Element racine //////////////////////////////////////////////////////////////// const svg = d3.create("svg") .attr("width", W) .attr("height", H) // Insertions const g = svg.append("g") // Mises a l'echelle ///////////////////////////////////////////////////////////// // let yMax = d3.max(dataset, d => d[var_y]) const x = d3.scaleLinear() .domain([d3.min(attr_bucks, d=>d.x0), d3.max(attr_bucks, d=>d.x1)]) //minimums et maximum globaux .range(x_range) const y = d3.scaleLinear() .domain([d3.max(attr_bucks, d => d.length), 0]) .range(y_range) // Axes /////////////////////////////////////////////////////////////////////// const xAxe = g => g.attr("transform", `translate(0, ${y_max_r})`) .call(d3.axisBottom(x)) g.append("g").call(xAxe); const yAxe = g => g.attr("transform", `translate(${translate.y}, 0)`) .call(d3.axisLeft(y)) g.append("g").call(yAxe); /////////////////////////////////////////////////////////////////////////////////// // Bars ///////////////////////////////////////////////////////////////////////// svg.append("g").selectAll("rect") .data(attr_bucks) .enter() .append("rect") .attr("x", d => x(d.x0)) .attr("y", d => y(d.length)) .attr("width", d => x(d.x1)-x(d.x0)) .attr("height", d => y_max_r-y(d.length)) .attr("fill", "gray") .attr("stroke", "lightgray") // Titre //////////////////////////////////////////////////////////////////////// svg.append("text") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("x", W/2 - margin.start) .attr("y", H-margin.bottom*0.75) .attr("font-size", W/55) .attr("font-style", "italic") .attr("font-weight", "lighter") .text(title + select_hist) return svg.node(); }35:T706,## 2/ Apport Quotidien de Référence (*AQR ou DRI en anglais*) > *,**TL,DR**, Cette section, je viens de le réaliser, peut être considérée supplémentaire en terme de visualisation, je recherchais une base contenant les AQR sauf que, à défaut d'en trouver, cet aspect devrait être implémenté en logique de code.* > **LES APPORTS EN ÉNERGIE DES ADULTES (18 à 75 ans)** La quantité de calories nécessaire chaque jour à un adulte dépend de nombreux facteurs tels que le sexe, l’âge, la taille, le poids ou le niveau d’activité physique. >- **Pour un homme adulte**, l’apport conseillé en énergie est, en moyenne, de 2 400 à 2 600 calories par jour, selon l’activité. >- **Pour une femme adulte**, il est de 1 800 à 2 200 calories. > **LES APPORTS EN NUTRIMENTS DES ADULTES** Les recommandations officielles concernant les apports de glucides, de lipides et de protéines sont souvent exprimées en pourcentages de l’apport calorique total. Les apports nutritionnels conseillés pour un adulte *(pratiquant tout au plus un sport de loisir)*, par exemple, suivent les proportions suivantes : - *Un peu plus de la moitié **(55 %)*** des calories ingérées chaque jour doit être issue des **glucides** *(**deux tiers** issus de l’amidon et **un tiers** du saccharose)* ; - *Un sixième **(15 %)*** des calories ingérées doit provenir des **protéines** ; - *Un tiers **(30 %)*** des calories doit être apporté par les **lipides**. En pratique, un apport calorique provenant pour 50 % des glucides et pour 35 % des lipides est déjà un objectif satisfaisant. *source: https://www.vidal.fr/sante/nutrition/equilibre-alimentaire-adulte/recommandations-nutritionnelles-adulte.html#:~:text=Pour%20un%20homme%20adulte%2C%20l,800%20%C3%A0%202%20200%20calories.*36:[{"id":"43e7834496bb846ec0ec393e1b996808f22cb80f9088daf323f2454091364630448d4c6567603b099c9df3a4ff92fed514600ea7ba81411c30ffd4ebf7b7e997","href":"https://static.observableusercontent.com/files/43e7834496bb846ec0ec393e1b996808f22cb80f9088daf323f2454091364630448d4c6567603b099c9df3a4ff92fed514600ea7ba81411c30ffd4ebf7b7e997","name":"nutrients_csvfile categorized.csv","type":"text/csv","lastModified":1642506176889.926,"size":19760},{"id":"5a4841a410c4f1d28d4414b577acd423e689e78098b302f26d4c352cbd560be537f9c18c653a4cbb6d5e72e915ba2f3ee2c9db07f0c6a6ebc81562b781ca76dd","href":"https://static.observableusercontent.com/files/5a4841a410c4f1d28d4414b577acd423e689e78098b302f26d4c352cbd560be537f9c18c653a4cbb6d5e72e915ba2f3ee2c9db07f0c6a6ebc81562b781ca76dd","name":"nutrition.csv","type":"text/csv","lastModified":1642506177696.162,"size":4653755},{"id":"3d4f242d2bc24c920270f923a0c91a2ea7d95cbc46de690feebf98a2cdacedd3cc02071f9415c22333f364e64d06bc61b7d7adabf76f0290ab6d9bdfed66f22c","href":"https://static.observableusercontent.com/files/3d4f242d2bc24c920270f923a0c91a2ea7d95cbc46de690feebf98a2cdacedd3cc02071f9415c22333f364e64d06bc61b7d7adabf76f0290ab6d9bdfed66f22c","name":"seasonal organic food.png","type":"image/png","lastModified":1642705802959.669,"size":191265}] 30:{"id":"71aed8b61d1c0931","slug":"scatter-line-histo","title":"Scatter Plot, Line Chart & Histogramme","thumbnail":"190416ae79a1167284b35df2330a93134fd6a62c1cf6c76ff37db500015bad83","access_level":"public","create_time":"$D2022-01-15T11:05:38.707Z","update_time":"$D2022-03-30T13:10:38.213Z","view_time":null,"first_public_time":"$D2022-03-30T13:10:55.823Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dc9d160be77ea63a","login":"zidane-dev","name":"zidane","avatar_url":"https://avatars-next.observableusercontent.com/750e2b67700df34a81b0bff49c6a6f2d20c76a4622263a84745984cc1d83f789","tier":"starter_2024","bio":"yeah man"},"version":1909,"publish_version":1909,"role":null,"authored":false,"authors":[{"type":"individual","id":"789421ee7f9813bf","login":"zidane-dev","name":"zidane","avatar_url":"https://avatars-next.observableusercontent.com/750e2b67700df34a81b0bff49c6a6f2d20c76a4622263a84745984cc1d83f789","tier":null,"bio":"yeah man"}],"members":[{"type":"individual","id":"560201c9c61a188e","login":"romsson","name":"Romain Vuillemot","avatar_url":"https://avatars-next.observableusercontent.com/3b127750f8c67597cf2e60d4296f87cde15f59cdb4d1853063922cce5489fb4b","tier":null,"role":"editor"},{"type":"individual","id":"789421ee7f9813bf","login":"zidane-dev","name":"zidane","avatar_url":"https://avatars-next.observableusercontent.com/750e2b67700df34a81b0bff49c6a6f2d20c76a4622263a84745984cc1d83f789","tier":null,"role":"editor"}],"comments":[{"id":"bba804ad3feed604","reply_to_id":null,"content":"-Note to self-\nAutres references:\n\nhttps://multimedia.efsa.europa.eu/drvs/index.htm\ninput range circulaire https://www.cssscript.com/circular-range-slider-svg/","create_time":"$D2022-01-21T01:06:33.382Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"789421ee7f9813bf","login":"zidane-dev","name":"zidane","avatar_url":"https://avatars-next.observableusercontent.com/750e2b67700df34a81b0bff49c6a6f2d20c76a4622263a84745984cc1d83f789","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scatter Plot, Line Chart & Histogramme","cells":[{"id":0,"value":"# Scatter Plot, Line Chart & Histogramme\nIBN MAJAH Zidane \n\n# PARTIE 1- SCATTERPLOT\n1. Exploration Rapide","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"raw = d3.csv(\"https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/iris.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"Le fichier **iris.csv** contient 150 instances, caractérisées par 5 attributs de type *string*, or seules les valeurs de la colonne *species* conviennent réellement a ce type.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"2. Visualisation de la base","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":950,"value":"viewof table_iris = table(\n raw\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"3. Mise en place du Scatterplot\n\n> La mise en place du graphe sera décomposée en 4 étapes :\n \n >1. Préparation des données\n >2. Nuage de points\n >3. Axes à l'échelle\n >4. Clef de couleurs\n\n**Pour commencer,**\n> Comme sous-entendu lors de la phase d'exploration; il faudra d'abord correctement typer les données.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"data = d3.csv(\"https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/iris.csv\", d => {\n let sel = {}\n sel.sepal_length = +d.sepal_length\n sel.sepal_width = +d.sepal_width \n sel.petal_length = +d.petal_length\n sel.petal_width = +d.petal_width\n // Selection de l'attribut sans modification\n sel.species = d.species\n return sel\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1859,"value":"s = d3.rollup(data,\n v => {\n let b = {}\n b.count = v.length;\n b.sum_sepal_length = d3.sum(v, d => d.sepal_length);\n b.mean_sepal_length = d3.mean(v, d => d.sepal_length);\n b.median_sepal_length = d3.median(v, d => d.sepal_length);\n b.min_sepal_length = d3.min(v, d => d.sepal_length);\n b.max_sepal_length = d3.max(v, d => d.sepal_length);\n return b\n },\n d => {\n return d.species\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Ensuite, il est temps de remplir le canvas, en liant nos données aux formes de cercle, les axes sous l'échelle des données présentées et une clef pour décrire chacune des couleurs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"# Sélection d'axes\nAdmettant qu'un *dataset* contient les même descripteurs ou attributs pour chacune de ses instances;","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"removeFrom = (array, value) => {\n var arr = Array.from(array)\n var index = arr.indexOf(value)\n if(index == -1){\n throw 'Le parametre ne figure pas dans cette liste.';\n }\n else{\n arr.splice(index, 1);\n }\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"attrs = removeFrom(Array.from(Object.keys(data[0])), \"species\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"viewof select_x = html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"attrs_y = removeFrom(attrs, select_x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"viewof select_y = html` ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"plotVar = \"species\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"scatterplot(data, select_x, select_y, plotVar)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"# PARTIE 2- Line Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":980,"value":"On importe le jeu de données comme fait précédemment, ce jeu est constitue de 492 instances composées chacune de 3 attributs, *symbol* qui est une chaîne de caractère, *date* sous un format de mois abrégé plus l’année et enfin *price* qui est un réel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":871,"value":"raw1 = d3.csv(\"https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/stocks.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"Toutes les colonnes de la base sont stockées en tant que chaines de caractères, la première étape est donc de bien lire les données. \nLa fonction timeParse de d3 nous aidera a convertir une date codée en string au type adéquat. Cette fonction aura besoin du format (uni) de la présentation de la date; dans notre cas, les chaines de caractères date respectent la forme \"mois-abreg YYYY\". ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":915,"value":"parseTime = d3.timeParse(\"%b %Y\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"stocks = d3.csv(\"https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/stocks.csv\", d => {\n let sel = {}\n sel.symbol = d.symbol\n sel.price = +d.price \n sel.date = parseTime(d.date)\n return sel\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"**Exploration globale des données**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":976,"value":"viewof stocks_table = table(stocks)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"stock_groups = Array.from(d3.group(stocks, d => d.symbol))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"group_mean_price = Array.from(d3.rollup(stocks, v => d3.mean(v, d => d.price), d => d.symbol))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"viewof prix_moyens = table(group_mean_price)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"stocks_ops = d3.rollup(stocks, v=>{\n let ops = {}\n ops.length = v.length;\n ops.max = d3.max(v, d => d.price);\n ops.mean= d3.mean(v, d => d.price);\n ops.min = d3.min(v, d => d.price);\n ops.median = d3.median(v, d => d.price);\n ops.sum = d3.sum(v, d => d.price);\n return ops\n}, \n d=> {return d.symbol});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"### Line Chart Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1041,"value":"Plot.plot({\n x:{},\n y:{\n grid: true,\n label: \"Prix par entreprise\" \n },\n marks: [\n Plot.ruleX([d3.min(stocks, d=> d.date)]),\n Plot.ruleY([0]),\n Plot.line(stocks, {x: \"date\", y: \"price\", stroke: \"symbol\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"viewof vega_lc = vga.markLine()\n .data(stocks)\n .title(\"Evolution des Prix dans le temps par Entreprise.\")\n .encode(\n vga.x().fieldT(\"date\"),\n vga.y().fieldQ(\"price\"),\n vga.color().fieldN(\"symbol\")\n ).render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"## Propre Line Chart\nNous pouvons maintenant passer a la création de notre propre Line Chart, ce Line chart prend en paramètres de données le jeu de données complet, et un tableau contenant les labels de groupe au premier indice.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1335,"value":"linechart(stocks, stock_groups, \n \"Evolution des prix par entreprise\", \n \"date\", \"price\", // var_x, var_y\n \"symbol\", // group var\n 900, // width min = 500\n \"Années\", \"Prix\") //legende x, y","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"stocks","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"# PARTIE 3- Histogramme","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1674,"value":"- L'histogramme peut être considéré comme un cas spécial de Bar Charts, *un bar chart de fréquences*; toutes les barres sont de largeur égale, et la hauteur représente le nombre d'instances contenue dans chacune des *buckets*. \n- Les buckets sont un moyen de repartir les données par tranches, chaque bucket est caractérisée par x0 et x1 tel que x0 <= bucket1 < x1, avec x1 = x0 de la bucket2. \n- La fonction *d3.bin()* permet de facilement obtenir ces buckets.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1684,"value":"bin = d3.bin()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"attr_bucks = bin(data.map(d => d[select_hist]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1699,"value":"On obtient en retour un tableau de \"buckets\", ces derniers se composent des indices liés valeurs contenues, puis deux valeurs x0 et x1 qui délimitant les valeurs de l'ensemble.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1672,"value":"viewof select_hist = html` ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1716,"value":"histogram(data, attr_bucks, \"Histogramme iris: \", select_hist, \"gray\" , 900)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"# PARTIE 4-\n## Exploration du sujet de projet\n> ### Remplis mon Assiette\n\n**Objectif:** \n- Faciliter la construction d'une assiette nutritive et variée,\n- Proposition de suggestions d'alternatives a un certain aliment,\n- **Informer** et **Rapprocher** une perspective de nutrition saine au grand public.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":695,"value":"## 1/ Valeurs nutritionnelles d'aliments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":570,"value":"food_categorized = FileAttachment(\"nutrients_csvfile categorized.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"Cette base de données contient 335 instances catégorisées en 16 types d'aliments :","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":580,"value":"food_cats_1 = Array.from(\n food_categorized.map(item => item.Category)\n .filter((value, index, self) => self.indexOf(value) === index))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"viewof base_one = table(food_categorized)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"Object.keys(food_categorized[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"Les contraintes de cette base sont liées aux mesures proposées, qui seraient plus facilement interprétées pour un publique hors US après conversion, de première vue, le fait que les mesures ne soient pas unifiées pourrait poser un problème, or, autre que conversions et traduction, la base est assez maniable avec 10 attributs, 2 pour identification, 1 pour mesure et 7 de description.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":573,"value":"food_huge = FileAttachment(\"nutrition.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"Cette base de données contient 8789 instances d'aliments distincts. Mais, non catégorisés :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":612,"value":"food_huge.map(item => item.name).filter((value, index, self) => self.indexOf(value) === index)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"viewof base_two = table(food_huge)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"Object.keys(food_huge[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"Ceci dit, cette base est largement plus imposante en terme d'attributs descriptifs *(74)* ainsi que d'instances, la mesure de **100g** est unique pour toutes les entrées.\nL'attribut *name* décrit en plus de l'aliment, son état*: cru, cuit, non cuit...* ou même sa provenance *(e.g. on retrouve des produits de McDonald's)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"food_huge_cru = food_huge.filter(item => item.name.includes(\"raw\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"food_huge_cuit = food_huge.filter(item => item.name.includes(\"cooked\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"food_huge_ncuit = food_huge.filter(item => item.name.includes(\"uncooked\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"food_huge_dess = food_huge.filter(item => item.name.includes(\"dessert\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"food_huge_fruit = food_huge.filter(item => item.name.includes(\"fruit\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"Cette manière permet une certaine catégorisation des données, mais sans réelle préparation de données, restera tout de même assez limitée.\nIl est aussi possible de voir chacun des mots séparés par une virgule comme \"Tag\".\n\nUne utilisation probable de cette base sera pour la mise en place d'assiettes dont les aliments sont référencés par l'utilisateur et le calcul de l'apport nutritionnel qui y est contenu.\n\nEn terme de visualisation de données, nous pourrons soutirer les différentes sources d'un certain nutriment, trouver les plus riches, ou chercher ceux qui offrent une plus grande diversité par exemple.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":739,"value":"Comme cité plus haut, une recommandation de nutrition est loin d’être une information standard, il n'est possible que de référencer a une moyenne, le plus important est d'apprendre a connaitre son propre corps.\nEn tous cas, il faudra demander a l'utilisateur d'entrer son age, sexe, poids et taille, éventuellement s'il s'agit d'une femme, si elle est en ceinte.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":746,"value":"viewof physique = {\n const form = html``;\n form.oninput = () => form.value = [\n form.age.valueAsNumber, \n form.taille.valueAsNumber, \n form.poids.valueAsNumber,\n form.sexe.value\n //e.g. if(form.sexe.value == 'F' && age > 18) ==> pregnant ? [~? unhide question in html]\n ];\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"physique","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"Une base d'apport nutritionnel recommande par tranche d'age, poids et sexe\n> => En cours de recherche","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":798,"value":"> **Comment les populations cibles sont-elles définies ?**\n\nLes VNR sont développées pour différents groupes de population. \nLe choix des groupes est basé sur les **différences de besoins liés à** la vitesse de croissance**,** aux modifications de l’état endocrinien (par ex. la puberté) **et** aux différences observées dans l’absorption des nutriments ou dans les fonctions corporelles, *telles que la fonction rénale par exemple*. \nLes besoins spécifiques pendant la grossesse et l'allaitement sont également pris en compte. Ainsi, les VNR sont développées en fonction des différentes étapes de la vie et des groupes d'individus, ainsi qu’en fonction des différentes tranches d'âge. Pour chaque nutriment, les populations ciblées sont définies au cas par cas, en fonction des données disponibles.\n\n*source: https://www.efsa.europa.eu/fr/topics/topic/dietary-reference-values*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":734,"value":"## 3/ Une visualisation des fruits et légumes saisonniers\n> Mettre le point sur le fait que ce n'est pas parce qu’un produit a l'air naturel qu'il l'est vraiment.\n\nUne application de cette idée est trouvée ici: https://www.eufic.org/en/explore-seasonal-fruit-and-vegetables-in-europe\n\n**en recherche d'une base**\n\nCi-dessous, une capture de l'application montrant les légumes de la saison actuelle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":777,"value":"html`

\n ${await FileAttachment(\"seasonal organic food.png\").image()}\n

Legumes de saison d'Hiver, Janvier.\n explore-seasonal-fruit-and-vegetables-in-europe\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"## 4/ Classifications NOVA et Nutri-Score\n\nDe nouvelles recherches de chercheurs de l'Inserm, de l'Inra et de l'Université Paris 13 (EREN) suggèrent une corrélation entre la consommation d'aliments **ultra-transformés** et un risque accru de développer un **cancer**. \nLa classification *NOVA* assigne un groupe aux produits alimentaires en fonction du degré de transformation qu'ils ont subi:\n- **Groupe 1** - Aliments non transformés ou transformés minimalement\n- **Groupe 2** - Ingrédients culinaires transformés\n- **Groupe 3** - Aliments transformés\n- **Groupe 4** - Produits alimentaires et boissons ultra-transformés\n\nLa source met sous disposition la base de données, ceci dit, elle est d'une taille imposante de 4.4 Go.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1186,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"import {table} from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"import { vga } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"