Public
Edited
Sep 8, 2023
1 fork
pistes_amenagements_cyclables_departement.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data=
{
const text = await FileAttachment("pistes_amenagements_cyclables_departement.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.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"})
]
})
Plot.plot({
color: {
scheme: "ylgnbu"
},
marks: [
Plot.hexagon(olympians, Plot.hexbin({fill: "sum"}, {x: "weight", y: "height"}))
]
})
import {Icicle} from "@d3/icicle"
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))
Plot.plot({
marginTop: 0,
marginLeft: 100,
y: {grid: true, label: null},
color: {
type: "categorical",
domain: [-1, 1],
unknown: "#aaa",
transform: Math.sign
},
marks: [
Plot.ruleX([0]),
Plot.link(
data_charbon,
Plot.groupY(
{
x1: (D) => D,
x2: (D) => D
},
{
y: "Area",
x1: "annee2015",
x2: "annee2022",
markerStart: "dot",
markerEnd: "arrow",
sort: {y: "x2"},
stroke: 2,
strokeWidth: 2
}
)
)
]
})
data_charbon=
{
const text = await FileAttachment("LIB-09-06-23-charbon - Feuille 7 (1)@1.csv").text();
const parseDate = d3.utcParse("%Y-%m");
return d3.csvParse(text, ({annee2015, annee2022, Area}) => ({
annee2015: +annee2015,
annee2022: +annee2022,
Area:Area
}));
}
data
Plot.plot((() => {
const n = 1; // number of facet columns
const keys = Array.from(d3.union(data.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.pistes);
return {
height: 2000,
axis: null,
grid:false,
y: {insetTop: 10},
fx: {padding: 0.50},
marks: [
Plot.lineY(data, 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()
]
};
})())
Plot.plot((() => {
const n = 2; // 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);
console.log(fy)
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))
industries
Plot.plot({
height: 300,
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: 2000,
axis: null,
y: {domain: [0, 2425]},
x : {range:[0,200]},
facet: {data: data, y: "departement"},
marks: [
Plot.areaY(data, {x: "date", y: "pistes", fill: "red", dx: 150}),
Plot.text(data, 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()
]
})
Plot.plot((() => {
const n = 5; // number of facet columns
const keys = Array.from(d3.union(data.filter(D=> D.date >= d3.max(data, d => d.date)).sort(function (a,b) { return b.pistes - a.pistes}).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.pistes);
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: "pistes",
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
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.
