Published
Edited
Jan 19, 2022
1 fork
5 stars
Insert cell
# Essai de création de visualisation

Ce notebook reprend le code présente pendant le cours 2

* Données aléatoires https://observablehq.com/@romsson/dummy-data-for-visualization-projects

* un line chart complet https://observablehq.com/d/54249e82d1fb9df3

* Exemple de traitement de données avec Iris (chargement, typage) https://observablehq.com/d/1b12ae6f10d76f12

* Scatterplot https://observablehq.com/d/4b6b426ae7d964e8

* Chart template https://observablehq.com/@d3/chart-template

Insert cell
a = 5
Insert cell
b = a + 1
Insert cell
f = (a, b) => { return a + b }
Insert cell
viewof v = html`<input type="range" min=1 max=100>`
Insert cell
html`
<svg width=100 height=100>
<rect x=10 y=10 width=10 height=30 fill=none stroke=black></rect>
<rect x=20 y=20 width=10 height=20 fill=none stroke=black></rect>
<rect x=30 y=30 width=10 height=10 fill=none stroke=black></rect>
<path d="M10,60L40,90L60,10L190,10" fill="transparent" stroke="black"/>
</svg>
`
Insert cell
dataset = [{"age": 100, "poids": 10}, {"age": 10, "poids": 20}, {"age": 100, "poids": 30}, {"age": 100, "poids": 30}, {"age": 10, "poids": 10}, {"age": 50, "poids": 20}, {"age": 50, "poids": 20}]
Insert cell
chart = {

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

const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)

const x = d3.scaleBand()
.domain(d3.range(dataset.length))
.range([margin.left, width - margin.right])
const y = d3.scaleLinear()
.domain([d3.max(dataset, d => d.age), 0])
.range([margin.top, height - margin.bottom])

let line = d3.line()
.x((d, i) => i * x.bandwidth() + x.bandwidth() / 2)
.y(d => y(d.age) - margin.top)

svg.append("g").attr("transform", `translate(${margin.left}, 0)`).selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * x.bandwidth() )
.attr("y", (d, i) => y(d.age))
.attr("width", x.bandwidth())
.attr("height", (d, i) => height - y(d.age) - margin.bottom)
.attr("fill", "none")
.attr("stroke", "black")

svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`).selectAll("path")
.data([dataset])
.enter()
.append("path")
.attr("d", d => line(d))
.attr("fill", "none")
.attr("stroke", "black")

let xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))

let yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))

// xAxis(svg.append("g"))
svg.append("g")
.call(xAxis);

svg.append("g")
.call(yAxis);

return svg.node()
}
Insert cell
width
Insert cell
raw = d3.csv("https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/iris.csv", d => {
let res = {}
res.sepal_length = +d.sepal_length
res.sepal_width = +d.sepal_width
res.petal_width = +d.petal_width
res.species = d.species
return res
})
Insert cell
scatterplot(raw, c, "sepal_length")
Insert cell
attributes = Object.keys(raw[0])
Insert cell
c
Insert cell
viewof c = html`<select>
${attributes.map(d => html`<option>${d}</option>` )}
</select>`
Insert cell
cat = Array.from(d3.group(raw, d => d.species))
Insert cell
scatterplot = (dataset, var_x = "age", var_y = "poids") => {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 2*width/6]);

const x = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[var_x])])
.range([0, 100])

const y = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[var_y])])
.range([0, 100])

const color = d3.scaleOrdinal(d3.schemePaired)
svg.selectAll("circle").data(dataset)
.enter()
.append("circle")
.attr("cx", d => x(d[var_x]))
.attr("cy", d => y(d[var_y]))
.attr("r", 5)
.attr("fill", d => color(d.species))
// .attr("stroke", "black")

svg.selectAll("rect").data(cat)
.enter()
.append("rect")
.attr("x", 150)
.attr("y", (d, i) => i * 20 + 50)
.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", 150 + 12)
.attr("y", (d, i) => i * 20 + 50 + 7)
.text(d => d[0])
return svg.node();
}
Insert cell
stocks = d3.csv("https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/stocks.csv", d => {
let res = {}
res.symbol = d.symbol
res.price = +d.price
res.date = timeParse(d.date)
return res
})
Insert cell
stocks
Insert cell
d3.group(stocks, d => d.symbol)
Insert cell
d3.rollup(stocks, v => d3.mean(v, d => d.price), d => d.symbol)
Insert cell
timeParse = d3.timeParse("%b %Y")
Insert cell
d3 = require("d3")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more