TP 3 – Visualisations Standards en D3.JS / manal hachhach

raw=FileAttachment("iris.csv").csv()

Inputs.table(raw)

{

const height = 500

const padding=400

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

const margin = ({top: 25, right: 27 , bottom: 25, left: 25})

const h = 500 - margin.top - margin.bottom

const w = height - margin.left - margin.right

const x = d3.scaleLinear()

.domain([0,

d3.max(raw, d => d.sepal_length)])

.range([margin.top, h])

const y = d3.scaleLinear()

.domain([0,

d3.max(raw, d => d.sepal_width)])

.range([margin.left, w])

const color = d3.scaleOrdinal(d3.schemeCategory10)

svg.selectAll("circle")

.data(raw)

.enter()

.append("circle")

.attr("cx", d => x(d.sepal_length))

.attr("cy", d => y(d.sepal_width))

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

.attr("r", 3)

svg.selectAll("rect").data(color.domain())

.enter()

.append("rect")

.attr("x", width-padding+30)

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

.attr("width", 10)

.attr("height", 10)

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

svg.selectAll("text").data(color.domain())

.enter()

.append("text")

.attr("x", width-padding+30+20)

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

.text(d => d)

svg.append("text")

.attr("x",200)

.attr("y",padding-370)

.text(" Scatterplot à partir des données Iris")

svg.append("text")

.attr("x", h)

.attr("y",w)

.text("sepal_length")

svg.append("text")

.attr("x", 10)

.attr("y",20 )

.text("sepal_width")

const xAxis = g => g

.attr("transform", `translate(0, ${h})`)

.call(d3.axisBottom(x))

const yAxis = g => g

.attr("transform", `translate(${margin.left}, 0)`)

.call(d3.axisLeft(y))

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

return svg.node()

}

Scatter(raw)

function Scatter(data){

const height = 500

const padding=400

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

const margin = ({top: 25, right: 27 , bottom: 25, left: 25})

const h = 500 - margin.top - margin.bottom

const w = height - margin.left - margin.right

const x = d3.scaleLinear()

.domain([0,

d3.max(raw, d => d.sepal_length)])

.range([margin.top, h])

const y = d3.scaleLinear()

.domain([0,

d3.max(raw, d => d.sepal_width)])

.range([margin.left, w])

const color = d3.scaleOrdinal(d3.schemeCategory10)

svg.selectAll("circle")

.data(raw)

.enter()

.append("circle")

.attr("cx", d => x(d.sepal_length))

.attr("cy", d => y(d.sepal_width))

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

.attr("r", 3)

svg.selectAll("rect").data(color.domain())

.enter()

.append("rect")

.attr("x", width-padding+30)

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

.attr("width", 10)

.attr("height", 10)

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

svg.selectAll("text").data(color.domain())

.enter()

.append("text")

.attr("x", width-padding+30+20)

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

.text(d => d)

svg.append("text")

.attr("x", h)

.attr("y",w)

.text("sepal_length")

svg.append("text")

.attr("x", 10)

.attr("y",20 )

.text("sepal_width")

const xAxis = g => g

.attr("transform", `translate(0, ${h})`)

.call(d3.axisBottom(x))

const yAxis = g => g

.attr("transform", `translate(${margin.left}, 0)`)

.call(d3.axisLeft(y))

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

return svg.node()

}

