Public
Edited
Sep 28, 2023
bourse_immo_chine.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
chine_bourse
Plot.plot({
height: 720,
// axis: null,
// y: {domain: [0, step]},
color: {scheme: "YlGnBu"},
facet: {data: chine_bourse, y: "name"},
marks: [
d3.range(bands).map((i) => Plot.areaY(industries, {x: "date", y: (d) => d.unemployed - i * step, fill: i, clip: true})),
Plot.text(industries, Plot.selectFirst({text: "industry", frameAnchor: "top-left", dx: 6, dy: 6})),
Plot.frame()
]
})
Plot.plot({
height: 150,
width: 300,
axis: null,
// x : {range:[0,800]},
// y : {range:[0,1000]},
facet: {data: chine_bourse, y: "Name"},
marks: [
Plot.lineY(chine_bourse, {x: "Date", y: "Close"}),
Plot.text(chine_bourse, Plot.selectFirst({text: "Name", frameAnchor: "top-left", dx: 6, dy: 6})),
// Plot.frame()
]
})
bands = 7
Plot.plot((() => {
const n = 1; // number of facet columns
const keys = Array.from(d3.union(chine_bourse.map((d) => d.Name)));
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);
return {
height: 200,
axis: null,
grid:false,
y: {insetTop: 10},
fx: {padding: 0.50},
marks: [
Plot.lineY(chine_bourse, Plot.normalizeY("extent" , {
x: "Date",
y: "Close",
fx: (d) => fx(d.Name),
fy: (d) => fy(d.Name)
})),
Plot.text(keys, {fx, fy, frameAnchor: "top-left", dx: -120, dy: 6}),
Plot.frame()
]
};
})())
const keys = Array.from(d3.union(chine_bourse.map((d) => d.Name)));
const index = new Map(keys.map((key, i) => [key, i]));
a = Array.from(d3.union(chine_bourse.map((d) => d.Name)))
new Map(a.map((key, i) => [key, i]));
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.
