An introduction to deck.gl for data visualization
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 351 | |
| Author | ||
| License | CC Attribution 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/69240 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Year | 2022 |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FOSS4G Firenze 20226 / 351
1
7
13
22
25
31
33
36
39
41
43
44
46
52
53
55
58
59
60
76
80
93
98
104
108
127
128
133
135
141
142
143
150
151
168
173
176
178
190
196
200
201
202
204
211
219
225
226
236
242
251
258
263
270
284
285
292
00:00
Visualization (computer graphics)Mathematical analysisLibrary (computing)Open sourceBusiness modelOpen setGoogolSoftware frameworkMereologyVideoconferencingMotion captureWrapper (data mining)Source codeTable (information)Computer fileBootingVector spaceHexagonPhysical systemMathematicsRevision controlScripting languagePrototypeArchitectureVisualization (computer graphics)View (database)PrototypeMereologySoftware frameworkBitInstance (computer science)Functional (mathematics)Projective planeNeuroinformatikLibrary (computing)Latent heatComputer fileTable (information)File formatDifferent (Kate Ryan album)Arithmetic meanTexture mappingReliefSet (mathematics)Real numberDampingCore dumpComputer architectureInternet service providerOpen setCartesian coordinate systemPhysical systemAdditionCASE <Informatik>Product (business)Vector spaceDiscrete groupComputer animation
03:08
Real numberMathematical analysisParameter (computer programming)Euclidean vectorEvent horizonOverlay-NetzVolumenvisualisierungGame controllerView (database)Control flowAxonometric projectionInstance (computer science)Electric currentPersonal digital assistantDefault (computer science)Similarity (geometry)Game theoryPointer (computer programming)LogicSymbol tableFunction (mathematics)Logical constantLibrary (computing)View (database)Point (geometry)Category of beingCore dumpPhase transitionInteractive televisionMoment (mathematics)Type theoryDifferent (Kate Ryan album)Vector spaceLatent heatMultilaterationRaster graphicsVolumenvisualisierungTesselationMereologyComputer iconCircleRadiusFormal languageImplementationTexture mappingWeb browserMultiplication signGraph coloringArithmetic meanPredictabilitySet (mathematics)State of matterDeclarative programmingFile viewerInstance (computer science)Object (grammar)Visualization (computer graphics)Functional (mathematics)1 (number)Event horizonSymbol tableOverlay-NetzLogicParameter (computer programming)CASE <Informatik>Web 2.0Projective planeLibrary catalogExpressionField (computer science)Position operatorComplex (psychology)CuboidRouter (computing)Zoom lensOpen setDefault (computer science)IdentifiabilityArc (geometry)Slide ruleKey (cryptography)Physical systemDiscrete groupGame controllerArtistic renderingConfiguration spaceJSONComputer animation
08:45
Mathematical analysisSocial classComputer fontPolygonInstance (computer science)CASE <Informatik>Category of beingState of matterGraph coloringField (computer science)Line (geometry)Clique-widthFunctional (mathematics)Game controllerView (database)Visualization (computer graphics)Object (grammar)Texture mappingRing (mathematics)CodeComputer fileUniform resource locatorIdentifiabilityUniformer RaumProjective planeSocial classDefault (computer science)Interactive televisionArithmetic meanJSON
10:43
Mathematical analysisLibrary (computing)Function (mathematics)Context awarenessGoogle MapsSynchronizationWeb applicationReliefWeb 2.0Texture mappingTesselationThree-dimensional spaceOverlay-NetzSingle-precision floating-point formatFunctional (mathematics)Squeeze theoremBuildingLine (geometry)Arithmetic meanGreatest elementContext awarenessRevision controlArc (geometry)Different (Kate Ryan album)Raster graphicsAsynchronous Transfer ModeVector spaceSemiconductor memoryDegree (graph theory)Shared memoryCASE <Informatik>Client (computing)SpacetimeComputer animation
13:34
Musical ensembleDecision tree learningMathematical analysisCategory of beingFunction (mathematics)Configuration spaceEvent horizonInteractive televisionTexture mappingCategory of beingEvent horizonGraph coloringImplementationClient (computing)Electric generatorComputer animation
14:24
Mathematical analysisComputer programmingVolumenvisualisierungArchitectureContext awarenessComponent-based software engineeringMultiplication signComputer programmingState of matterCartesian coordinate systemBuffer solutionDegree (graph theory)MathematicsComputer architectureVariable (mathematics)Phase transitionCategory of beingUser interfaceConnectivity (graph theory)JSONComputer animation
15:37
Mathematical analysisParameter (computer programming)Function (mathematics)InterpolationDefault (computer science)AlgorithmSmoothingCategory of beingGroup actionEvent horizonView (database)InterpolationAlgorithmState of matterArc (geometry)Category of beingDifferent (Kate Ryan album)Computer animation
16:12
Visualization (computer graphics)Mathematical analysisGeometryVariable (mathematics)Category of beingControl flowComputer configurationDampingLibrary (computing)Group actionGraph coloringFile formatBootingCategory of beingType theoryBusiness modelPoint (geometry)Different (Kate Ryan album)Binary codeScene graphVisualization (computer graphics)Point cloudGeometryWeb browserTesselationStress (mechanics)BuildingData structureSimilarity (geometry)Server (computing)Projective planeInternet service providerInstance (computer science)PolygonPosition operatorGraph (mathematics)Mathematical singularityBinary fileComputer animation
18:25
Cantor setSubject indexingDifferent (Kate Ryan album)Set (mathematics)PolygonPoint (geometry)Computer animation
18:56
CodeQuadrilateralSource codeMathematical analysisDecision tree learningSubject indexingImage resolutionSpacetimeFunction (mathematics)Computing platformTraverse (surveying)Physical systemString (computer science)Key (cryptography)Image resolutionReal-time operating systemLevel (video gaming)Different (Kate Ryan album)Partition (number theory)SpacetimeInheritance (object-oriented programming)QuadrilateralSubject indexingComputing platformFunctional (mathematics)Category of beingCASE <Informatik>Visualization (computer graphics)Set (mathematics)TwitterDatabaseTesselationDiscrete groupPolygonAdditionObject (grammar)Mathematical analysisContent (media)Computer animation
Transcript: English(auto-generated)
00:00
Hello, thank you. Good afternoon and welcome to this session. I'm going to explore or to give you an overall view of the main capabilities that DeqGL provides for the spatial data visualization. So let's start with a bit of a background for the project. DeqGL was a visualization library originally developed by
00:23
the visualization team at Uber as part of a bigger framework that is called the BCL framework. Later the project was transferred to the Urban Computing Foundation. And now it's part of the OpenJS Foundation that also manage Node.js and
00:40
other JavaScript projects. There are many individuals and companies contributing to the library, including Carto. It was designed from scratch to take advantage of the acceleration capabilities of WebGL using the GPU to visualize a real large data sets in 2D, 3D, and so on.
01:04
And also important is base map agnostic, meaning that it's compatible with different base map providers like Google Maps, Mapbox here, and so on. The design of the library is based on a framework.
01:23
So there are some libraries like OpenLayers, where most of the functionality is in the core product. There are other libraries, like Leaflet, where you try to keep the library small. In the case of DeqGL or the BCL framework, it is designed as a collection of composable or
01:44
interoperable libraries with very specific functionality. So for instance, we have LoaderGL that provides loading functionality for many geospatial formats, tabular and also 3D files, or all the aspects related to rendering using WebGL are taken care by Luma GL and
02:03
so on. So the idea is to have libraries that are very specialized on specific things. In addition to these libraries, there are other related frameworks that provide additional functionalities. So for instance, for vector feature editing, we have Nebula GL, or
02:21
we also have support for discrete global grid systems like H3. So it's very complete with lots of functionality and with many libraries working together to provide a lot of functionality. It's originally a React library, meaning that it's designed with a reactive application architecture.
02:44
So it feels more natural when you use React, but it's compatible also with other frameworks like Angular, VGS and so on, or you can also use vanilla JavaScript. It even has another flavor that is the scripting flavor when you want to create simple prototypes.
03:03
No matter the flavor, the functionality that you have available is always the same. So let's start with some key concepts about the library. The first one is the deck object. This is equivalent to the map object in other libraries like Mapbox, Leaflet, OpenLayers, and so on.
03:22
It essentially takes layer instances and the viewer parameters, and then render the layers as a transparent overlay on top of the base map, if you have one. And it also takes care of handling the events. There are different ways to set the properties, but everything works always with properties,
03:41
with this declarative approach of React. So here you can see some of the main properties like the initial view state for setting the view parameters, or the collection of layers. And what you do is to declarative set those properties, and you can later change it programmatically.
04:01
The views define the camera position, the view stand, and also the prediction parameters. There are different views, but the three that you have here are the main ones that you use when you want to visualize your spatial data. By default, most of the time you are going to be using the map view, some view that uses the Web Mercator projection.
04:21
But there are also other useful view, the globe view or the first person view. And essentially what we are describing with the view state is the parameters of the view instance. So for instance, in the case of a map view, we have the longitude, the latitude, but also the parameters controlling the 3D projection, like the pitch or the bearing.
04:44
The easiest way to control the camera is using this initial view state property. You can update it interactively. It's important to listen to the own view state change event, because this is where you can control things like zoom-based styling.
05:01
Probably the most important part of the GL are the layers, take data and render on a map. The layer catalog is really extensive. So we have many different types of layers for working with different types of data and different types of visualization. But most of them share some common properties that you can see here,
05:23
like the ID, the unique identifier, or the data property that contains the data that you want to visualize. A special kind of properties are accessors, and we will talk more about that in a moment. And finally, we also have interaction properties for doing things like picking objects, highlighting features, and so on.
05:43
In this slide, you can see some of the layers that we have available. For instance, within the core layers, we have the arc layer for drawing arcs between points. We have layers for drawing UJson data, icons or markets, and so on. And we have also layers that are focused on a specific spatial use cases,
06:04
like layers for working with discrete globally systems, like H3 or quad keys, layers for working with tile data, both raster and vector data, and so on. And finally, another important aspect of deck GL is the support for 3D visualization, the support is really good.
06:22
We will talk more about that later. So here you can see some of the properties that you have with layers. Basic property like the visibility or the opacity. Then you have interaction properties. Most of the time the GL works with vector data. Vector data is available locally, so the user experience is really good
06:43
because all the data that you need is already in the browser. So it's very easy to implement things like picking, highlighting, and so on. And then we have the rendering properties. The rendering properties are used to control the visual configuration, how you render objects.
07:01
There are other libraries that use language styles, the style language, sorry. So you will define what is your fill color or your radius for your circle. In this case, what we have are properties and some of the properties are accessors,
07:21
meaning that you can define a function instead of a single value. So as I was mentioning, these are very important properties because you can assign a constant value. So imagine that you are assigning the fill color for a feature. You can use the same fill color for all the features.
07:40
Or you can define a JavaScript function. So this is really powerful because you can apply a very complex logic. There are other style languages where you have some expressions, language that you can use, like Mapbox or different libraries. Here, it's just JavaScript functions. So you have lots of possibilities to implement complex logic.
08:04
This is what we use to implement things like zoom-based styling, choropleth maps, proportional symbol maps, or whatever visualization you want to create. An important thing that we need to take into account when using accessors is that the function, the JavaScript function,
08:21
if it's not a constant value, is executed once per feature. So if it's very complex and we have lots of features, you are going to have an impact on performance. But usually, the performance is really good if you have hundreds of thousands of features. If you are getting into millions of features,
08:41
you need to go with a different approach. So let's see an example to see how the code works. Here, I'm using the pure JavaScript flavor because it's like the most standard. First, we need to import the required classes. So you will have added to your project the deck GL package.
09:03
Then you import the deck object and also the geoJSON layer object. What we are going to do is to visualize a geoJSON layer. Then we create the layer. You can see here that we are loading directly a geoJSON file from a URL.
09:21
And for creating the layer, we define the unique identifier for the layer. Then we set the data property to the URL of the geoJSON file. And then we specify some rendering properties. So in this case, it's a polygon layer. We are setting the struct property to true, so we are drawing the outline for the polygons.
09:42
We are also filling the polygon with a color. And there are other properties for specifying the width of the border, the opacity, and the colors that we use for the get line or the get fill color. The last two are data accessors, meaning that here we are using the same value,
10:00
but you could have some JavaScript function that returns a different color depending on feature properties, for instance. Then we need to set the initial view state. In this case, we are setting the default map view, latitude, longitude, zoom, bearing, and pitch. And finally, you can create the map.
10:20
With the deck object, we need to set at least these three properties, so the initial view state, the controller, that is something that you usually set to true, is for interaction with the user, and finally, the collection of layers. So it's that simple, and then you have your visualization. We are going to explore more functionality now.
10:44
So let's start with something that is very common when you are developing web applications using geospatial data, it's basemaps. So the main difference with DecGL is that it can work in conjunction with basemap libraries
11:01
and it's basemap agnostic. So meaning that you usually don't take care of the basemap functionality. You can use the tile layer to load like a tile basemap, but usually you use two different libraries. So a basemap library, maybe map library, map box, world maps, or whatever, and then you draw the DecGL layers on top of the basemap.
11:25
There are two ways of working with basemaps. One is overlaid layers, and the other one is interleaved layers. So let's see how overlay works. Essentially, we have two different WebGL contexts or two different canvases.
11:40
So we are drawing the DecGL layer in a canvas on the top, then the basemap layer in a different canvas on the bottom and then we do the composition on the down. Meaning that you don't have like a shared 3D space so that all clashes are not correct. You can see that the line is going through the building
12:02
and you cannot draw the labels from the basemap on top of the DecGL layers. You usually want to have your layer sandwich where you have like the basemap layer, your layers, and then the labels on top of your layers. This is something that you cannot do if you use this overlaid version.
12:22
Then we have the interleaved version where you are using a single canvas, a single WebGL context, and in this case, everything is rendered in the same context meaning that we have like a shared 3D space and in this space, we can have correct occlusion. You can see how the line, the arc is hidden
12:41
when it's behind the building and you can also render the label layer from the basemap on top of the DecGL layers. This is the best way to work with DecGL because you also have the best performance. You only have a single WebGL context so you need less memory and everything is going to be faster.
13:02
So the recommendation is to use this interleaved mode. Usually, you can work with tile layers so with basemap that are using raster tiles but nowadays, most of the people are using vector basemaps. It's quite easy to work with Mapbox style basemaps.
13:23
You just need to work with a style JSON document. You can edit and you can change directly client-side how the basemap looks. So it's probably the most convenient way to work with basemaps. Then, another important aspect of mapping libraries is interaction, how the user interacts
13:43
with the data that we are visualizing. To make a layer interactive, we need to set the Piccolo property to true and it will going to generate interaction events. It's quite easy to do highlighting directly client-side using these two properties,
14:01
highlight color and auto-highlight and that GL also includes a built-in tooltip. There are two main interaction events that we have when the feature is hovered or when the feature is clicked and you can obviously find your own event handler to implement things like custom tooltips, pop-ups
14:20
or update the rendering properties when a feature is selected. We don't have too much time to talk about reactive programming, but there are a couple of things that I think is important to mention. I have already mentioned that it's using a reactive application architecture. This means that you have user interface components
14:41
like layers that depends on the application state. So whenever you change the application state, something changes. Maybe the user is interacting with the user interface. The deck GL checks the previous and the current state and decide what should be updated.
15:01
And the layers are usually re-rendered every time the application state changes, but this is done in a very efficient way. There are some things that you need to take into account. If data is not changing, it's very cheap. If data is changing, you need to load all the WebGL buffers again. And if you are working with accessors,
15:22
you need to make use of a property that is called update triggers, where you are going to say to the layer, okay, if this particular variable is changing, you need to do that. Another important thing is camera animation.
15:40
For that, deck GL uses what they call view state transitions. It's very easy to use. You just need to set in your new via state the transition duration properties. So how long it's going to take to move from a view state to a different view state. And there are different algorithms to do this interpolation. You have the linear interpolator,
16:01
but also the flight to interpolator that is going to draw an arc with the camera. And obviously we can listen to events and do things depending on the events generated by the transition. An important aspect of deck GL is that it's a 3D rendering library from scratch.
16:21
So there are many options for working with 3D data. We see a lot of 3D data nowadays. So the simplest way or easiest way to have 3D data is to create, using a structure, a 3D geometry from a 2D geometry. So if you have polygons, you can directly do some structure
16:40
and then you can use it to create useful visualizations where you use, for instance, the color to represent some property and then the height to represent another property. For instance, if you are working with building data or similar data. And for that, it's quite easy. You just set this through the property to true and then the height through the get elevation.
17:01
There are also support for point clouds. For that, you use the point cloud layer. Loaders GL provides support for different formats like LASS or PLE. And it's quite easy to load. We can specify the position, the normal and the color for each point. A third option is glTF models.
17:21
This is an open standard created by the Kronos group. And for that, you need to use the scene graph layer. It's another type of layer where you are able to load your own 3D models. Both the ASCII format and binary formats are supported and the same. You have accessors that you can use to control
17:41
how and where the 3D models appear in your visualization. And the final option that we have for visualizing 3D data that is gaining a lot of traction is 3D tiles. When you have lots of 3D data, there is no way to send all the data to the browser. And there is this standard from the OGC
18:01
for working with tiles that have 3D data. And the Loaders GL project support these formats and also in a specific format for working with the CCON server. That is one of the popular servers for 3D data.
18:21
And for that, they use the tile 3D layer. And the last thing I want to discuss is spatial indexes. So, DEC-GL is working usually with vector data. It can scale very well to work probably with hundreds of thousands of features, points, not polygons.
18:44
But obviously when we are dealing with data sets with millions of features, we need to come up with a different solution. The solution that we have for that are spatial indexes. I'm not referring to index for storing data
19:00
in the database, but to this discrete global grid system that partitions the Earth using cells that are adjacent cells at different resolutions like quad key, H3, or S2. So, essentially what we want to do is visualize a huge amount of geospatial data and we partition the space
19:22
and aggregate the data into cells. And this is not only useful for visualization but also for analysis. Especially if you are dealing with databases, spatial intersections, spatial joins becomes regular joins because you are joining just integer data or string data.
19:43
Most of the grid systems have space traversal functions. So, it's very easy to get the neighbors of a given cell, the parent, the children, and so on. And the spaces partition at different resolutions which is great for spatial data
20:01
because depending on the cell level, you are going to get the data aggregated at a different resolution. We see that lots of geospatial platforms are starting to provide native support for these spatial indexes, particularly H3 and quad key. And we see that we think it's going to be like a trend
20:20
when you want to work with very large data sets to aggregate the data using these spatial indexes. In DecGL, we have different layers. The quad key layer when you are working with quad keys, H3 hexagonal layer when you are working with H3, and the S2 layer. And essentially in the data property
20:41
where we have the features, we have an array of objects where we have the cell index and additional properties. And then the polygon layers are used to render these data. Even if you are using spatial indexes, there are some cases where you are dealing with billions of features that you need to combine that with tiles.
21:01
So this is the solution. When we are working with billions of features, there is no way to aggregate the data in real time. So sometimes we need to pre-generate data using tiles and also combining them with spatial indexes. And that's all from my side. Sorry because I've been a bit quick,
21:22
but I have a lot of content. Thank you for. Thank you.