Scatter Plot, Line Chart & Histogramme / zidane

data = d3.csv("https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/iris.csv", d => {

let sel = {}

sel.sepal_length = +d.sepal_length

sel.sepal_width = +d.sepal_width

sel.petal_length = +d.petal_length

sel.petal_width = +d.petal_width

// Selection de l'attribut sans modification

sel.species = d.species

return sel

})

s = d3.rollup(data,

v => {

let b = {}

b.count = v.length;

b.sum_sepal_length = d3.sum(v, d => d.sepal_length);

b.mean_sepal_length = d3.mean(v, d => d.sepal_length);

b.median_sepal_length = d3.median(v, d => d.sepal_length);

b.min_sepal_length = d3.min(v, d => d.sepal_length);

b.max_sepal_length = d3.max(v, d => d.sepal_length);

return b

},

d => {

return d.species

})

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()

}

scatterplot(data, select_x, select_y, plotVar)

parseTime = d3.timeParse("%b %Y");

stocks = d3.csv("https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/stocks.csv", d => {

let sel = {}

sel.symbol = d.symbol

sel.price = +d.price

sel.date = parseTime(d.date)

return sel

})

**Exploration globale des données**

stock_groups = Array.from(d3.group(stocks, d => d.symbol))

stocks_ops = d3.rollup(stocks, v=>{

let ops = {}

ops.length = v.length;

ops.max = d3.max(v, d => d.price);

ops.mean= d3.mean(v, d => d.price);

ops.min = d3.min(v, d => d.price);

ops.median = d3.median(v, d => d.price);

ops.sum = d3.sum(v, d => d.price);

return ops

},

d=> {return d.symbol});

viewof vega_lc = vga.markLine()

.data(stocks)

.title("Evolution des Prix dans le temps par Entreprise.")

.encode(

vga.x().fieldT("date"),

vga.y().fieldQ("price"),

vga.color().fieldN("symbol")

).render()

## Propre Line Chart

Nous 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.

linechart(stocks, stock_groups,

"Evolution des prix par entreprise",

"date", "price", // var_x, var_y

"symbol", // group var

900, // width min = 500

"Années", "Prix") //legende x, y

stocks

//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()

}

# PARTIE 3- Histogramme

bin = d3.bin()

attr_bucks = bin(data.map(d => d[select_hist]))

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.

histogram(data, attr_bucks, "Histogramme iris: ", select_hist, "gray" , 900)

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();

}

food_categorized = FileAttachment("nutrients_csvfile categorized.csv").csv()

Cette base de données contient 335 instances catégorisées en 16 types d'aliments :

food_cats_1 = Array.from(

food_categorized.map(item => item.Category)

.filter((value, index, self) => self.indexOf(value) === index))

viewof base_one = table(food_categorized)

Object.keys(food_categorized[0])

food_huge = FileAttachment("nutrition.csv").csv()

food_huge.map(item => item.name).filter((value, index, self) => self.indexOf(value) === index)

viewof base_two = table(food_huge)

Object.keys(food_huge[0])

food_huge_cru = food_huge.filter(item => item.name.includes("raw"))

food_huge_cuit = food_huge.filter(item => item.name.includes("cooked"))

food_huge_ncuit = food_huge.filter(item => item.name.includes("uncooked"))

food_huge_dess = food_huge.filter(item => item.name.includes("dessert"))

food_huge_fruit = food_huge.filter(item => item.name.includes("fruit"))

Une base d'apport nutritionnel recommande par tranche d'age, poids et sexe

> => En cours de recherche

Purpose-built for displays of data