geotiff.js and plotty.js - Visualizing Scientific Raster Data in the Browser
Video in TIB AV-Portal:
geotiff.js and plotty.js - Visualizing Scientific Raster Data in the Browser
Formal Metadata
Title |
geotiff.js and plotty.js - Visualizing Scientific Raster Data in the Browser
|
Title of Series | |
Part Number |
22
|
Number of Parts |
193
|
Author |
|
License |
CC Attribution 3.0 Germany:
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 |
|
Publisher |
|
Release Date |
2016
|
Language |
English
|
Content Metadata
Subject Area | |
Abstract |
Exploitation of Scientific Raster Data stored in large online archives used to be cumbersome: either the data has to be transformed in an RGB version on the server using parameters supplied by the client, or the original data is downloaded and then inspected using a desktop GIS system. Browsers without specific extensions simply were not capable of dealing with the types of data found in scientific context. Today with HTML5 and WebGL browsers finally have the necessary prerequisites to create tools to dynamically visualize and explore scientific data sets. geotiff.js is a small JavaScript library to parse GeoTIFF files containing any kind of 2D raster data. The library handles various different configurations and common data types far beyond RGB data. On the other hand, plotty.js provides functionality to dynamically style 2D arrays for visualization using either predefined color scales or custom ones. In the presentation, I’m going to show how both libraries complement each other to allow a very dynamic form of data exploitation. Additionally, it will be shown how the techniques can be applied to more traditional Web Mapping concepts as dynamically styled data is displayed on a globe widget in various forms including 3D data cubes and time series of data.
|

