DataViz, Dashboard, Observable Ambassador and Notion Certified
chantiersEnCours = FileAttachment("chantiers-en-cours .json").json()
data = fetch("https://api.weather.gov/gridpoints/OKX/33,37/forecast").then((response) => response.json())
Coords = chantiersEnCours.map((d) => d.geo_point_2d)
Plot.dot(Coords, { x: "lon", y: "lat" }).plot()
Plot.plot({
marks: [
Plot.rectY(
chantiersEnCours.filter((e) => e.duree < 300),
Plot.binX({ y: "count" }, { x: "duree" })
),
Plot.ruleY([0])
]
})
function compte(data) {
const ENTREPRISES = new Map();
data.forEach((e) => {
if (ENTREPRISES.has(e.entreprise)) {
ENTREPRISES.set(e.entreprise, ENTREPRISES.get(e.entreprise) + 1);
} else {
ENTREPRISES.set(e.entreprise, 1);
}
});
return ENTREPRISES;
}
Plot.plot({
marginLeft: 150,
marks: [
Plot.barX(
chantiersEnCours,
Plot.groupY(
{ x: "count" },
{
y: "commune",
fill: "commune",
sort: { y: "x", reverse: true, limit: 10 }
}
)
),
Plot.ruleX([0])
]
})
Plot.plot({
marks: [
Plot.rectY(
chantiersEnCours.filter((d) => d.duree < 300),
Plot.binX({ y: "count" }, { x: "duree" })
),
Plot.ruleY([0])
]
})
Plot.plot({
marginLeft: 150,
marks: [
Plot.barX(
chantiersEnCours,
Plot.groupY(
{ x: "sum" },
{
y: "entreprise",
fill: "entreprise",
sort: { y: "x", reverse: true, limit: 10 }
}
)
),
Plot.ruleX([0])
]
})
Plot.plot({
marginLeft: 150,
marks: [
Plot.barX(
chantiersEnCours,
Plot.groupY(
{ x: "sum" },
{
y: "commune",
fill: "commune",
sort: { y: "x", reverse: true, limit: 10 }
}
)
),
Plot.ruleX([0])
]
})
function date2num(d) {
return Math.floor(d / (1000 * 60 * 60 * 24));
}
date = new Date()
date2num(date)
date2num(new Date(chantiersEnCours[0].datedebut))
import { rangeSlider } from "@mootari/range-slider"
map = {
const container = html`<div id="mymap" style="height:600px;">`;
yield container;
const map = L.map(container).setView([43.6, 1.451], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
{
const div = document.querySelector("#mymap");
div.append(plot1);
}
plot1 = Plot.dot(
chantiersEnCours
.filter((d) => date2num(new Date(d.datedebut)) > monslider[0])
.filter((d) => date2num(new Date(d.datefin)) < monslider[1]),
{
x: (d) => d.geo_point_2d.lon,
y: (d) => d.geo_point_2d.lat,
r: "duree",
//fill: "entreprise",
stroke: "entreprise",
opacity: 0.14,
tip: true
}
).plot({ x: { domain: [1.2, 1.6] }, y: { domain: [43.5, 43.76] } })
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.