{

const height = 700

const padding=150

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

let data = raw

const margin = ({top: 20, right: 30, bottom: 30, left: 40})

const h = 300 - margin.top - margin.bottom

const w = height - margin.left - margin.right

const x = d3.scaleLinear()

.domain([0,

d3.max(data, d => d.sepal_width)])

.range([padding, width-padding])

const y = d3.scaleLinear()

.domain([0,

d3.max(data, d => d.sepal_length)])

.range([height-padding, padding])

const color = d3.scaleOrdinal(d3.schemeCategory10)

svg.selectAll("circle")

.data(data)

.enter()

.append("circle")

.attr("id", "circle")

.attr("cx", d => x(d.sepal_width))

.attr("cy", d => y(d.sepal_length))

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

.attr("opacity", 0)

.attr("r", 5)

svg.selectAll("rect").data(color.domain())

.enter()

.append("rect")

.attr("x", width-padding+30)

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

.attr("width", 10)

.attr("height", 10)

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

const shape = d3.scaleOrdinal()

.domain(raw.map(d => d.species))

.range(d3.symbols.map(s => d3.symbol().type(s)()))

const marks = svg.selectAll(".marks")

.data(data)

.enter().append("path")

.attr("class", "marks")

.attr("transform", d => `translate(${x(d["sepal_width"])}, ${y(d["sepal_length"])})`)

.attr("fill", d => color(d["species"]))

.attr("d", d => shape(d["species"]));

console.log(shape("setosa"))

svg.selectAll("text").data(color.domain())

.enter()

.append("text")

.attr("x", width-padding+30+20)

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

.text(d => d)

const xAxis=d3.axisBottom(x)

const yAxis=d3.axisLeft(y)

svg.append("g")

.attr("transform","translate(0," + (height-padding) + ")")

.call(xAxis)

svg.append("g")

.attr("transform","translate(" + padding + ",0)")

.call(yAxis)

return svg.node()

}

viewof choose_species = Inputs.select([...d3.group(raw, d => d["species"])].map(d => d[0]),{label: "Select one of species :"})

filtered_data = raw.filter(d => choose_species.includes(d.species));

{

const height = 500

const padding=400

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

const margin = ({top: 25, right: 27 , bottom: 25, left: 25})

const h = 500 - margin.top - margin.bottom

const w = height - margin.left - margin.right

const x = d3.scaleLinear()

.domain([0,

d3.max(raw, d => d.sepal_length)])

.range([margin.top, h])

const y = d3.scaleLinear()

.domain([0,

d3.max(raw, d => d.sepal_width)])

.range([margin.left, w])

const color = d3.scaleOrdinal(d3.schemeCategory10)

svg.selectAll("circle")

.data(filtered_data)

.enter()

.append("circle")

.attr("cx", d => x(d.sepal_length))

.attr("cy", d => y(d.sepal_width))

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

.attr("r", 3)

svg.selectAll("rect").data(color.domain())

.enter()

.append("rect")

.attr("x", width-padding+30)

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

.attr("width", 10)

.attr("height", 10)

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

svg.selectAll("text").data(color.domain())

.enter()

.append("text")

.attr("x", width-padding+30+20)

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

.text(d => d)

svg.append("text")

.attr("x",200)

.attr("y",padding-370)

.text(" Scatterplot à partir des données Iris")

svg.append("text")

.attr("x", h)

.attr("y",w)

.text("sepal_length")

svg.append("text")

.attr("x", 10)

.attr("y",20 )

.text("sepal_width")

const xAxis = g => g

.attr("transform", `translate(0, ${h})`)

.call(d3.axisBottom(x))

const yAxis = g => g

.attr("transform", `translate(${margin.left}, 0)`)

.call(d3.axisLeft(y))

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

return svg.node()

}

attrib=["sepal_length","sepal_width"]