00:00
Netbook
Fermat's Last Theorem
Computer animation
Raster graphics
Video game
Sound effect
Figurate number
Web browser
00:25
Presentation of a group
Pixel
Scripting language
Texture mapping
Multiplication sign
Demo (music)
British Computer Society
File format
Water vapor
Client (computing)
Parameter (computer programming)
Open set
Mereology
Web 2.0
Data model
Medical imaging
Geometry
Forest
Damping
Software framework
Endliche Modelltheorie
Volumenvisualisierung
Pixel
Data compression
Library (computing)
Physical system
World Wide Web Consortium
Parsing
View (database)
Clique-width
Block (periodic table)
Computer file
Interior (topology)
Stress (mechanics)
Variable (mathematics)
User profile
Array data structure
Process (computing)
Sample (statistics)
Raster graphics
Software framework
Summierbarkeit
Quicksort
Glass float
Data type
Implementation
Computer file
Disintegration
Interactive television
Flash memory
Web browser
Metadata
Field (computer science)
Latent heat
Profil (magazine)
Software
Artistic rendering
Musical ensemble
Implementation
Plug-in (computing)
World Wide Web Consortium
Data type
Scale (map)
Server (computing)
Prisoner's dilemma
Projective plane
Java applet
Interleaving
Heat transfer
Cartesian coordinate system
Web browser
Performance appraisal
Word
Computer animation
Integrated development environment
Personal digital assistant
Factory (trading post)
Universe (mathematics)
Musical ensemble
Library (computing)
06:56
Scale (map)
Scaling (geometry)
Clique-width
Demo (music)
Projective plane
.NET Framework
Maxima and minima
3 (number)
Basis <Mathematik>
Black box
Parity (mathematics)
Disk read-and-write head
Graph coloring
Variance
Time domain
Medical imaging
Computer animation
Videoconferencing
Physical system
08:19
Computer animation
Personal digital assistant
Endliche Modelltheorie
Volume
Row (database)
Wide area network
08:36
Computer animation
Personal digital assistant
Menu (computing)
Quicksort
Musical ensemble
Volume
08:54
Computer animation
Personal digital assistant
Volume (thermodynamics)
Data type
09:19
Functional (mathematics)
Computer animation
Evolute
Emulation
Wide area network
09:32
Computer animation
Quicksort
09:48
Metropolitan area network
10:00
Addition
Interior (topology)
Endliche Modelltheorie
10:12
Server (computing)
Implementation
Open source
INTEGRAL
Code
Multiplication sign
Image resolution
Source code
1 (number)
Set (mathematics)
Client (computing)
Web browser
Mereology
Dimensional analysis
Element (mathematics)
Revision control
Web service
Software testing
Data compression
Form (programming)
Scripting language
Area
World Wide Web Consortium
Execution unit
Texture mapping
Slide rule
Structural load
Weight
Projective plane
Sound effect
Line (geometry)
Cartesian coordinate system
Open set
Graph theory
Computer animation
Personal digital assistant
Artistic rendering
MusIS <Museumsinformationssystem>
Reading (process)
Library (computing)
Data compression
15:32
Computer animation
00:08
and so I'm going to
00:11
presented to small libraries way of figure as we've seen with of netbooks chair and the and the effect the jails this is something completely different
00:25
I'm a I'm talking on behalf of my company your and 1 of my colleagues was seen last year which is this goes to call market and this is in the evaluation of growth much over something else to you must OK we come from the Earth Observation parts so we did with the tuition acquisitions so the images and also with model data and so there are the current status the yeah and we want to explore this process so the current civil society you have it's on universe of application I think of a sense of this and so on more also futures than others or you have been in the water and you have a lot of pre-rendered already you branded on demand for example you use and the WMS request and get the image back or you send and documents request with a specific style and specific parameters and get rendered image back but this is not the 1 we wanted to have and thereafter exploration fully interactive so like I get the data once in the rendered and depending on the parameters under the client side and the given image but also wanted to make a lot of work without any plug-ins like Flash you lose traction muscles we just want to make use of open Web standards and we also wanted to make it so that it easily integrated whirlwind tool 111 framework slightly leaflets or openly sort system OK 1st the 1st nation out and some other web standards have major you usually in the past years and these are just a couple of tools that we're going to use the project so 1 is the canvas API once worked you want a lot of it and those of factories there not really separate because they're all kind of intermediate but those are the 3 buzz words the OK so so that the problem is split into 2 parts 1 is that that transferring data and 1 is a rendering data so for transfer and in there is a challenge because browsers stone not support any scientific data for us former so they usually support our GPA of like PG jb make some also support what and 1 work-around would be too if you have like a float 64 . 6 4 will work of animal flocks 33 or another this time so I called them in the 1st 3 or 4 bands of the rest of the and then transmitted to the client that the coordinates of sum but this is currently it's really tricky because it's not so the anymore you also have to have some method metadata to explain how the data is laid how you have to take and also as that it's also requires specific decoding and it's only working with the specific data types so we thought of what could we do we use another image type and whether the cold afraid this image is duties and it has a variables of a support is widely accepted and you may have heard of it and so on but for decades and its flexible it's very flexible so of so flexibility it's all sometimes translated as thousand income environments it this is also extensible in this is 400 she'll constituted and with due to it's able to also encode geographic metadata and so something like and so this is also interesting because we do not believe some open standards like the BCS which is some that's there is a duty of the application profile where you can have specify the exact primatology teachers who will be laid out so which helps us to what and so on we created duty gestures which is a pure javascript files for for duties and this has a sentence just using JavaScript and factories and interviews to cold start to OK which is kind of boring but this is what would we actually achieved with Judith just we have a full implementation of the of the suspects and tired strip spent pixel interleaved there we almost support everything we like behind in the in the compression we currently just supports uncompressed had its compressed OK so this is transcript presentation I can always already show you how it would look like this is an RGB 80 the intuitive and its forests and it's it's presented on the on the client so nothing specially what is this is section intuitive in the background OK so this is how it looks I should inform you does something but on the technical side I'm using the out against the tide of prisoner above all the fields and here a positive I get the image and this this block below just for copper needs to the kind you don't like it you know you I look it up OK usually optimal solid summer correctly and with so this is the case with the other so this this this RGB or RGB-D data but that's
06:34
what about some of data and supported I'm plotting also a small telescope library of cells using the the canvas API and it's basically transformed assisted through policies uh to have some myself so all this is how it works and this is just some artificial data yes it's
07:00
very tricky all this for a refill foragers conferences most suitable so this is just what we were doing it also this discovered credits and there's if this is this is the lack of support of all so this is the black box everything is the hidden behind this and this is arguably but OK so this is a a radar image and so this is an indirect if thing not so I can choose the color scale and I can also use sliders to to racialized only these I want to see as what are really equals OK so yes so
07:46
putting it together so I created a small openly as switches and pulled a digital elevation model on its head digital elevation model is transmitted using WCS it's passed by duty chairs and then it's put on on the on the net which is basis for an interactive you all right so this is so it it's a video of a project we do and we're using a system that season at which it here and
08:22
so in this case we have we have a model they've and in this this model data is also possible adjective chairs and then records and so you can see and each should of these OK so
08:35
I wouldn't here we just
08:37
selected the layout and behind it but I was just the road was applied to achieve different than than than this past and so we can have some sort of which adhere to control the rendering so
08:50
in this case that we use the the bans the spec bands as like as
08:55
as at various select height and I think it's very
09:00
beautiful to see that we have a volume rendering directly on the on the on the city a single the yeah so in this case you use your only given the type of phone you you're actually interested which is which is very interesting for scientists so this is
09:20
just a evolution cesium and functionalities of this is nothing nothing from but at the yeah OK just
09:31
this year and so on I key
09:42
so and then positive played around and I made some sort of the animation of it so this is all
09:48
of um this is how it should
09:50
look like and this is actually an animated gif so reaches the
09:54
limited because of the
09:56
rendering performance is not yet so I suspect so this is
10:01
actually a model also put of them of
10:04
the working of additional for working on I as of emissions
10:13
OK and there's still a lot of work to be done as a said we'd like to to support all of should from the source and used as the and different compression for bloody would like to and and improved the performance especially when we're dealing with with larger datasets or many datasets like the layer datasets we saw earlier and also would like to provide some some simple and easy integration with OpenLayers leaflet and caesium so that you just have to properly linear or whatever and Treaty source and that's it thank you for attention so I'm
11:02
thinking of in questions thank you very much and so 1 question duties can potentially be pretty large and I'm not efficient because the the news WCS that much does the musi as support for decreasing resolution and then the thing you might load Luo size 5 5 years is that resistance has become a required set quite flexible in this regard there is even now I mentioned in the cell and an application profit for subjective so you can even defined the internal timing of the 2 different it's a larger and so that the reading of the small ties assisted is fast afterwards so yes you can but you can also request to reduced resolution so yes it's context and on the server side what kind of Derbyshire solution would use them so because you probably don't want have like the full effect of the thing that q for that case of like this library digestion WGS what what kind of solutions use that 1 for example 1 of work is just from that so because we did that due to the implementation and epsilon substituted datasets implementation so we know it or its work and that yeah so metal would be 1 1 solution and other ones another open-source project we're not having the chance to talk about a CXO so all this solid and most like this year x 0 but this is more like a full-fledged solution accused so and other crystal get and web mapping applications we're usually using that the the peak element of data for example if you want to present the topographical area for a whole country and we need to transfer from the server from where the coverage service to the graphs for example plenty of megabytes were also gigabytes which is the sensible amount of data to use them Due to do years which is the king of the amount of the data which has since the president of the client and thus tool let the client to weights 20 minutes in years this is this is actually a tricky tricky question that I'm it would be easier to answer if if the compression was already implemented because then you wouldn't lose as much as do so that would be much higher than for example a typical but in this case it's it's it's hard to it's hard to it's hard to say I think it it it also depends on the use case for example if you just inspecting 1 single dimension you if the the waiting time at the initial waiting time is OK when you can do a fast rendering off the then it would be a good solution otherwise you'd have to use the service of rendering so it's it's it's it's it's hard to say if we looked at using in scripting or something like that to compile the C 2 Russian libraries for a body in the browser for decompression yes it is really needed and I think are not not too far grew up and I heard that there was actually cool script this think that you didn't it of yes we have into its parts did justice is really small it's just that it's a it's it's a couple of hundreds of lines of code so it's really small really fast really and it supports almost all of the 2 suspects of those chemicals so it's it's larger it has a small footprint and this was 1 of the actually when we were the research for its there there is an the Emscripten a compiled version after test of the original but but we did not care get it to work with other data than our GPA OK so we can take the form so can project at any any other questions and thanks again
