viewof select1 = {
const WIDTH = 300
const HEIGHT = 100
const container = DOM.svg(WIDTH, HEIGHT)
container.innerHTML = `<circle cx=${WIDTH / 2} cy=${HEIGHT / 2} r="30" />`
// prendre cet élément "svg" (nous allons en créer plusieurs sur la même page)
const svg = d3.select(container)
// et l'élément "circle" appartenant à l'élément "svg"
const circle = svg.select('circle')
// y ajouter un attribut "fill" avec la valeur "red"
circle.attr('fill', 'red')
return container
}
viewof select2 = {
const WIDTH = 300
const HEIGHT = 100
const container = DOM.svg(WIDTH, HEIGHT)
container.innerHTML = `<circle cx=${WIDTH / 2} cy=${HEIGHT / 2} r="30" />`
// prendre l'élément "circle"
const circle = container.getElementsByTagName('circle')[0]
// y ajouter un attribut "fill" avec la valeur "red"
circle.setAttribute('fill', 'red')
return container
}
viewof select3 = {
const WIDTH = 300
const HEIGHT = 100
const container = DOM.svg(WIDTH, HEIGHT)
// prendre l'élément "circle"
const svg = d3.select(container)
// et y ajouter un élément "rect"
const rect = svg.append('rect')
.attr('x', 20)
.attr('y', 20)
.attr('width', WIDTH - 40)
.attr('height', HEIGHT - 40)
return container
}
viewof select4 = {
const WIDTH = 300
const HEIGHT = 100
const container = DOM.svg(WIDTH, HEIGHT)
// créer un élément "rect"
// pour les éléments HTML de base nous pouvons utiliser .createElement('p') par exemple
// pour les éléments SVG, il nous faut déclarer le "name space"
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
rect.setAttribute('x', 20)
rect.setAttribute('y', 20)
rect.setAttribute('width', WIDTH - 40)
rect.setAttribute('height', HEIGHT - 40)
// ajouter le rectangle à l'élément parent
container.appendChild(rect)
return container
}
viewof select5 = {
const WIDTH = 500
const HEIGHT = 100
const container = DOM.svg(WIDTH, HEIGHT)
container.innerHTML = `
<circle cx="100" cy=${HEIGHT / 2} r="30" />
<circle cx="200" cy=${HEIGHT / 2} r="30" />
<circle cx="300" cy=${HEIGHT / 2} r="30" />
`
const svg = d3.select(container)
const circles = svg.selectAll('circle')
.attr('fill', 'yellow')
return container
}
viewof select6 = {
const WIDTH = 500
const HEIGHT = 100
const container = DOM.svg(WIDTH, HEIGHT)
container.innerHTML = `
<circle cx="100" cy=${HEIGHT / 2} r="30" />
<circle cx="200" cy=${HEIGHT / 2} r="30" />
<circle cx="300" cy=${HEIGHT / 2} r="30" />
`
// nous utilisons Array.from parce qu'une liste .getElementsByTagName n'est pas itérable avec .forEach
const circles = Array.from(container.getElementsByTagName('circle'))
// une fonction pour ajouter l'attribut "fill"
const addYellowFill = circle => circle.setAttribute('fill', 'yellow')
// appliquer la fonction aux cercles
circles.forEach(addYellowFill)
return container
}
viewof select7 = {
const WIDTH = 300
const HEIGHT = 100
const container = DOM.svg(WIDTH, HEIGHT)
container.innerHTML = `<circle cx=${WIDTH / 2} cy=${HEIGHT / 2} r="10" />`
let r = 10
const svg = d3.select(container)
const circle = svg.select('circle')
.on('click', () => {
r++
circle.attr('r', r)
})
return container
}
viewof select8 = {
const WIDTH = 300
const HEIGHT = 100
const container = DOM.svg(WIDTH, HEIGHT)
container.innerHTML = `<circle cx=${WIDTH / 2} cy=${HEIGHT / 2} r="10" />`
let r = 10
const circle = container.getElementsByTagName('circle')[0]
circle.addEventListener('click', () => {
r++
circle.setAttribute('r', r)
})
return container
}
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.
