Published
Edited
Mar 17, 2022
raw[0]
typeof(raw[0].gdpPercap)
undefinedValuesCount = {
let count = 0
raw.forEach(obj => {
if(typeof(obj.pop)!="number") count += 1
if(typeof(obj.lifeExp)!="number") count += 1
if(typeof(obj.gdpPercap)!="number") count += 1
})
return count
}
Explorons d'abord les différents groupements qu'on pourrait faire avec ces données
g_contins = d3.group(raw, d => d.continent)
g_yeCou = d3.group(raw, d => d.year, d => d.country)
g_conCouY = d3.group(raw, d => d.continent, d => d.country, d => d.year)
meanPercont = d3.map(g_contins, d =>
{let obk = {continent:d[0],
pop: d3.mean(d[1], f => f.pop),
lifeExp: d3.mean(d[1], f => f.lifeExp),
gdpPercap: d3.mean(d[1], f => f.gdpPercap)}
return obk})
meanContYears = Array.from(d3.rollup(raw, d => {
return{pop : d3.mean(d.map(n=> n.pop)),
lifeExp : d3.mean(d.map(n=> n.lifeExp)),
gdpPercap : d3.mean(d.map(n=> n.gdpPercap))
}
},
d => d.year, d => d.continent)) // On obtient le rollup avec pour chaque année la moyenne des variables, pour chaque continent.
.map(year => {
let obj = Array.from(year[1]).map(continent=>{
let obj = continent[1]
obj['continent'] = continent[0]
obj['year'] = year[0]
return obj })
return obj}).flat(1) // On transfrome cette Map en un tableau d'objets pour pouvoir le manipuler plus facilement.
pays = d3.map(Array.from(d3.group(raw, d=> d.country)), d=>d[0])
continents = d3.map(Array.from(d3.group(raw, d=> d.continent)), d=>d[0])
pays_select
pays_ofContinent_select = Inputs.select(d3.map(Array.from(g_conCouY.get(continent_select)), d=>d[0]), {label : "Pays of continent"})
qualite_selected = (sel) => qualite.get(sel)
viewof qualites = Inputs.select(d3.map(Array.from(qualite), d => d[0]), {label: "Variable qualitatives" ,width: '50%'})
viewof qualites1 = Inputs.select(d3.map(Array.from(qualite), d => d[0]), {label: "Variable qualitatives MAP" ,width: '50%'})
qualites
qualites1
annees = d3.map(Array.from(d3.group(raw, d=> d.year)), d=>d[0])
years_range = [annees[annees.length-1], annees[0]] //assumes data is sorted
viewof annees_slider = Inputs.range([1952,2007], {label: "Années", step: 5, width: '50%'})
data_ofyear = Array.from(g_yeCou.get(annees_slider)).map(d => d[1]).map(d=>d[0])
lc2 = linechart(raw,
Array.from(d3.group(g_contins.get(continent_select), d=> d.country)),
"Evolution des '"+ qualites +"' par pays",
"year",
qualite_selected(qualites),
"country",
450,
"Années",
qualites)
lc3 = linechart(meanContYears,
Array.from(d3.group(meanContYears, d=>d.continent)),
"Evolution des '"+ qualites1 +"' par pays",
"year",
qualite_selected(qualites1),
"continent",
450,
"Années",
qualites)
Histogramme
La visualisation par un histogramme peut être utile pour voir l'évolution des distributions de ces variables par année aussi.
Geo Map
geo_map()
geo_map = (width = 900, g) => {
// Params
let height = width - 100
let margin = { top: 10, right: 10, bottom: 10, left: 10 };
let W = width - margin.left - margin.right,
H = height - margin.top - margin.bottom;
var colorExtent = d3.extent(data_ofyear.map(d => d[qualite_selected(qualites1)]))
var color = d3.scaleSequential(d3.interpolateOrRd).domain(colorExtent)
// Projection
let projection = d3geo.geoKavrayskiy7()
.fitSize([W*1.2, H-margin.bottom*3], countries)
.translate([W*0.46, W*2/3*0.6])
let path = d3.geoPath(projection)
// svg
const svg = g || d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height);
// map
svg.append("g").selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.style('fill-opacity', 1)
.style('fill',d=>color(countriesObj_byCode.get(d.id)))
.attr("name-country", d => {
return countries_hash.get(d.id)
})
.on("mouseenter",(e,d) =>{
svg.append("text")
.attr("class","legend")
.attr("x",width/3 - self.length)
.attr("y",height - margin.bottom*1.75 )
.text(countries_hash.get(d.id))
svg.append("text")
.attr("class","legend")
.attr("x",width/3 - self.length)
.attr("y",height - margin.bottom*0.5 )
.text(qualites1 + " : "+ countriesObj_byCode.get(d.id))
}).on("mouseleave",(e,d) =>{
svg.selectAll(".legend").remove()
})
return svg.node()
}
countries = topojson.feature(world,world.objects.countries)
countries_hash = new Map(countries_codes.map(d => [d['country-code'], d.name]))
countries_hash_arr = Array.from(countries_hash)
countriesObj = {return {
gdpPercap : new Map(data_ofyear.map(d => [d['country'], d.gdpPercap])),
pop : new Map(data_ofyear.map(d => [d['country'], d.pop])),
lifeExp : new Map(data_ofyear.map(d => [d['country'], d.lifeExp])),
}
}
features = topojson.feature(world, world.objects.countries).features
countriesObj_byCode = new Map(countries_hash_arr.map((n => [n[0], countriesObj[qualite_selected(qualites1)].get(n[1])])))
// dashboard()
dashboard = () => html`
<style>
td{
padding-left: 10px;
}
</style>
<div style="width-max:100%">
<table border=1>
<tr><th>Carte géographique</th><th></th></tr>
<tr>
<td style="height: inherit">${geo_map(550)}</td>
<td style="padding-top: 5%">${lc3}</td>
</tr>
<tr>
<td colspan='2', style="margin: 0 20%;">
${viewof qualites1}
${viewof annees_slider}
<td>
</tr>
<tr>
<td>${lc1}</td>
<td>${lc2}</td>
</tr>
<tr>
<td colspan="2">
${viewof qualites}
${viewof continent_select}
</td>
</tr>
</table>
</div>
`
raw = d3.csv("https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/gapminder.csv",d3.autoType)
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.
