vegalite = require("@observablehq/vega-lite@0.2")
import { aq, op } from '@uwdata/arquero'
viewof trains = aq // viewof shows the table view, but assigns the table value
.fromCSV(await FileAttachment('small_trains.csv').text())
.view({ height: 240 }) // set maximum height of table viewer in pixels
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: {values: trains.objects()},
mark: "tick",
encoding: {
x: {field: "journey_time_avg", type: "quantitative"}
}
})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: {values: trains.objects()},
mark: {type: "point", filled: true},
encoding: {
x: {field: "journey_time_avg", type: "quantitative"},
y: {field: "avg_delay_all_departing", type: "quantitative"}
}
})
embed = require("vega-embed@5")
trainswithdate = trains.derive({date:d=>op.datetime(d.year, d.month-1)}) // la fonction reçoit le mois indexé à partir de 0, donc on doit faire month-1
trainswithdate.view()
trainswithdate.filter(d=>d.departure_station == "PARIS EST" && d.arrival_station == "STRASBOURG" && d.year == "2017" && d.month == "7").objects()
trainsByStationsAndDate = trainswithdate.groupby('date', 'departure_station', 'arrival_station').rollup({total_num_trips: d => op.mean(d.total_num_trips)})
trainsByDate = trainsByStationsAndDate.groupby('date').rollup({date_total_num_trips: d => op.sum(d.total_num_trips)})
trainsByDate.view()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: {values: trainsByDate.objects()},
mark: "line",
encoding: {
x: {field: "date", type: "temporal"},
y: {field: "date_total_num_trips", type: "quantitative"}
}
})
trainsByStationsAndDateAndService = trainswithdate.groupby('date', 'departure_station', 'arrival_station','service').rollup({total_num_trips: d => op.mean(d.total_num_trips), num_late_at_departure: d=>op.mean(d.num_late_at_departure),num_arriving_late: d=>op.mean(d.num_arriving_late), avg_delay_all_departing:d=>op.mean(d.avg_delay_all_departing), avg_delay_all_arriving:d=>op.mean(d.avg_delay_all_arriving)})
trainsByDateAndService = trainsByStationsAndDateAndService.groupby('date','service').rollup({date_total_num_trips: d => op.sum(d.total_num_trips), date_num_late_at_departure: d=>op.sum(d.num_late_at_departure), date_num_arriving_late: d=>op.sum(d.num_arriving_late), avg_delay_all_departing:d=>op.mean(d.avg_delay_all_departing), avg_delay_all_arriving:d=>op.mean(d.avg_delay_all_arriving)})
trainsByDateAndService.view()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: {values: trainsByDateAndService.objects()},
mark: "line",
encoding: {
x: {field: "date", type: "temporal"},
y: {field: "date_total_num_trips", type: "quantitative"},
color: {field: "service", type: "nominal"}
}
})
trainsFromGdL = trainsByStationsAndDate.groupby('departure_station','arrival_station').rollup({od_total_num_trips: d => op.sum(d.total_num_trips)}).filter(d=>d.departure_station == "PARIS LYON").reify()
trainsFromGdL.view()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: trainsFromGdL.objects()},
mark: "bar",
encoding: {
y: {field: "od_total_num_trips",
type: "quantitative"},
x: {
field: "arrival_station",
type:"nominal"
}
}
})
md`On peut aussi représenter une variable catégorique avec des diagrammes à barres empilées, ici on va les utiliser pour représenter les causes de retard pour les trajets depuis la Gare de Lyon.`
oddelay = trainswithdate.groupby('departure_station','arrival_station', 'delay_cause').rollup({delay_percent: d => op.mean(d.delayed_number)}).filter(d=>d.departure_station == "PARIS LYON").reify()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: oddelay.objects()},
"mark": "bar",
"encoding": {
y: {
field: "delay_percent",
type: "quantitative"
},
x: {field: "arrival_station", type:"nominal"},
color: {
field: "delay_cause"
}
}
})
oddelaydate = trainswithdate.groupby('departure_station','arrival_station', 'delay_cause', 'date').rollup({delay_percent: d => op.mean(d.delayed_number)}).filter(d=>d.departure_station == "PARIS LYON" && d.arrival_station == "GRENOBLE").reify()
oddelaydate.view()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: oddelaydate.objects()},
mark: "area",
encoding: {
x: {
field: "date",
type: "temporal"
},
y: {
field: "delay_percent",
type: "quantitative"
},
color: {
field: "delay_cause"
}
}
})
md`## Matrice origine destination
Afin de comparer différent trajets, on peut utiliser une matrice origine destination. Pour cela on utilise la marque *rect* de Vega Lite. Comme on aura beaucoup de trajets on s'intéressera aux trajets internationaux d'abord.`
odfilteredall = trainswithdate.groupby('departure_station','arrival_station').rollup({od_total_num_trips: d => op.mean(d.total_num_trips), num_late_at_departure: d=>op.mean(d.num_late_at_departure),num_arriving_late: d=>op.mean(d.num_arriving_late)}).reify()
trainsByStationsAndDateAndService.view()
odfilteredallInt = trainsByStationsAndDateAndService.groupby('departure_station', 'arrival_station','service').rollup({total_num_trips: d => op.sum(d.total_num_trips), num_late_at_departure: d=>op.sum(d.num_late_at_departure),num_arriving_late: d=>op.sum(d.num_arriving_late), mean_avg_departure: d=>op.mean(d.avg_delay_all_departing), mean_avg_arrival: d=>op.mean(d.avg_delay_all_arriving)}).filter(d=>d.service=="International").reify()
odfilteredallInt.view()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: {
values: odfilteredallInt.objects()
},
"config": {
"view": {
"strokeWidth": 0,
"step": 13
},
"axis": {
"domain": false
}
},
mark: "rect",
encoding: {
x: {
field: "departure_station",
type: "nominal"
},
y: {
field: "arrival_station",
type: "nominal",
},
color: {
field: "total_num_trips",
type: "quantitative",
legend: {
"title": null
}
}
}
})
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.
