GeoJS: High Performance Geospatial Visualization for Scientific and Infovis Commmunity
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 | 208 | |
Author | ||
License | CC Attribution 4.0 International: 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/40990 (DOI) | |
Publisher | ||
Release Date | ||
Language |
Content Metadata
Subject Area | |
Genre |
FOSS4G Boston 2017124 / 208
13
14
16
23
24
25
26
27
28
36
39
48
53
67
68
73
76
80
96
101
104
105
122
127
129
136
143
147
148
150
152
163
178
188
192
194
197
199
200
201
00:00
Visualization (computer graphics)Domain nameComputer-generated imageryInformationAlgorithmProjective planeVisualization (computer graphics)View (database)Position operatorInformationSoftware developerOpen sourceSpacetimeComputer animation
01:14
Source codeComputer-generated imageryVisualization (computer graphics)InformationComplex (psychology)Thresholding (image processing)Operator (mathematics)Context awarenessVisualization (computer graphics)InformationProgram slicingCoordinate systemView (database)PolygonComputer animationDiagram
02:07
Plot (narrative)ArchitectureFocus (optics)InformationInteractive televisionSource codeVisualization (computer graphics)Artistic renderingCodeState of matterActive contour modelVector spaceTouch typingGraph (mathematics)PolygonPoint (geometry)PixelEvent horizonType theoryScale (map)ImplementationCartesian coordinate systemInternet service providerCodeINTEGRALState of matterFront and back endsOpen setArtistic renderingVolumenvisualisierungLine (geometry)QuadrilateralVideoconferencingPoint (geometry)Different (Kate Ryan album)PolygonRight angleDefault (computer science)InformationAngleInteractive televisionComputer architectureVisualization (computer graphics)Covering spaceTriangleComputer configurationLibrary (computing)Single-precision floating-point formatApproximationVector spaceOcean currentGraph coloringFeedbackSoftware developerEvent horizonRevision controlRepository (publishing)Touch typingComputer animation
05:56
Maxima and minimaLemma (mathematics)Graph coloringVideoconferencingLine (geometry)Artistic renderingDivisorScalar fieldSpherical capType theoryLimit (category theory)Game controllerVertex (graph theory)Zoom lensMathematicsEngineering drawing
07:20
Direction (geometry)Square numberType theoryUniform convergencePoint (geometry)Plot (narrative)Vector spaceActive contour modelAlgorithmLimit (category theory)Level (video gaming)VideoconferencingVector fieldActive contour modelSquare numberPoint (geometry)INTEGRALVisualization (computer graphics)Vector spaceReal-time operating systemComputer animation
08:25
Parameter (computer programming)
08:45
Maxima and minimaComputer-generated imageryPixelPrice indexGraph (mathematics)Link (knot theory)Lattice (order)Point (geometry)Frame problemSquare numberTriangleArtistic renderingAsynchronous Transfer ModeSoftware testingStructural loadFirst-person shooterGraphics processing unitComponent-based software engineeringSoftware developerExpert systemParameter (computer programming)Visualization (computer graphics)Software testingCache (computing)Interactive televisionNumberVirtual machineGraph coloringLink (knot theory)Graph (mathematics)Point (geometry)Data structurePixelContext awarenessÜbertragungsfunktionSoftwareGraphics processing unitMappingStructural loadPhase transitionCASE <Informatik>Selectivity (electronic)Level (video gaming)Line (geometry)Game controllerShader <Informatik>CodeArithmetic meanMechanism designRegular graphSquare numberComputer animation
11:55
PolygonQuery languageDefault (computer science)Function (mathematics)LaptopExtension (kinesiology)Visualization (computer graphics)Mathematical analysisIntegrated development environmentSource codePersonal digital assistantVector spaceSubsetMeta elementMenu (computing)PolygonServer (computing)Client (computing)Domain nameArtistic renderingTesselationEvent horizonVisualization (computer graphics)Functional (mathematics)Open sourceCASE <Informatik>VideoconferencingLaptopGraph coloringInteractive televisionIntegrated development environmentMathematical analysisComputer animation
14:10
Gamma functionSubsetVector spaceExecution unitWechselseitige InformationPlot (narrative)IcosahedronMIDITerm (mathematics)Wrapper (data mining)AngleRule of inferenceInternetworkingSI-EinheitenDigital rights managementPolygon meshHill differential equationRootTesselationMiniDiscSet (mathematics)Zoom lensInteractive televisionComputer animation
14:35
MetreSI-EinheitenIcosahedronSubsetInterior (topology)Normed vector spaceProcess (computing)Vector spaceMoving averageMaxima and minimaConvex hullExecution unitSubsetSet (mathematics)Latent heatServer (computing)Computer animation
14:59
Vector spaceSubsetProcess (computing)View (database)IntelCASE <Informatik>InformationModal logicVideoconferencingSubsetOperator (mathematics)Computer animation
15:23
Event horizonSet (mathematics)SatelliteExtreme programmingDigital filterPersonal digital assistantExtreme programmingCartesian coordinate systemSet (mathematics)Computer animation
15:52
Cycle (graph theory)Random numberMultiplication signDrop (liquid)Pattern languageVideoconferencing
16:08
Line (geometry)Plotter
16:38
FlagVisualization (computer graphics)Mathematical analysisVector spaceRaster graphicsCASE <Informatik>Set (mathematics)Different (Kate Ryan album)Multiplication signArithmetic progressionMedical imagingGene clusterCore dumpVisualization (computer graphics)Computer animation
17:09
Parameter (computer programming)View (database)Computer-generated imageryProcess (computing)Slide ruleVariety (linguistics)AlgorithmMathematical analysisCASE <Informatik>Context awarenessBilderkennungCartesian coordinate systemCASE <Informatik>DialectComputing platformTesselationOptical disc driveOpen sourceComputer animation
17:59
Computer-generated imageryVisualization (computer graphics)VolumeVector spacePlot (narrative)DisintegrationRegular graphStreamlines, streaklines, and pathlinesLine (geometry)Active contour modelDirection (geometry)Direction (geometry)Library (computing)Visualization (computer graphics)INTEGRALComputer animation
18:30
SupercomputerVisualization (computer graphics)Computing platformComputerSoftwareMachine visionView (database)Electronic program guideProcess (computing)Medical imagingTable (information)StatisticsComputer animation
18:58
Parameter (computer programming)View (database)Computer-generated imageryProcess (computing)Slide ruleVariety (linguistics)AlgorithmMathematical analysisCASE <Informatik>Event horizonSatelliteSet (mathematics)Extreme programmingDigital filterPersonal digital assistantVector spaceSubsetPoint (geometry)PixelFrame problemSquare numberTriangleArtistic renderingAsynchronous Transfer ModeSoftware testingStructural loadFirst-person shooterGraphics processing unitComponent-based software engineeringSoftware developerExpert systemPairwise comparisonLibrary (computing)Computer configurationGeometryCuboidData structureCASE <Informatik>LaptopLine (geometry)VideoconferencingPoint (geometry)Interactive televisionProjective planeOpen sourceSoftware developerMappingMatrix (mathematics)Set (mathematics)File format
Transcript: English(auto-generated)
00:00
Thank you. Thank you all for coming. I appreciate your time here. So today I'm going to talk about GeoJS, an open source project that we have been working in the last few years. And we thought that Foursquare G would be a perfect venue to discuss our progress and get some feedback. So before I actually go into the technical details, I would like to provide some background and motivation behind the development of GeoJS.
00:28
And hopefully we'll appreciate that. So as a person that I've been spending the last 15 years in the visualization, I really see that there are three subdomains in visualization. Namely, scientific information and geospatial.
00:42
In information visualization, you essentially draw these data in this abstract space where you are allowed to actually move the data positions as it fits into a particular view or your storytelling. As opposed to that, in scientific visualization, you actually constrain that you can't move the data position as much.
01:04
And then the last is the geospatial where you are drawing your data in some geospatial context, whether it's 2D or 3D. So because of these different constraints and requirements, the visualization evolved into these different algorithms.
01:26
In the scientific domain, you have streamlines, contours, operations like thresholding and slicing. In the information visualization domain, you have parallel coordinate plots, heat maps, info views.
01:43
And then in the geospatial, you have point, line, polygons that you are drawing in a context in some layered fashion. So with increasing complexity and a desire to get deeper understanding of the data, you may want to combine some of these techniques, and that's where we thought that GeoJS would be useful.
02:08
So with that, the goal of GeoJS is to provide open source, high performance interactive data exploration capabilities by bringing features from scientific information and geospatial visualization under a single easy to use API with multiple rendering backends.
02:23
Namely WebGL, Canvas2D and SVG. The SVG actually is coming from the D3 integration, so we do have a D3 integration, but I may not be able to provide a full detail on that. But if you have any questions, we can talk about later.
02:40
The highlight of GeoJS is that it renders very large data very fast. It provides a very flexible architecture where you actually can integrate other renderers or other libraries into GeoJS. And then we focus on accuracy and precision when possible. So what's the current state of GeoJS?
03:01
So current state that we have approximately 2500 plus commits. We have 21 contributors, 24 releases so far, and 95% code coverage as we focus on code quality. I would still think that the GeoJS is still in early development stage, so any feedback that we get from you guys would be appreciated.
03:25
We do have GitHub repository. It's Apache version 2 licensing, and then we have documentations, examples, tutorials, and then chat through GitHub. So let's go into the technical details of GeoJS. These are the highlights of GeoJS.
03:42
It doesn't cover all the feature sets, but as you expect, they do support point, polyline, polygons, rendering. We have 2D contours, vector plots, heat map, pixel map, color threads, graph, animations. We support many event types, annotations, and touch support. On the right-hand side, we are showing an application which is drawing the data using GeoJS and WMS server.
04:08
So I won't be able to talk about all the details, but maybe I can provide some insight into how do we achieve performance and how we are different as a visualization library.
04:22
So on the left-hand side, we can actually draw points using three different techniques. There are two options called imposters, where we can approximate a point using a triangle or a square. And then we do support things like anti-aliasing and stroke and fill colors, like you do have an SVG backend.
04:43
And then the third option is the point sprites, which is something that comes with the graphics hardware. And depending on a different hardware, you may get the best performance from point sprites. In our experience, for most use cases, a single triangle point approximation gives you the best performance.
05:04
And that's what the default is in GeoJS. The lines are interesting. The lines are drawing using two quads. But the way that we use quads is actually to provide the canvas for the actual line drawing. So in this case, we actually can draw lines with acute angles or lines which are almost parallel without any difficulties, as shown here.
05:30
And we do support actually different kind of line, joint and line caps, which I'll show in a video later. The other interesting thing is that you can embed simple features into a more complex feature.
05:42
So for example, the polygon feature on the right hand side is actually using a line feature to highlight the polygon. So you can use some of these basic features to combine them into a more complex feature as you need for applications. So first I will show a video of how we are doing line rendering of a million line segments in this video.
06:06
So you will see that first lines are shown as all in black color. And you can zoom in very quickly on these line renderings, which are in GLEs with a factor of two. You can zoom in, zoom around, and you can see they are drawn very nicely on the map.
06:24
You can change the color, and the colors right now are defined at each vertex of the line segment. So you can define those colors and the colors are interpolated between these two colors. You can have these utilized as scalars, for example, porting your scalars into the U-Biz.
06:42
You can also change the stroke width, stroke offset, line cap, line joint, and then you can have some other fine control like middle limit. So in this example, we actually will change the stroke width, and then later we can change the joint type and line cap.
07:05
So depending on your biz need or your artist need, you can change line cap to round, or line joint to round actually as well, or bevel. So again, depending on your requirements, you can control these features.
07:21
The contour and vector plots are interesting. The vector plots are very useful if you are drawing a wind velocity into your spatial map. Like in the vector plots, integration is through D3, which is good for smaller data sets. We are hoping to support WebGL-based vector plots in the near future. The other vector visualization that we have is the contour plots, where you define a grid and the data is defined at each grid point.
07:48
And then the shader, we interpret these values to give you a 2D contours in real time. And right now, we assume that the grid is uniform, but in the future, we are
08:02
hoping to support some non-uniform grids or a clean grid or a clean grid as well. The other limitation that we have right now is that we don't use marching square. So you can't label these contours, but that's something that's coming as well. You can run a marching square algorithm to compute these contours and you can label them as you need for your visualization.
08:23
So I'll show you a small video of how well the contour feature performs. And the interesting fact is that you can tweak some parameters to highlight the different things. In this particular video, we are showing the different elevations that you have in this island in Hawaii.
08:42
But in the second video, you will see that we tweaked the parameters and we are highlighting the ridges on the mountains. So depending on what you need, we can tweak the parameters to control the visualizations.
09:02
The other features that we have is graphs, heat maps, and pixel maps. The idea with graphs is that you can have north and links and you can essentially use that to draw networks in geospatial contexts. The heat maps are interesting ones.
09:21
Essentially, it's something the analysts use as an approximate visualization. What's interesting in GeoJS is that you can render a large number of points, in this case a million. And then you can do Gaussian, non-Gaussian points. And you can provide an opacity and color transfer function along with some other aggregations such as binning the data as well.
09:49
There are a lot of controls that you can do on the heat maps, like you can do in the line rendering as well. The pixel map is something interesting. It came from more of a biomedical domain, but the idea here is that you can use color as the index, which can generate new colors.
10:07
So something you can use to actually quickly go through a selection mechanism or for your interactive visualizations. You are allowing the analyst to actually select colors and changing the colors as a mean to inform the analyst that you have picked that particular region of interest.
10:28
The performance in the API. For the WebGL part, we do have shaders which are designed to reduce GPU load. So what we do actually is that we construct the data structure internally so that when you change something, you don't have to change everything.
10:45
All of this and more work needs to be done in the future, but the idea is that we minimize the changes and minimize especially the GL state changes because those are the performance killers. So we do support something called Shader Cache to make sure that we can utilize your visualization and style as much as possible.
11:08
The design is compact. We try to make it as compact as possible. And obviously, like I was mentioning earlier, that we do perform intensive testing to make sure that our code is well covered.
11:21
On the right-hand side, we have shown some examples using a regular desktop machine with a consumer graphics card where we are rendering approximately 300k points. And we are showing that in these squares and triangles, we are getting approximately interactive frame rates.
11:44
And we have tested on the same machine that we can render up to 1.5 million points and can get 15 frames per second. So we can render a large number of points at interactive frame rate speeds. So how does the API look like? Again, this is not an example. We are drawing the polygon feature.
12:02
You get a map, which is a container. You create a layer called feature layer. Then you create a polygon feature set. And then once you get your JS set with JSON, you essentially provide a function that tells GeoJS where is your X and Y is or how X and Y are defined.
12:21
And then you can style your visualization where you have the opacity, fill color, stroke, stroke color. And depending on whether things are constant or varying, you can provide a function like you do in D3. So it gives you a lot of flexibility in essentially designing your own visualization.
12:40
The events are handled through GeoOn and GeoOff. So you can say .GeoOn and you can provide what event you need to react to and then you can provide a function to handle that event. So again, this is a very simple example but shows you some of the key concepts that we have. So some of the use cases that we have done using GeoJS are very exciting. One of them is GeoNotebook.
13:05
And Chris Kotwila, one of my team members, is presenting GeoNotebook tomorrow between 11.30 and 12 in Harborview 3, I believe. But this is something we have worked with NASA Ames and the idea here is that we extended the Jupyter Notebook for geospatial domain.
13:27
And we are providing this kind of client server environment with interactive visualization and analysis capabilities using Jupyter, GeoJS, and other open source tools. So I'll show you a video quickly on how fast we can render these data sets.
13:43
The tile rendering is done, or the tile competition is done on the server side using tile stash. The tile rendering is done using GeoJS on the client side. So the first one we are looking into is the National Land Cover data sets.
14:01
And you can see it should pop up anytime soon. And you can quickly visualize zooming into a particular region of interest. And you can see the tiles are rendered quite fast in GeoJS. The other data set is the elution data set, the SRTM, which is approximately 80 gigabytes on the disk.
14:23
And then again we can quickly zoom in, zoom out, and GeoJS does follow up the user interactions. The other one is the NASA specific data sets, which are of different sizes.
14:41
The first set is 200 gigabytes and the other one is 1.5 terabytes. The other interesting thing to note is that we can actually allow the user to subset your data set. The subsetting is done on the server side, it's not a GeoJS feature set. But it allows you to draw these annotations over any layer.
15:04
And you can get the coordinate of those annotations, and then you can use those coordinates to subset your data set on the server side. So again it allows you to give you all the information necessary for other operations if needed. So here in the video we are showing that subsetting and then plotting the data using that partlet.
15:22
The other use case we have done is for DARPA where we actually plotted the New York taxi trips. And the data set actually is approximately 114 million taxi and bike trips. This is a live application that allows searching taxi and bike trips derived in New York City.
15:43
The goal was to find patterns, the social and extreme weather event, and how that affected these trips. So I'll show a video actually showing the pattern that emerged in Manhattan. And you will see that depending on the time of the day, it's changing.
16:04
The blue is, I believe, is the pickup and the yellow is the drop off. So you will see sometime, you will see that the law of yellows, I believe that's with Manhattan.
16:21
And then it again goes back to equally blue and yellow. So this is all done through GeoJS line plotting. So it was able to draw a whole bunch of new lines at very interactive speeds for a very large data set.
16:42
The BIOS and Linux use case, this is something we have been working with DITRA. We are using different feature sets, core plats, image overlays, and clustering. And one of the goals is actually to improve the grid data visualization on the client side.
17:01
So we are hoping that we will make more progress as we spend more time on grid data sets and grid visualizations. This is an interesting use case for GeoJS. It's biomedical. This is an application called AstomicTK, which is an open source microservice image analysis platform. It allows you to annotate your regions or a particular area, and you can visualize
17:25
different slides, different scanners, and you can draw annotations as needed on top of any layer. One interesting thing about GeoJS in this context is that we are able to actually handle non-power of two tiles.
17:41
So in this case actually they didn't have the tiles exactly of 256 by 256. They had 256 by 148 or something odd number, and GeoJS can actually support that actually as well. So it doesn't have to be exactly conforming to your regular tiles for your upper layer use case.
18:01
So with that, I would like to conclude my presentation. This is some of the feature directions I would like to head into. My company called Kitware also has been working on something called VDKJS, which is a port of VDK, which is an extremely popular library for 3D scientific visualization.
18:21
So we are hoping to integrate VDKJS into GeoJS, and then TSM integrations, and along with some of the improvements I have talked about. So with that, I would like to thank again, again I mentioned Kitware is a company that I work for. We do a lot of things, and hopefully we will be doing more things in the future. Thank you so much.
18:48
Any questions? You mentioned self-performance statistics at the table up there. Did you do comparisons with other options that you had rather than writing your own?
19:02
Did you do comparisons with Cesium or any other libraries that you could have used? We actually did, for the line rendering, actually we did compare it with the other mapping libraries. The reason I didn't show it here, because there are other libraries, like really good libraries as well,
19:22
and some of the features that we have, especially the line rendering, are not supported by the libraries. I don't remember the exact numbers, but I think in point of line, I think we are either equivalent or better in most of the cases. I want to say that 100%, because obviously other libraries I could actually as well.
19:45
Our matrix is mostly looking into a large amount of data sets and interactive frame rates. Did I answer your question? Yeah.
20:04
Yeah, so the Geo notebook is also an open source project that's actually all under this particular GitHub. Yeah, I'm on the GitHub.
20:21
Oh, I see, okay. The video is not on the somewhere, but if you contact me afterwards, I can share this video. It's on the Google Drive, so I can share. So JSON, GeoJSON, the primary formats right now, and then we do have our own structure that's been defined for the grid.
20:47
But again, it's on JSON right now.
21:02
Actually, I don't have the video, but yes, we were able to interact. We do a box search, and we're able to select the points, lines, or polygons, and you can highlight, and you can pop up your own dialogue on top of that.
21:23
One thing I wanted to mention is that GeoJSON is an open source project, and we always look for collaborations and developers. So if anyone wants to help us out or have some interesting ideas, we are more than happy to bring those into GeoJSON.
21:41
And if you have a tool that you think we should integrate and avoid any duplication, we are more than happy to figure out a way to integrate your tool into GeoJSON as well. Again, thank you so much.