Hello everyone.
So my name is Alexis and I developed data visualization web applications at Westware.
We do a lot of open source things and I'm totally not a trained person initially.
I'm still not a trained person actually.
But since early 2021 we started working for SNCF Rezo who is a firm in charge of handling
the French train infrastructure.
And we started to contribute on OSRD which is I guess it's been advocated here today
already.
Not yet.
Not yet.
Okay.
So OSRD is an open source railway designer.
It's an open source application to simulate trains on real or edited infrastructures.
That's kind of amazing.
The interface is web based.
The project is kind of huge.
The team is a good part of the team must be in the room I guess.
And yeah, you can check it out.
And at some point we, Westware, we've been tasked to actually enhance the space time
diagrams.
What are space time diagrams?
First of all, everybody do not agree on what it should be named.
So it might be circulation diagrams or graphical timetables or train graphs, which is actually
nice train graph, but I'll stay on space time diagrams.
It's probably been invented by a French engineer, Charles Hibry in the early 1840s.
This engineer was in charge of scheduling the trains between Paris and Rouen.
And he used this very smart chart I described right after.
Some people think it's actually a Russian military guy.
No, you remember?
No.
Okay.
There's another lead and it's not clear.
It's been invented by these people.
Let's stay on this track.
So horizontally you see the time.
It's hours of the day.
And vertically you see the list of the stations from Paris to Rouen.
Basically it works.
A train, can I zoom in?
Okay, nice.
The train is aligned and, no, sorry.
Okay, each train is aligned on this diagram.
And you can read a lot of information in this type of diagram just with those lines on this
scale.
So basically the more vertical is aligned, the faster the train goes.
When the line is horizontal, it means that during different time, the train is at the
same position, so it doesn't move.
When two lines are crossing, it means that there are two trains at the same position
on the line at the same time, which means that it's possible.
So if I read this map, for instance, I can know that there are probably two different
tracks, one for each direction, and probably no more.
I know this because trains that don't go in the same direction can cross kind of anywhere,
here or here or here.
But when they are in the same direction, one train has to stop in a station like here
or like somewhere around here, et cetera.
This is kind of crazy, all the information that are just displayed in a so simple diagram.
The thing is, I'm not a train person, but I know this diagram for long because it's
actually on the cover of one of the DataVis reference book, Visual Display of Quantitative
Information by Tuftor.
And it's still used today.
There are reasons why it's screen shot from OpenTrack and not from OSRD.
I'll come back on it later.
But OpenTrack is another open source software to handle trains, and they still use this
kind of diagrams.
And it becomes actually even better once we introduce blocks.
So when they started using trains on tracks, it was kind of easy because basically there
were not enough trains to consider collisions.
But at some point, a train goes fast enough and is heavy enough that when an operator
sees a danger stopped on the track, if he starts braking, he won't be stopped before
the collision.
So people had to find solutions for this.
And so easy, since I'm going to sum up how it works, but I'm not a train person.
So basically, the track is split into blocks, and only one train can be at one block at
any given time, and there's a signal at the entrance of the block.
If there's a train inside the block, the signal is red, so you cannot enter it.
If the signal is orange, it means that you must stop because there is a train in the
next block, basically.
The thing is, when a block is occupied by a train, it means that during a time and on
a distance, there cannot be other trains in this block.
So basically, the occupancy of a block by a train is a rectangle, and when two rectangle
collides, that's bad.
And in OSRD, here is what it looks like in OSRD.
So the red rectangles are the blocks occupied by a train, and here in OSRD, I started a
simulation, and I dragged this train so that there was a collision.
And yeah, it's really easy, graphically, to see that there will be two trains in the same
block at some point.
And I think as a data-vis person that it's kind of amazing.
But how can we make this even more informative?
So people from OSRD asked us, yeah, basically vertically, we just have the list of three
stations or the list of point of interest, but we would like to bring more information
in this.
And we thought, let's start digging.
Who does this kind of things?
So we started looking into other transportations where people have to see how they travel along
kind of a line.
So here is what it looks like when you are inside the RORD.
So this is a train that goes from northern Paris suburb to southern Paris suburb, going
through Paris.
And when you are inside this train, you have this synthesized diagram.
So it's nice because it brings only the information you need, the list of stations, but also some
interesting things like where can you switch to other transportation systems, et cetera,
et cetera.
And this is nice, but the thing is what Loïc wanted us to do was to have the exact
infrastructure and to see exactly what are the tracks on the lines at any given point.
And this would have needed us to actually know the whole infrastructure and to do heavy
computations.
And at this point, we planned to do this as a front end only feature.
So we kept digging, sorry, yeah.
So we can run there anything we want, but we need to know the exact topology and do heavy
computations.
And we kept digging to find something else.
OK, sorry.
So on top of this is the actual map of the bus in Paris.
OK.
When you take the bus 58 in Paris, you have this map.
And the thing is, as you can see on the top map, this line, it appears absolutely straight
here, you see.
And this is kind of amazing because we cannot bend things in cartography, but that's what
they did probably by hand.
And they obtained this nice map where there are very identifiable areas.
You can see all the streets.
You can see a lot of information.
But still, you know that you are going basically from left to right or from right to left.
And it works.
So yeah, we have to show everything a map would show.
So we cannot just terrific exactly what we would like to display as we did with the schema
because we have to take everything.
But the good point is that we show everything a map would show, which means that we have
all the context around.
For a train, it would be the cities, the buildings, the places that are near the train, but not
exactly on it, et cetera.
It's actually called a strip map.
And it exists for quite a long time.
We've seen some very old examples like this one.
And it's actually already been used within space-time diagrams already.
So this one comes from the Russian military.
It's trains between St. Petersburg and Moscow.
And on top of it, not vertically aligned on the left, but you can see the whole itinerary
with a lot of information surrounding.
Like you can see the sea next to St. Petersburg.
You can see other identifiable points, et cetera.
And it brings a lot of context.
So let's bend geographic maps.
The strategy we used was to generate a grid made of triangles along the path.
And then we generate another grid, which is totally flat.
And when we want to translate a coordinate from the normal geographic system to the bent
system, we just find in which triangle am I, and then I will translate it from one triangle
to another.
And this is something that is easy to do.
So let's take a path.
This is from Nantes to Angers in France.
Then we generate a grid around it.
So basically, I just simplify a bit the path, and I take regular steps.
And I draw a line crossing it at a perpendicularly.
And then I draw triangles, that kind of.
But I have two problems here.
First of all, there are points that are in multiple triangles.
And this is bad.
And another issue is that I have large triangles touching really small triangles, which means
that in my final map, I know that if I have this kind of distortions, it wouldn't be very
smooth.
So we smoothen the grid with some, we just run some steps.
I move each point to the barycenter of its neighbors, basically, something like this.
Then we index all the triangles to get a quadtree.
So it's really, really fast to know if I have a point, what are the nearest triangles.
So in this nearest triangles, which is the one that contains my point, et cetera, et cetera,
I do the regular grid on the right.
So each triangle exists in both grids.
And at this point, yay, we have a projection.
So that's what I said.
If I have a point P, I find the quad that contains P. I look for all the triangles that collide
with this quad.
I find the one that contains my point.
Then there's a triangle with the same ID in the straight grid.
So I just find this triangle, and I use barycentric coordinate system to translate from one triangle
to the other.
Also, I had to actually develop something.
So we use the ReactMapGL and MapLibre.
MapLibre and ReactMapGL because it's already used inside OSRD.
So for this prototype, basically, we render a hidden map that contains the whole grid,
but we don't show it into the screen.
We just load every feature we can.
We use layers from OpenStreetMap for the context and OSRD to have the actual infrastructure
and signals, et cetera.
Then we wait for the idle events that says, OK, I have loaded everything.
I'm ready.
So I take all the features.
I transpose them.
So I project them, actually.
It's a projection.
I also have to clip them if they go through or if they come from outside the grid and
enter it, et cetera.
Then I can render a new map with the projected features, which looks like this with the grid
and like this without the grid.
And we can look to the two maps side by side.
Yeah, that's it.
We have what we wanted, a map that shows the full itinerary from Nantes to Angers.
We can still identify things.
What I really like with StreetMap is that locally, if I'm going from Nantes at some
point here, I know that I have Laloir on my right and the Scarke-Fou on my left.
And those local information remain true in the BENT map.
At some point, the Scarke-Fou on my left, the Laloir on my right, et cetera.
You preserve local context at the price of having BENT lines around.
In OSRD, this is how it looks like.
This is a screenshot.
I hope to show you something that works better in a minute.
So yeah, it brings a lot of context.
But when you zoom in precisely inside to the train in OSRD, you can see the exhaustive
infrastructure, all the tracks.
We didn't have signals yet, but it will come soon.
And yeah, so it works for almost any path.
It's known there's no loops, right?
And it does bring context.
With the current instantiation, we lose the Mabel data.
It means that we have to load everything at once and render the map at once.
But we cannot, like, if I zoom in, I will see more things with a better definition.
It might come sometimes later.
And it's a bit slow at the moment because we have to load everything and translate it
at once.
Yeah, demo, that's going to be really quick.
So there's just a storybook.
So it's on the OSRD UI project.
If you want, you can just ask to the OSRD people.
This is the project that's been moved out of the OSRD, which means that you can actually
use it without OSRD data.
It's just a react component that embeds some dependencies.
And yeah, this is from Nantes to Marseille.
Think with path.
You have, yeah, on your right, you will first have this big ocean.
And then later, there's Toulouse, there's the Pyrenees, and then the Mediterranean Sea.
So it works as we wanted, lots of context.
And also in OSRD, Roulmante-Tembourg, drumrolls.
OK.
This is the path I showed earlier.
The trains, when I over train on the graph, I can see it on my strip map.
And when I zoom in, I will have the actual infrastructure.
They should be, yeah, OK.
I see that the train changes swaps tracks here.
That's nice.
OK.
That's going to be it for the demo.
Thank you very much.
Thank you.
Thank you.
Thank you.
Thank you.
Thank you.
Thank you.
I can probably take one or two questions.
I'll need two minutes.
So one or two questions.
Sorry.
Does this projection look good with photos of satellite imagery, or would it look really
strange?
Yes, it might look a bit strange.
But actually, when the grid is quite smooth, like the one I showed earlier, where the triangles
are just slightly bent, it might work.
The thing is, I only work with vector data right now.
But I could actually project pixels.
But if I project pixels, you will have larger pixels.
Yeah, a real sharp turn.
It would skew things.
Yes.
Loïc has tried with some path that starts somewhere and goes just next to this somewhere
later, and this is bad.
For now.
For now.
Do you know how these maps were made before by bus maps in Paris, at some point?
By hand.
I'm quite sure it's by hand.
But I don't have any proof.
But I know that when I saw the amazing schematics maps of the infrastructure inside SNCF, and
I asked, wow, what's the algorithm?
What algorithm?
So I bet it's by hand.