geotiff.js and plotty.js - Visualizing Scientific Raster Data in the Browser

Video thumbnail (Frame 0) Video thumbnail (Frame 623) Video thumbnail (Frame 9849) Video thumbnail (Frame 10408) Video thumbnail (Frame 11646) Video thumbnail (Frame 12467) Video thumbnail (Frame 12792) Video thumbnail (Frame 13230) Video thumbnail (Frame 13984) Video thumbnail (Frame 14293) Video thumbnail (Frame 14652) Video thumbnail (Frame 15001) Video thumbnail (Frame 15304) Video thumbnail (Frame 16465) Video thumbnail (Frame 23297)
Video in TIB AV-Portal: geotiff.js and plotty.js - Visualizing Scientific Raster Data in the Browser

Formal Metadata

geotiff.js and plotty.js - Visualizing Scientific Raster Data in the Browser
Title of Series
Part Number
Number of Parts
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.
Release Date

Content Metadata

Subject Area
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.
Netbook Fermat's Last Theorem Computer animation Raster graphics Video game Sound effect Figurate number Web browser
Pixel Presentation of a group Scripting language Texture mapping Multiplication sign Demo (music) British Computer Society File format Water vapor Parameter (computer programming) Open set Client (computing) 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 Field (computer science) Metadata 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)
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
Computer animation Personal digital assistant Endliche Modelltheorie Volume Row (database) Wide area network
Computer animation Personal digital assistant Menu (computing) Quicksort Musical ensemble Volume
Computer animation Personal digital assistant Volume (thermodynamics) Data type
Functional (mathematics) Computer animation Evolute Emulation Wide area network
Computer animation Quicksort
Metropolitan area network
Addition Interior (topology) Endliche Modelltheorie
Server (computing) Implementation Open source INTEGRAL Code Multiplication sign Image resolution Source code 1 (number) Set (mathematics) Web browser Client (computing) 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 Weight Structural load 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
Computer animation
and so I'm going to
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
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
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
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
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
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
I wouldn't here we just
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
in this case that we use the the bans the spec bands as like as
as at various select height and I think it's very
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
just a evolution cesium and functionalities of this is nothing nothing from but at the yeah OK just
this year and so on I key
so and then positive played around and I made some sort of the animation of it so this is all
of um this is how it should
look like and this is actually an animated gif so reaches the
limited because of the
rendering performance is not yet so I suspect so this is
actually a model also put of them of
the working of additional for working on I as of emissions
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
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