scatter2=(raw,var_x,var_y,c)=>{

{

const height = 500

const padding=400

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

const margin = ({top: 25, right: 27 , bottom: 25, left: 25})

const h = 500 - margin.top - margin.bottom

const w = height - margin.left - margin.right

const x = d3.scaleLinear()

.domain([0,

d3.max(raw, d => d[var_x])])

.range([margin.top, h])

const y = d3.scaleLinear()

.domain([0,

d3.max(raw, d => d[var_y])])

.range([margin.left, w])

const color = d3.scaleOrdinal(d3.schemeCategory10)

svg.selectAll("circle")

.data(raw)

.enter()

.append("circle")

.attr("cx", (d) => x(d[var_x]))

.attr("cy", (d) => y(d[var_y]))

.attr("fill", d => color(d[c]))

.attr("r", 3)

svg.selectAll("rect").data(color.domain())

.enter()

.append("rect")

.attr("x", width-padding+30)

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

.attr("width", 10)

.attr("height", 10)

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

svg.selectAll("text").data(color.domain())

.enter()

.append("text")

.attr("x", width-padding+30+20)

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

.text(d => d)

svg.append("text")

.attr("x", h)

.attr("y",w)

.text("sepal_length")

svg.append("text")

.attr("x", 10)

.attr("y",20 )

.text("sepal_width")

const xAxis = g => g

.attr("transform", `translate(0, ${h})`)

.call(d3.axisBottom(x))

const yAxis = g => g

.attr("transform", `translate(${margin.left}, 0)`)

.call(d3.axisLeft(y))

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

return svg.node()

}}

scatter2(raw,x,y,"species")

viewof y=html`<select>

${attrib.map(d => html`<option>${d}</option>`)}

</select>`

viewof x=html`<select>

${attrib.map(d => html`<option>${d}</option>`)}

</select>`

raw2=FileAttachment("stocks.csv").csv()

Inputs.table(raw2)

d3=require("d3")

d3.extent(raw2, d=>d.price)

d3.extent(raw2,d=>d.date)

d3.group(raw2, d=>d.symbol)

d3.rollup(raw2, v=>d3.sum(v,d=>d.price),d=>d.date)

d3.rollup(raw2,v=>d3.sum(v,d=>d.price),d=>d.symbol)

parseDate2= d3.timeParse("%b %Y")

line= (data, x, y, c)=>{

const width=1000

const height=500

const margin=40

var cat =Array.from(d3.group(data,d=>d[c]))

const color=d3.scaleOrdinal(d3.schemeCategory10)

const svg= d3.create("svg")

.attr("width",width)

.attr("height",height)

const x1= d3.scaleTime()

.domain(d3.extent(data, d=>d[y]))

.range([margin, width-margin])

const y1 = d3.scaleLinear()

.domain(d3.extent(data, d=>d[x]))

.range([height-margin, margin])

const line = d3.line()

.x(d=>x1(d[y]))

.y(d=>y1(d[x]))

const nested = Array.from(d3.group(data,d=>d[c]),([key,value])=>({key,value}))

svg.selectAll("path")

.data(nested)

.enter()

.append("path")

.attr("d",d=>line(d.value))

.attr("fill","none")

.attr("stroke",d=>color(d.key))

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

.enter()

.append("rect")

.attr("x",width-margin-900)

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

.attr("width",10)

.attr("height",10)

.attr("fill",(d)=>color(d[0]))

.attr("stroke","black")

svg.selectAll("text").data(cat)

.enter()

.append("text")

.attr("x",width-margin-870)

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

.text(d=>d[0])

svg.append("g")

.attr("transform","translate(0," + (height-margin) + ")")

.call(d3.axisBottom(x1))

svg.append("g")

.attr("transform","translate(" + margin + ",0)")

.call(d3.axisLeft(y1))

return svg.node();

}

line(raw3, "price","date","symbol")

raw3= raw2.map(d=>{

d.price =+d.price

d.date= parseDate2(d.date)

d.symbol=d.symbol

return d

})

viewof checkboxes = Inputs.checkbox([...d3.group(raw2, d => d["symbol"])].map(d => d[0]), {label: "Choix de l'entreprise", sort: true})

filtered_stocks = raw2.filter(d => checkboxes.includes(d.symbol));

stocks_by_entreprises=d3.group(filtered_stocks, d => d.symbol)

stocks_by_entreprises_array=Array.from(stocks_by_entreprises)

