Pistes cyclables en France - 2
pistes et aménagements cyclables - Feuille 6.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data=
{
const text = await FileAttachment("pistes et aménagements cyclables - Feuille 6.csv").text();
const parseDate = d3.utcParse("%Y-%m");
return d3.csvParse(text, ({date, Pistes_cyclables, Departement}) => ({
date: parseDate(date),
pistes: +Pistes_cyclables,
departement:Departement
}));
}
data_routes=
{
const text = await FileAttachment("pistes et aménagements cyclables - Feuille 5 (1).csv").text();
return d3.csvParse(text, ({Departements, Total}) => ({
total: +Total,
departement:Departements
}));
}
pistes et aménagements cyclables - Feuille 5 (1).csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data.filter(d=> ["Paris", "Gironde"].includes(d.departement))
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(data.filter(d=>d.departement == "Paris"), {x: "date", y: "pistes"})
]
})
chart = {
// var data2dep = data.filter(d=> ["Paris", "Gironde"].includes(d.departement))
const width = 640;
const height = 400;
const margin = {top: 20, right: 30, bottom: 30, left: 40};
const x = d3.scaleUtc()
.domain(d3.extent(data.filter(d=>d.departement == "Paris"), d => d.date))
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, d3.max(data.filter(d=>d.departement == "Paris"), d => d.pistes)])
.range([height - margin.bottom, margin.top]);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(d => x(d.date))
.y(d => y(d.pistes))
(data.filter(d=>d.departement == "Paris")));
return svg.node();
}
data2dep = data.filter(d=> ["Paris", "Gironde", "Loire-Atlantique", "Var", "Gar"].includes(d.departement))
data
Plot.plot((() => {
const n = 1; // number of facet columns
const keys = Array.from(d3.union(data2dep.map((d) => d.departement)));
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);
const maxscale = d3.max(data2dep, d=>d.pistes);
return {
height: 150,
axis: null,
grid:false,
y: {insetTop: 10},
fx: {padding: 0.50},
marks: [
Plot.lineY(data2dep, Plot.normalizeY("extent" , {
x: "date",
y: "pistes",
fx: (d) => fx(d.departement),
fy: (d) => fy(d.departement)
})),
Plot.text(keys, {fx, fy, frameAnchor: "top-left", dx: -120, dy: 6}),
// Plot.frame()
]
};
})())
data3dep = data.filter(d=> ["Paris", "Gironde"].includes(d.departement))
Plot.plot({
height: 150,
axis: null,
y: {domain: [0, step]},
color: {scheme: "YlGnBu"},
facet: {data: data2dep, y: "departement"},
marks: [
d3.range(1).map((i) => Plot.areaY(data2dep, {x: "date", y: "pistes", fill: "steelblue"})),
Plot.text(data2dep, Plot.selectFirst({text: "departement", frameAnchor: "top-left", dx: 6, dy: 6})),
// Plot.frame()
]
})
Plot.plot({
height: 150,
axis: null,
y: {domain: [0, 2425]},
x : {range:[0,200]},
facet: {data: data2dep, y: "departement"},
marks: [
Plot.areaY(data2dep, {x: "date", y: "pistes", fill: "red", dx: 150}),
Plot.text(data2dep, Plot.selectFirst({text: "departement", frameAnchor: "top-left", dx: 6, dy: 6})),
// Plot.frame()
]
})
Plot.plot({
height: 100,
axis: null,
y: {domain: [0, 2425]},
x : {range:[0,30]},
facet: {data: filtered_data, y: "departement"},
marks: [
Plot.lineY(filtered_data, {x: "date", y: "pistes", fill: "red", dx: 150, strokeWidth:2}),
Plot.text(filtered_data, Plot.selectFirst({text: "departement", frameAnchor: "top-left", dx: 6, dy: 6})),
// Plot.frame()
]
})
viewof select_departement_val = Inputs.radio(["Valeur absolue", "Proportion des routes"], {label: "Sélectionner", value: "Valeur absolue"})
Plot.plot((() => {
const n = 5; // number of facet columns
data.forEach(function (d) {
if (data_routes.filter(e => e.departement == d.departement)[0]){
d['proportion_pistes'] = d.pistes / data_routes.filter(e => e.departement == d.departement)[0].total
}
else{
console.log(d.departement)
d['proportion_pistes'] = 0
}
})
let this_variable = select_departement_val == "Valeur absolue" ? 'pistes' : 'proportion_pistes';
const keys = Array.from(d3.union(data.filter(D=> D.date >= d3.max(data, d => d.date)).sort(function (a,b) { return b[this_variable] - a[this_variable]}).map((d) => d.departement)));
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);
const maxscale = d3.max(data, d=>d[this_variable]);
console.log(keys)
console.log(index)
return {
height: 1000,
axis: null,
grid:false,
y: {insetTop: 10},
fx: {padding: 0.20},
marks: [
Plot.frame({fill:"red"}),
Plot.areaY(data, {
x: "date",
y: this_variable,
fx: (d) => fx(d.departement),
fy: (d) => fy(d.departement),
fill:"green"
}),
Plot.text(keys, {fx, fy, frameAnchor: "top-left", dx: 0, dy: 6,
fill:"white", fontSize:14}),
]
};
})())
bands = 1
step = d3.max(data2dep, (d) => d.pistes) / bands
filtered_data = data.filter(d=> ["Paris", "Gironde", "Gard", "Var"].includes(d.departement))
data
data_routes.filter(d => d.departement == "Paris")[0].total
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.
