data analyst • mediapart
htmlTour = (tour)=>{
if (tour == undefined) return ''
let div = document.createElement("div")
div.setAttribute('style', 'margin-top: 2em;')
let h2 = document.createElement("h2")
h2.appendChild(document.createTextNode(tour.tour))
div.appendChild(h2)
tour.hypotheses.forEach(hypothese => {
let title = document.createTextNode(`${(hypothese.hypothese)?hypothese.hypothese: ''}`)
let h3 = document.createElement('h3')
h3.setAttribute('style', 'margin-top: 1em;')
h3.appendChild(title)
div.appendChild(h3)
div.appendChild(tChart(hypothese, tour))
div.appendChild(Inputs.table(hypothese.candidats.slice().sort((a,b)=> b.intentions - a.intentions)))
})
return div
}
tChart = (hypothese, tour) => {
let data = [...hypothese.candidats]
let plot = Plot.plot({
caption: html`
Intentions de vote pour le ${tour.tour.toLowerCase()} de l'élection présidentielle 2022<br>
${ hypothese.sous_echantillon } répondant·e·s pour un échantillon de ${ sondage.echantillon } personnes (soit ${hypothese.sous_echantillon/sondage.echantillon * 100}%)<br>
Source : <a href="https://twitter.com/nsppolls">NspPolls</a> · <a href="${ sondage.lien }">${sondage.nom_institut} ${sondage.id}</a> · Visualisation : <a href="https://twitter.com/taniki">@taniki</a>
`,
marginLeft: 150,
x: {
label: 'intentions de vote',
domain: [0, d3.max([35, ...data.map(c => c.erreur_sup)])],
nice: true,
axis:'top',
grid: true,
tickFormat: t => `${t}%`
},
y: {
axis: false,
domain: data.sort((a,b) => b.intentions - a.intentions).map(c => c.candidat)
},
marks: [
Plot.barX(data, { y: 'candidat', x1: 'erreur_inf', x2: 'erreur_sup', rx: 10}),
Plot.dot(data, { y: 'candidat', x: 'intentions', fill: 'white', stroke: 'black', r: 5}),
Plot.text(data, { y: 'candidat', x: 'erreur_inf', text: 'candidat', textAnchor: 'end', dx: -6})
]
})
return plot
}
tours = ['Premier tour', 'Deuxième tour']
tour = (tour)=> sondage.tours.find(t => t.tour == tour)
import { nsppolls as sondages, desc as nsppollsDesc } from '@taniki/presidentielle2022-donnees-nsppolls'
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.
