23 / GIS & Risks Assessment Masters student @ master-geomatique.org
Public
Edited
Mar 10, 2024
viewof choix_direction = Inputs.radio(direction, {
label: "Direction",
format: (x) => x.nom,
value: direction[0]
})
viewof choix_stock = Inputs.checkbox(["Travail", "Etudes"], {
label: "Sélectionner des données",
value: ["Travail", "Etudes"]
})
viewof choix_input = Inputs.radio(["Moyenne 2010-2020", "Slider 2010-2020"], {
label: "Affichage"
})
viewof input_annee = test_choix_affichage(choix_input)
viewof choix_com = Inputs.select(
Array.from(new Set(flux_cacp.map((d) => d.nom_dest))),
{
label: "Commune"
}
)
carto = (e) => {
if (e[0] == "Travail" && e[1] == "Etudes") {
return bertin.draw({
params: {
background: "#E8F8FF",
margin: 10,
projection: "user",
extent: COM_FLUX_CACP
},
layers: [
{
type: "header",
text:
choix_direction.nom +
" à " +
choix_com +
" : " +
total_travail_com +
" travailleurs et " +
total_etudes_com +
" étudiants",
background: "#24637a",
fill: "white",
fontSize: 24,
anchor: "start"
},
{
geojson: links_travail_com,
strokeWidth: {
type: "linear",
values: "stock",
k: 20,
fixmax: d3.max(flux_travail.map((d) => +d.stock)),
leg_x: 850,
leg_y: 20,
leg_w: 110,
leg_title: "Nombre de travailleurs"
},
stroke: "#cf429d",
strokeOpacity: 0.8,
strokeLinecap: "round",
tooltip: ["$nom_origin", "$stock", "travailleurs"]
},
{
geojson: links_etudes_com,
strokeWidth: {
type: "linear",
values: "stock",
k: 20,
fixmax: d3.max(flux_etudes.map((d) => +d.stock)),
leg_x: 850,
leg_y: 100,
leg_w: 110,
leg_title: "Nombre d'étudiants"
},
stroke: "#42CE42",
strokeOpacity: 0.8,
strokeLinecap: "round",
tooltip: ["$nom_origin", "$stock", "étudiants"]
},
{
type: "footer",
text:
`↑ Nord ↑ | Source: INSEE ` +
input_annee +
` | EPSG:2154 RGF93/ Lambert-93 | Erwan Vinot, 2024
D3.JS, Bertin.js`
},
{ geojson: commune_select, fill: "#E14A88", stroke: "E8F8FF" },
{ geojson: CACP_DECO, fill: "#A4AFE8", stroke: "#E8F8FF" },
{ geojson: COM_FLUX_CACP, fill: "#A4D5EA" },
{ geojson: COMMUNES_DECO, fill: "none", stroke: "#A4D5EA" }
]
});
}
if (e[0] == "Travail") {
return bertin.draw({
params: {
background: "#E8F8FF",
margin: 10,
projection: "user",
extent: COM_FLUX_CACP
},
layers: [
{
type: "header",
text:
choix_direction.nom +
" à " +
choix_com +
" : " +
total_travail_com +
" travailleurs",
background: "#24637a",
fill: "white",
fontSize: 24,
anchor: "start"
},
{
geojson: links_travail_com,
strokeWidth: {
type: "linear",
values: "stock",
k: 20,
fixmax: d3.max(flux_travail.map((d) => +d.stock)),
leg_x: 850,
leg_y: 20,
leg_w: 110,
leg_title: "Nombre de travailleurs"
},
stroke: "#cf429d",
strokeOpacity: 0.8,
strokeLinecap: "round",
tooltip: ["$nom_origin", "$stock", "travailleurs"]
},
{
type: "footer",
text:
`↑ Nord ↑ | Source: INSEE ` +
input_annee +
` | EPSG:2154 RGF93/ Lambert-93 | Erwan Vinot, 2024
D3.JS, Bertin.js`
},
{ geojson: commune_select, fill: "#E14A88", stroke: "E8F8FF" },
{ geojson: CACP_DECO, fill: "#A4AFE8", stroke: "#E8F8FF" },
{ geojson: COM_FLUX_CACP, fill: "#A4D5EA" },
{ geojson: COMMUNES_DECO, fill: "none", stroke: "#A4D5EA" }
]
});
}
if (e[0] == "Etudes") {
return bertin.draw({
params: {
background: "#E8F8FF",
margin: 10,
projection: "user",
extent: COM_FLUX_CACP
},
layers: [
{
type: "header",
text:
choix_direction.nom +
" à " +
choix_com +
" : " +
total_etudes_com +
" étudiants",
background: "#24637a",
fill: "white",
fontSize: 24,
anchor: "start"
},
{
geojson: links_etudes_com,
strokeWidth: {
type: "linear",
values: "stock",
k: 20,
fixmax: d3.max(flux_etudes.map((d) => +d.stock)),
leg_x: 850,
leg_y: 20,
leg_w: 110,
leg_title: "Nombre d'étudiants"
},
stroke: "#42CE42",
strokeOpacity: 0.8,
strokeLinecap: "round",
tooltip: ["$nom_origin", "$stock", "étudiants"]
},
{
type: "footer",
text:
`↑ Nord ↑ | Source: INSEE ` +
input_annee +
` | EPSG:2154 RGF93/ Lambert-93 | Erwan Vinot, 2024
D3.JS, Bertin.js`
},
{ geojson: commune_select, fill: "#E14A88", stroke: "E8F8FF" },
{ geojson: CACP_DECO, fill: "#A4AFE8", stroke: "#E8F8FF" },
{ geojson: COM_FLUX_CACP, fill: "#A4D5EA" },
{ geojson: COMMUNES_DECO, fill: "none", stroke: "#A4D5EA" }
]
});
} else {
return md`Sélectionnez des données`;
}
}
bertin = require("bertin@latest")
geo = require("geotoolbox")
lambert93 = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
d3 = require("d3@7", "d3-geo-projection@4")
COM_FLUX_CACP = d3
.json(
"https://raw.githubusercontent.com/erw-1/observable-dump/main/flux-cacp/flux_communes_cacp.geojson"
)
.then((d) => geo.simplify(d, { k: simplify }))
CACP_DECO = d3
.json(
"https://raw.githubusercontent.com/erw-1/observable-dump/main/flux-cacp/cacp_deco.geojson"
)
.then((d) => geo.simplify(d, { k: simplify }))
COMMUNES_DECO = d3
.json(
"https://raw.githubusercontent.com/erw-1/observable-dump/main/flux-cacp/communes_deco.geojson"
)
.then((d) => geo.simplify(d, { k: simplify }))
commune_select = ({
type: "FeatureCollection",
features: COM_FLUX_CACP.features.filter(
(d) => d.properties.nom_com == choix_com
)
})
test_choix_affichage = (e) => {
if (e == "Slider 2010-2020") {
return Inputs.range([2010, 2020], { label: "Année", step: 1, value: 2010 });
} else
return Inputs.radio(["avg"], {
label: "Moyenne sélectionnée",
value: "avg"
});
}
direction = [
{
nom: "Arrivées en CACP",
url: "https://raw.githubusercontent.com/erw-1/observable-dump/main/flux-cacp/arrivees_cacp.csv"
},
{
nom: "Départs pour la CACP",
url: "https://raw.githubusercontent.com/erw-1/observable-dump/main/flux-cacp/departs_cacp.csv"
}
]
champ_etudes = "flux_etudes_" + String(input_annee)
champ_travail = "flux_travail_" + String(input_annee)
flux_cacp = d3.csv(choix_direction.url)
flux_etudes = flux_cacp.map((item) => {
const newItem = {};
// Obtenir toutes les clés de l'objet
Object.keys(item).forEach((key) => {
// Vérifier si la clé correspond aux critères souhaités
if (
key === "code_origin" ||
key === "nom_origin" ||
key === "code_dest" ||
key === "nom_dest" ||
(key.startsWith("flux_etudes") && key.endsWith(input_annee))
) {
// Renommer la clé en "stock" si elle correspond à la valeur de champ_etudes
if (key === champ_etudes) {
newItem["stock"] = item[key];
} else {
newItem[key] = item[key]; // Ajouter la clé au nouvel objet si elle correspond aux critères
}
}
});
return newItem; // Retourner le nouvel objet créé
})
links_etudes = bertin.links({
geojson: COM_FLUX_CACP,
geojson_id: "code_com",
data: flux_etudes,
data_i: "code_origin",
data_j: "code_dest",
planar: true
})
links_etudes_com = {
const features =
choix_direction == "Départs pour la CACP"
? links_etudes.features.filter(
(d) => d.properties.nom_origin == choix_com
)
: links_etudes.features.filter((d) => d.properties.nom_dest == choix_com);
return { type: "FeatureCollection", features: features };
}
flux_travail = flux_cacp.map((item) => {
const newItem = {};
Object.keys(item).forEach((key) => {
if (
key === "code_origin" ||
key === "nom_origin" ||
key === "code_dest" ||
key === "nom_dest" ||
(key.startsWith("flux_travail") && key.endsWith(input_annee))
) {
if (key === champ_travail) {
newItem["stock"] = item[key];
} else {
newItem[key] = item[key];
}
}
});
return newItem;
})
links_travail = bertin.links({
geojson: COM_FLUX_CACP,
geojson_id: "code_com",
data: flux_travail,
data_i: "code_origin",
data_j: "code_dest",
planar: true
})
links_travail_com = {
const features =
choix_direction == "Départs"
? links_travail.features.filter(
(d) => d.properties.nom_origin == choix_com
)
: links_travail.features.filter(
(d) => d.properties.nom_dest == choix_com
);
return { type: "FeatureCollection", features: features };
}
total_travail_com = links_travail_com.features.reduce(
(accumulator, feature) => {
return accumulator + Number(feature.properties.stock);
},
0
)
total_etudes_com = links_etudes_com.features.reduce((accumulator, feature) => {
return accumulator + Number(feature.properties.stock);
}, 0)
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.