linechart={

const height = 500

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

const margin = ({top: 20, right: 30, bottom: 30, left: 40})

const h = 500 - margin.top - margin.bottom

const w = height - margin.left - margin.right

const x = d3.scaleTime()

.domain(d3.extent(raw2, d=> d.date))

.range([margin.left, w])

const y = d3.scaleLinear()

.domain(d3.extent(raw2, d=> d.price))

.range([h, margin.top])

var mediaName = filtered_stocks.map(d => d.symbol)

const color = d3.scaleOrdinal(d3.schemeCategory10).domain(mediaName)

const line = d3.line()

.x(d => x(d.date))

.y(d => y(d.price))

svg.selectAll(".line").data(stocks_by_entreprises_array)

.enter()

.append("path")

.attr("class", "line")

.attr("fill", "none")

.attr("stroke", d=> color(d[0]))

.attr("d", d=>line(d[1]))

const xAxis = g => g

.attr("transform", `translate(0, ${h})`)

.call(d3.axisBottom(x))

const yAxis = g => g

.attr("transform", `translate(${margin.left}, 0)`)

.call(d3.axisLeft(y))

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.selectAll("rect").data(color.domain())

.enter()

.append("rect")

.attr("x", 520)

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

.attr("width", 10)

.attr("height", 10)

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

svg.selectAll("#text").data(color.domain())

.enter()

.append("text")

.attr("id", "text")

.attr("x", 540)

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

.text(d => d)

svg.append("text")

.attr("x", h-10)

.attr("y",w+20)

.text("Date")

svg.append("text")

.attr("x", 55)

.attr("y",25 )

.text("Price")

svg.append("text")

.attr("x", 200)

.attr("y",25 )

.text("Prix des cours de bourse")

return svg.node()

}

{

const W = 900

const H = 500

const margin = {

top: 20,

right: 150,

bottom: 30,

left: 40

}

const width = W - margin.left - margin.right

const height = H - margin.top - margin.bottom

let data = raw

const svg = d3.create("svg")

svg.attr("width", W)

.attr("height", H)

const xScale = d3.scaleLinear()

.domain([d3.min(data, d => d["petal_length"]), d3.max(data, d => d["petal_length"])])

.range([margin.left, W - margin.right])

const xAxis = d3.axisBottom(xScale)

svg.append("g")

.attr("transform", "translate(0," + (H - margin.bottom) + ")")

.call(xAxis)

svg.append("text")

.attr("transform", `translate(${(width + margin.right - 100 )}, ${height + margin.bottom * 1.5})`)

.attr("font-size", 13)

.style("text-anchor", "middle")

.text("Petal length")

const numBins = 30

const histogram = d3.histogram()

.value(function(d) { return d.petal_length; })

.domain(xScale.domain())

.thresholds(xScale.ticks(numBins))

const bins = histogram(data)

const yScale = d3.scaleLinear()

.domain([0, d3.max(bins, function(d) { return d.length; })])

.range([H - margin.bottom, margin.top])

const yAxis = d3.axisLeft(yScale)

svg.append("g")

.attr("transform", "translate(" + margin.left + ",0)")

.call(yAxis)

svg.append("text")

.attr("transform", "rotate(-90)")

.attr('y', 6)

.attr('dy', "0.7em")

.attr('dx', "-4em")

.attr("font-size", 13)

.style("text-anchor", "middle")

.text("Count")

// append the bar rectangles to the svg element

svg.selectAll("rect")

.data(bins)

.enter()

.append("rect")

.attr("x", 1)

.attr("transform", function(d) { return "translate(" + xScale(d.x0) + "," + yScale(d.length) + ")"; })

.attr("y", margin.bottom - 10)

.attr("width", function(d) { return xScale(d.x1) - xScale(d.x0) -1 ; })

.attr("height", function(d) { return height - yScale(d.length); })

.style("fill", function(d){ if(d.x0<140){return "black"} else {return "#69b3a2"}})

return svg.node()

}

Purpose-built for displays of data