Published
Edited
Apr 27, 2021
2 stars
Insert cell
Insert cell
viewof tb_nais0 = {

const dt0 = await aq.loadCSV(insee_csv_url,
{delimiter: ";",
parse: {CODGEO: String}} // autoType = true par défaut, reconnait les var. numériques
// mais considère à tort les codes commune comme numériques,
// on spécifie donc ici qu'il faut conserver CODGEO en String
)
return dt0.view(10) // view() renvoie un aperçu de la table au format HTML,
// mais la variable tb_nais0 reçoit bien la table Arquero, qu'on réutilisera par la suite
}
/*viewof tb_nais0 = {

const dt0 = await aq.fromCSV(await FileAttachment("base_naissances_2019.csv").text(),
{delimiter: ";",
parse: {CODGEO: String}} // autoType = true par défaut, reconnait les var. numériques
// mais considère à tort les codes commune comme numériques,
// on spécifie donc ici qu'il faut conserver CODGEO en String
)
return dt0.view(15) // view() renvoie un aperçu de la table au format HTML,
// mais la variable tb_nais0 reçoit bien la table Arquero, qu'on réutilisera par la suite
}*/
Insert cell
Insert cell
viewof tb_nais1 = {
return tb_nais0.fold(aq.startswith('NAISD'), {as: ['AN', 'NAISD']})
.view(15)
// transpose en considérant toutes les colonnes commençant par NAISD, qui passent en ligne
// une nouvelle colonne, qu'on choisit de nommer AN, distingue ces variables
// les valeurs numériques figurent dans une autre colonne qu'on choisit de nommer NAISD
}
Insert cell
md `La nouvelle table transposée comprend **${tb_nais1.numRows().toLocaleString()}** lignes.`
Insert cell
Insert cell
viewof tb_nais2 = {
await visibility() ;
return tb_nais1.derive({AN: d => '20' + op.substring(d.AN, 5), // mise en forme d'un vrai champ pour l'année (AN)
DEP: d => op.substring(d.CODGEO, 0,
d.CODGEO < '97' ? 2 : 3) }) // extraction du code département
.relocate('DEP', {after: 0}) // repositionnement de DEP après la 1ère colonne (d'indice 0)
// on aurait pu écrire {after: 'CODGEO'} ou {before: 2}
.view(10) ;
// note : à l'intérieur d'un derive, les fonctions js natives ne sont pas toutes accessibles
// pour opérer sur des colonnes existantes, il faut en passer par les opérateurs Arquero, préfixés par op.
// ils reprennent les fonctions js essentielles, et ajoutent même quelques utilitaires
// cf. https://uwdata.github.io/arquero/api/op
}
Insert cell
Insert cell
viewof tb_test = tb_nais2.rollup({DEPMIN: op.min('DEP'), DEPMAX: op.max('DEP')}).view()
Insert cell
md `Dans la colonne DEP, la valeur minimum est **${tb_test.get('DEPMIN', 0)}** tandis que le maximum est **${tb_test.get('DEPMAX',0)}**.

La fonction \`get\` prend comme arguments un nom de colonne et un n° de ligne.`
Insert cell
Insert cell
viewof tb_nais3 = {
const n_dep = await fetch("https://www.data.gouv.fr/fr/datasets/r/d77bb584-932b-4eae-a84b-8117f2a18ddb")
.then(buf => buf.text())
.then(buf => aq.fromCSV(buf, {delimiter: ";", autoType: false}))
// n_dep décrit les départements français au travers de 2 colonnes codgeo et libgeo,
// et une colonne reg pour la région d'apprtenance
return tb_nais2.lookup(n_dep, ['DEP','codgeo'], 'reg') // récupération de la colonne reg dans n_reg
.select(aq.all(), {reg: 'REG'}) // renommage de reg en REG pour la cohérence esthétique
.relocate('REG', {after: 'DEP'}) // placement de REG après DEP, pour l'esthétique, et l'exemple
.view(10) ;
}
Insert cell
Insert cell
viewof tb_nais4 = tb_nais3.groupby('REG','AN') // variables de regroupement
.rollup({NAISD: op.sum('NAISD')}) // variable à sommer, je conserve ici le même nom
.orderby('REG', 'AN') // tri selon les 2 axes
.view(10) ;
Insert cell
Insert cell
viewof tb_nais5 = {
const n_reg = await fetch("https://www.data.gouv.fr/fr/datasets/r/bfc0ec12-8a80-4225-a361-fe6ce14a9a6c")
.then(buf => buf.text())
.then(buf => aq.fromCSV(buf, {delimiter: ";", autoType: false}))
// n_reg décrit les régions françaises au travers de 2 colonnes codgeo et libgeo
return tb_nais4.lookup(n_reg, ['REG','codgeo'], 'libgeo') // jointure sur REG <-> codgeo, injection de libgeo
.select(aq.all(), {'libgeo': 'LIBREG'}) // renommage de libreg en LIBREG pour l'esthétique
.view()
}
Insert cell
Insert cell
naisreg_chart = {
await visibility() ;
vl.vega.formatLocale(locale); // prise en compte du formatage français des nombres (axe y)
return vl.markLine({point: true})
.data(tb_nais5.filter(d => d.REG <= '06')) // filtrage sur les régions d'outre-mer
.encode(
vl.x().fieldN('AN').axis({labelAngle: 0, labelOverlap: true}).title(null),
vl.y().fieldQ('NAISD').title(null),
vl.color().fieldN("LIBREG").sort("-y").legend({title: 'Régions'}), // légende triée par naissances décroissantes
vl.tooltip().fieldQ('NAISD').format(',')
)
.title({
text: "Naissances domiciliées par région Outre-mer",
})
.width(width - 150)
.render({renderer: 'svg'})
}
Insert cell
Insert cell
Insert cell
viewof naisd_reg = {
const insee_csv_zipped = "https://www.insee.fr/fr/statistiques/fichier/1893255/base-naissances-2019_CSV.zip" ;
// accès direct au zip de l'Insee
const tb_naiss = aq.fromCSV( await fetch_txtfile_from_zip(insee_csv_zipped, // fetch + JsZip
null, {proxy: 'sofetch'}), // proxy pour ouvrir le CORS
{delimiter: ";", parse: {CODGEO: String}} ) ;

const n_dep = await fetch("https://www.data.gouv.fr/fr/datasets/r/d77bb584-932b-4eae-a84b-8117f2a18ddb")
.then(buf => buf.text())
.then(buf => aq.fromCSV(buf, {delimiter: ";", autoType: false})) ;
const n_reg = await fetch("https://www.data.gouv.fr/fr/datasets/r/bfc0ec12-8a80-4225-a361-fe6ce14a9a6c")
.then(buf => buf.text())
.then(buf => aq.fromCSV(buf, {delimiter: ";", autoType: false})) ;
return tb_naiss.fold(aq.startswith('NAISD'), {as: ['AN','NAISD']})
.derive({AN: d => '20' + op.substring(d.AN, 5),
DEP: d => op.substring(d.CODGEO, 0, d.CODGEO < '97' ? 2 : 3) })
.lookup(n_dep, ['DEP','codgeo'], 'reg')
.groupby('reg','AN').rollup({NAISD: op.sum('NAISD')})
.lookup(n_reg, ['reg','codgeo'], 'libgeo')
.orderby('reg', 'AN')
.select({'reg': 'REG'}, {'libgeo': 'LIBREG'}, 'AN', 'NAISD')
.view() ;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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