embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
hconcat: [
{
width:300,
height:300,
data: {
values: trainsByStationFiltered.objects()
},
params: [
{
name: "selected",
select: {type: "point"}
}
],
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
}
},
stroke: {
condition: {
param: 'selected', value: 'orange', "empty": false
},
value:null
}
}
},
{
layer: [
{
data: {
url: "https://mjlobo.github.io/teaching/eivp/departements.json",
format: {
type: "topojson",
feature: "departements"
}
},
projection: {
type: "mercator"
},
mark: {
type: "geoshape",
fill: "lightgray",
stroke: "white"
}
},
{
data: {
values: gares.objects()
},
projection: {
type: "mercator"
},
mark: {type: "point"},
encoding: {
longitude: {
field: "X_WGS84",
type: "quantitative"
},
latitude: {
field: "Y_WGS84",
type: "quantitative"
},
tooltip: {field: "LIBELLE", "type": "nominal"},
size: {"value": 20},
color: {"value": "steelblue"}
}
},
{ //on ajoute une layer pour représenter les trajets
data: {
values: trainsByStationFiltered.objects()
},
params: [
{
name: "selected",
select: {type: "point"}
}
],
transform: [
{
lookup: "departure_station", // on va chercher les coordonnées des gares avec lookup
from: {
data: {values: gares.objects()},
key: "LIBELLE",
fields: ["X_WGS84", "Y_WGS84"],
},
as: ["X_WGS84_departure", "Y_WGS84_departure"]
},
{
lookup: "arrival_station",
from: {
data: {values: gares.objects()},
key: "LIBELLE",
fields: ["X_WGS84", "Y_WGS84"],
},
as: ["X_WGS84_arrival", "Y_WGS84_arrival"]
},
{filter: "datum.X_WGS84_departure != null && datum.Y_WGS84_departure != null && datum.X_WGS84_arrival != null && datum.Y_WGS84_arrival != null"} //on ajoute un filtre pour ne pas considerer les trajets avec des gares qui n'ont pas de coordonnées, et pour utiliser le valeur venant du slider.
],
projection: {
type: "mercator"
},
mark: "rule",
encoding: {
longitude: {
field: "X_WGS84_departure",
type: "quantitative"
},
latitude: {
field: "Y_WGS84_departure",
type: "quantitative"
},
longitude2: {
field: "X_WGS84_arrival",
type: "quantitative"
},
latitude2: {
field: "Y_WGS84_arrival",
type: "quantitative"
},
color: {
condition: {param: 'selected', value: 'orange', empty: false},
value: 'steelblue'
}
}
}
]
}
]
})