Public
Edited
Apr 6
1 fork
import { aq, op } from '@uwdata/arquero'
embed = require("vega-embed@5")
vegalite = require("@observablehq/vega-lite@0.1")
viewof accidents_de_voiture_chicago = aq // viewof shows the table view, but assigns the table value
.fromCSV(await FileAttachment('car_crashes_chicago@7.csv').text())
.view({ height: 240 })
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 500,
height: 500,
data: {url: "https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json",
format: {type: "topojson", feature: "chicago_sides"} // on doit indiquer quels objets on va dessiner
},
projection: {type :"mercator" },
mark: {
type: "geoshape"
}
})
accidents_par_heure_jour = accidents_de_voiture_chicago
.groupby("heure", "jour")
.count()
.rename({ count: "accidents_count" })
.orderby("heure", "jour")
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: accidents_par_heure_jour.objects() },
mark: { type: "rect" },
encoding: {
x: {
field: "heure",
title: "Heure de la journée",
bin: { maxbins: 24 }, // Regrouper par heure
type: "ordinal"
},
y: {
field: "jour",
title: "Jour de la semaine",
type: "ordinal"
},
color: {
field: "accidents_count",
type: "quantitative",
title: "Nombre d'accidents",
scale: { scheme: "reds" }
},
tooltip: [
{ field: "heure", title: "Heure" },
{ field: "jour", title: "Jour" },
{ field: "accidents_count", title: "Accidents" }
]
},
width: 600,
height: 300
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: accidents_de_voiture_chicago.objects() },
mark: { type: "bar" },
encoding: {
x: {
field: "conditions_atmospheriques",
title: "Conditions météo",
axis: { labelAngle: 40 } // Incliner les étiquettes avec angle
},
y: {
aggregate: "count",
title: "Nombre d'accidents"
},
color: {
field: "conditions_atmospheriques",
title: "Météo",
scale: { scheme: "category10" } // Palette de couleurs
},
tooltip: [
{ field: "conditions_atmospheriques" },
{ aggregate: "count", title: "Accidents" }
]
},
width: 600,
height: 400
})
// préparation des données
accidents_filtres = accidents_de_voiture_chicago
.filter(d => op.equal(d.hit_and_run, "Y") || op.equal(d.hit_and_run, "N"))
.groupby("hit_and_run")
.count()
.derive({
pourcentage: d => op.round(d.count / op.sum(d.count) * 100, 1)
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: accidents_filtres.objects() },
mark: { type: "arc", outerRadius: 100 },
encoding: {
theta: {
field: "count",
title: "Pourcentage d'accidents",
type: "quantitative"
},
color: {
field: "hit_and_run",
title: "Départ de fuite",
scale: {
domain: ["Y", "N"],
range: ["orange", "green"]
}
},
tooltip: [
{ field: "hit_and_run", title: "Catégorie" },
{ field: "count", title: "Accidents" },
{ field: "pourcentage", title: "Pourcentage"}
]
},
width: 300,
height: 300
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: accidents_de_voiture_chicago.objects() },
mark: { type: "bar", opacity: 0.8 },
encoding: {
x: {
field: "vitesse",
bin: { maxbins: 20 },
title: "Vitesse (mph)"
},
y: { aggregate: "count", title: "Nombre d'accidents" },
color: {
field: "hit_and_run",
title: "Départ de fuite",
scale: { range: ["red", "green", "blue"] }
}
},
width: 600,
height: 300
})
// Préparer les données
donnees_radar_long = accidents_de_voiture_chicago
.groupby("Side", "heure")
.count()
.rename({ count: "accidents" })
embed({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": { "values": donnees_radar_long.objects() },
"mark": "area",
"encoding": {
"x": { "field": "heure", "type": "quantitative", "title": "Heure" },
"y": { "field": "accidents", "type": "quantitative", "stack": "center", "title": "Nombre d'accidents" },
"color": { "field": "Side", "type": "nominal", "scale": { "scheme": "category20b" } }
},
"width": 700,
"height": 400
})
// Préparation des données
accidents_groupes = aq.from(accidents_de_voiture_chicago.objects())
.groupby("conditions_atmospheriques", "conditions_luminosite")
.rollup({ nb_accidents: op.count() })
.objects()
embed({
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
width: 600,
height: 400,
data: { values: accidents_groupes },
mark: "bar",
encoding: {
x: { field: "conditions_atmospheriques", type: "nominal", title: "Conditions météo" },
y: { field: "nb_accidents", type: "quantitative", title: "Nombre d'accidents" },
color: { field: "conditions_luminosite", type: "nominal", title: "Luminosité" },
tooltip: [
{ field: "conditions_atmospheriques", title: "Météo" },
{ field: "conditions_luminosite", title: "Luminosité" },
{ field: "nb_accidents", title: "Accidents" }
]
}
})
// Compter le nombre d'accidents par quartier (La colonne "Side")
accidents_par_quartier = accidents_de_voiture_chicago
.groupby("Side")
.count()
.orderby(("count"))
.rename({ count: "Nombre_d_accidents"})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: accidents_par_quartier.objects() },
mark: { type: "bar" },
encoding: {
x: {
field: "Side",
title: "Quartier",
sort: "-y", // <-- Tri Desc
axis: { labelAngle: 40 } // Incliner les étiquettes
},
y: {
field: "Nombre_d_accidents",
title: "Nombre d'accidents"
},
color: {
field: "Nombre_d_accidents",
type: "quantitative",
scale: {
scheme: "reds",
reverse: false // dégradé clair vers foncé
}
},
tooltip: [
{ field: "Side" },
{ field: "Nombre_d_accidents" }
]
},
width: 600,
height: 400
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 700,
height: 600,
layer: [
// Fond de carte des quartiers
{
data: { url: "https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json", format: { type: "topojson", feature: "chicago_sides" } },
mark: { type: "geoshape", fill: "lightgray", stroke: "white" }
},
// Points d'accidents
{
data: { values: accidents_de_voiture_chicago.objects() },
mark: { type: "circle", color: "red", opacity: 1, size: 5 },
encoding: {
longitude: { field: "LONGITUDE" },
latitude: { field: "LATITUDE" }
}
}
]
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 700,
height: 600,
layer: [
// Fond de carte des quartiers
{
data: { url: "https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json", format: { type: "topojson", feature: "chicago_sides" } },
mark: { type: "geoshape", fill: "lightgray", stroke: "white" }
},
// Points d'accidents
{
data: { values: accidents_de_voiture_chicago.objects() },
mark: { type: "circle", color: "red", opacity: 1, size: 5 },
encoding: {
longitude: { field: "LONGITUDE" },
latitude: { field: "LATITUDE" },
color: {field: "conditions_luminosite", type: "nominal"}
}
}
]
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
title: "Accidents par condition de luminosité",
width: 700,
height: 400,
data: { values: accidents_de_voiture_chicago.objects() },
facet: {
column: {
field: "conditions_luminosite",
title: "Condition de luminosité",
header: { labelAngle: 0, labelAlign: "center" }
}
},
spec: {
layer: [
// Fond de carte
{
data: { url: "https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json", format: { type: "topojson", feature: "chicago_sides" } },
mark: { type: "geoshape", fill: "lightgray", stroke: "white" },
projection: { type: "mercator" }
},
// Points d'accidents
{
mark: {
type: "circle",
opacity: 0.7,
size: 8,
color: "#e41a1c"
},
encoding: {
longitude: { field: "LONGITUDE" },
latitude: { field: "LATITUDE" }
}
}
]
},
columns: 3
})
FileAttachment("vitesse_accidents_3D_Kepler.JPG").image()
{
const url = await FileAttachment("gif_accodents_vitesse_date.gif").url();
return html`<iframe src=${url} width=500 height=285></iframe>`;
}
FileAttachment("accidents-vitesse-qgis.png").image()
FileAttachment("accidents-vitesse-qgis2@1.png").image()
FileAttachment("accidents-vitesse-qgis3.png").image()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 700,
height: 400,
hconcat: [
// Carte Y - Rougea
{
layer: [
{
data: { url: "https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json", format: { type: "topojson", feature: "chicago_sides" } },
mark: { type: "geoshape", fill: "#f0f0f0", stroke: "white" },
projection: { type: "mercator" }
},
{
data: { values: accidents_de_voiture_chicago.objects() },
transform: [ { filter: "datum.hit_and_run === 'Y'" } ],
mark: { type: "circle", color: "red", size: 6 },
encoding: {
longitude: { field: "LONGITUDE" },
latitude: { field: "LATITUDE" }
}
}
],
title: "Délits de fuite (Y)"
},
// Carte N - Bleu
{
layer: [
{
data: { url: "https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json", format: { type: "topojson", feature: "chicago_sides" } },
mark: { type: "geoshape", fill: "#f0f0f0", stroke: "white" },
projection: { type: "mercator" }
},
{
data: { values: accidents_de_voiture_chicago.objects() },
transform: [ { filter: "datum.hit_and_run === 'N'" } ],
mark: { type: "circle", color: "blue", size: 6 },
encoding: {
longitude: { field: "LONGITUDE" },
latitude: { field: "LATITUDE" }
}
}
],
title: "Pas de délit de fuite (N)"
},
// Carte NaN - Gris
{
layer: [
{
data: { url: "https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json", format: { type: "topojson", feature: "chicago_sides" } },
mark: { type: "geoshape", fill: "#f0f0f0", stroke: "white" },
projection: { type: "mercator" }
},
{
data: { values: accidents_de_voiture_chicago.objects() },
transform: [ { filter: "!datum.hit_and_run || (datum.hit_and_run !== 'Y' && datum.hit_and_run !== 'N')" } ],
mark: { type: "circle", color: "gray", size: 6 },
encoding: {
longitude: { field: "LONGITUDE" },
latitude: { field: "LATITUDE" }
}
}
],
title: "Données manquantes (NaN)"
}
]
})
// defini bertin
bertin = require("bertin@latest")
// Charger le JSON des quartiers de Chicago
chicagoGeo = await fetch("https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json")
.then(res => res.json())
accidentsPoints = ({
type: "FeatureCollection",
features: accidents_de_voiture_chicago.objects().map(d => ({
type: "Feature",
geometry: {
type: "Point",
coordinates: [+d.LONGITUDE, +d.LATITUDE]
},
properties: {
CONDITIONS_METEO: d.conditions_atmospheriques,
CONDITIONS_LUMIERE: d.conditions_luminosite
}
}))
})
// Dessiner la carte de points avec Bertin.js
map4 = bertin.draw({
params: { projection: d3.geoMercator()},
layers: [
{
geojson: accidentsPoints,
type: "layer",
fill: "red", stroke: "white", strokewidth: 0.4, fillopacity: 0.7,
tooltip: ["CONDITIONS_METEO:", "$CONDITIONS_METEO","CONDITIONS_LUMIERE:", "$CONDITIONS_LUMIERE"]
},
{
geojson: chicagoGeo,
type: "layer",
fill: "lightblue", stroke: "black", strokewidth: 0.5
}
]
})
// Séparer les accidents de jour et de nuit via Arquero
dayAccidents = accidents_de_voiture_chicago.filter(d => d.conditions_luminosite === "DAYLIGHT")
nightAccidents = accidents_de_voiture_chicago.filter(d => d.conditions_luminosite == "DARKNESS")
dayPoints = ({
type: "FeatureCollection",
features: dayAccidents.objects().map(d => ({
type: "Feature",
geometry: {
type: "Point",
coordinates: [+d.LONGITUDE, +d.LATITUDE]
},
properties: {
conditions_atmospheriques: d.conditions_atmospheriques,
vitesse: d.vitesse
}
}))
})
nightPoints = ({
type: "FeatureCollection",
features: nightAccidents.objects().map(d => ({
type: "Feature",
geometry: {
type: "Point",
coordinates: [+d.LONGITUDE, +d.LATITUDE]
},
properties: {
conditions_atmospheriques: d.conditions_atmospheriques,
vitesse: d.vitesse
}
}))
})
// Dessiner la carte comparative jour/nuit
mapjournuit = bertin.draw({
params: { projection: d3.geoMercator()},
layers: [
// Accidents de jour : points orange
{ geojson: dayPoints, type: "layer",
fill: "orange", stroke: "white", strokewidth: 0.5, fillopacity: 0.7,
tooltip: ["Accident journalier", "$conditions_atmospheriques", "$vitesse"]},
// Accidents de nuit : points bleu acier
{ geojson: nightPoints, type: "layer",
fill: "steelblue", stroke: "white", strokewidth: 0.5, fillopacity: 0.7,
tooltip: ["accident de nuit", "$conditions_atmospheriques", "$vitesse"] },
// Fond : quartiers de Chicago
{ geojson: chicagoGeo, type: "layer",
fill: "lightblue", stroke: "black", strokewidth: 0.5}
]
})
// Dessiner la carte comparative jour
mapjour = bertin.draw({
params: { projection: d3.geoMercator()},
layers: [
// Accidents de jour : points orange
{ geojson: dayPoints, type: "layer",
fill: "orange", stroke: "white", strokewidth: 0.5, fillopacity: 0.7,
tooltip: ["Accident journalier", "$conditions_atmospheriques", "$vitesse"]},
// Fond : quartiers de Chicago
{ geojson: chicagoGeo, type: "layer",
fill: "lightblue", stroke: "black", strokewidth: 0.5}
]
})
// Dessiner la carte comparative jour/nuit
mapnuit = bertin.draw({
params: { projection: d3.geoMercator()},
layers: [
// Accidents de nuit : points bleu acier
{ geojson: nightPoints, type: "layer",
fill: "steelblue", stroke: "white", strokewidth: 0.5, fillopacity: 0.7,
tooltip: ["accident de nuit", "$conditions_atmospheriques", "$vitesse"] },
// Fond : quartiers de Chicago
{ geojson: chicagoGeo, type: "layer",
fill: "lightblue", stroke: "black", strokewidth: 0.5}
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.