Bestand wählen
Merken

Creating Charts and Legends for 3D Atlas Maps - A Mashup of D3.js, osgEarth, and the Chromium Embedded Framework

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
hello to my presentation and I also no from Switzerland that's the country where I departed 3 days ago that's country in the middle of Europe up with lots of mountains which you can see in the foot and even if you haven't been there I'm sure you have heard of some of its products to Switzerland produces quite accurate watches all harmonize this many helpful to lose all maybe you've tried some Swiss cheese or even some of this chocolate another product of Switzerland as
the efforts of Switzerland International at 1st and that's where I'm working it has been established by this this category but it lodged in half at each EHC rate in the and 1961 and it was 1st printed atlas and since truth housing that's ditch to next year we plan to release a new version compared to the previous version which was shipped as a DVD it's not completely web based on main user interfaces of virtue below and it allows us to display all maps there and also we can experimentally that was freed cut cartography here some
expressions so we have a variety of seems like nature and environment
economy history but have also some of seems which are global and to put of Switzerland and context of the world or at least of Europe and all I am is through construct an attractive maps but at the same time still readable so that begins the interest of summer pre the new version is
a bit was open source technology as virtud glow use was us and it supports many years 4 months and you can integrate a custom digital elevation models on top of that we have c chromium embedded framework it's the browser engine below the Chrome browser and we can develop all agreements that based on current web technologies that's why you can also include JavaScript libraries like distri to a style the maps and to create a legend sort create charts and that's what I want to focus in this presentation the so
1st of all it's astounding for this I
modified the existing industries scales and so it doesn't take much of modification many translated very well to was the student so I just ripped them and functions of this different names only a few modifications were necessary for example for this threshold where the maps the maximum value diet inside the interval also I added of function for customer values of 1 of these data fits but to this is rather than the exception in general and this finding is based on the names and the indices of attributes and as an extension to industry it's possible to change would domains and a more to parental also in the do you Germania of or sometimes the missing values or undefined values as inputs or even inverted failures and successes of what we have no true and lastly you know we have strings instead of areas for better readability and for editing
you can see an example of citing function so we have all the static assigning attributes which you can see here and a dynamic function bends the dynamic of functional specifies an a tribute and of some unique values as demand values and this writers are mapped to some colors and also the color alone in case the input values on different so when we have a future this was a certain idea and an attribute of true and then the the corresponding color was chosen which is of this 1 and this is as string is returned false studios which looks like search which combines the static and the dynamic components so reside
so might look like so so if you have some extrude cells with different colors and a little bit of transparency what we want now to
see if legend next to it
and nearly comes for free because we have wrapped terms the distri scalar function of it so we can construct so that's an additional being well we need some data like translations value maps to create this year that are that interactions and labels so here in cases trees the the legend of aligned and metrics like structure and this allows us not only to display rectangles but also lines and some words here is an example of a simple legend and so the corresponding map looks like this so these are some cable and Switzerland there are some special cases for
unique values the 1st 1 is when you have some undefined values which do not have really a meaning for example for administrative units already specify only the color so you put some in the group the other cases when you have too many unique values for example for geology and maps this might be the case then you put some also intergroups and when you click on such a group of some of the unique values are displayed for the school the next legend
type was based on these threshold scale and it's basically specifies the value range and the science of citing attribute so over here it's a color and as I said before and the maximum value is included in the until about the last interval and so you can also make the hyperplane met with that for example where the pipelines have different sizes and colors I you can
also combine with unique and limit values so here we have our languages as unique values and of the dominant source of language as limit values that languages have different colors and the more intense the colors and so the higher the dominance so we can see in the map of things that a lot of German is spoken in Switzerland and you can identify the communes where had percentage is quite high the last
legend type to prevent scored interpolated edges and based on the streets linear scale it's interpolates assigning a tribute units so it's a kind of which was interpolated but it can be also deliberated quickly and exponentially interpolated but this map that as of solar precipitation as visualized in millimeters per year and 2 kinds of science were extruded to which strengthens the effect so we have seen
in all some chloroplast maps some alignments and some symbol maps but we can also construct some sharp moves this these 3 for this I have implemented 6
so our common chart types that you can see here's some circular charts which uses the distri OCR functional and also some rectangular charts which are simply composed of SVG so charts can be placed under oath geocells SPG robots for this is I can drive and is being extended and so as to have only static maps we can pre-rendered these charts was is that the performance is better follows the chart to find
of the conceit URIs that's similar to the styling function value so we have against some static attributes specific this chart type and some dynamic parts which shows the kind of segments and the height of the bar the so when we have some features like this was certain attributes an SVG document is generated which looks like that's all as all values are negative and and that the colonists and the reddish group and so small as the values are higher as the bodies
and the map could look like this so in this case it's year and unit length variation of glaciers and that's what's so it does look look at a very good because it let places emitting so we better care Baltic climates that we have some place 1st left in 100 years but back to the topic and hence uh this entire comes nearly for free as the use the previous these signing function and so we have here some limit values for the legend but you can also have some
unique away use arms associated electricity consumption In Europe was in different sectors of those different colors and and so because the ring charges forms the largest so you so this is a example for european that and you can compare the value of Switzerland with other countries so I think no it's high
time of 4 D among it
so this is all a prototypical application and that's the nature of the tumor and choose inventions which has been over there so of what should go and you can all click on the categories to see the unique values and I've yet inserted a little animation that it's looks at the little bit nicer quite most and you can also zoom in to is a good should go to get some more details and tutored and to see its head of and also virtually another example is the precipitation maps it needs a
bit of time to low we the the yeah and from so saves unloaded enticed maybe some of you have been to the talk yesterday and almost universal supports also some kind of spectral fighting the and when you zoom in the tides get a bit faster loaded and that you can to some and identify all of the arrows in areas where the principally tations quite high so here you but don't forget the umbrella of the and to know some of the shops of maps here see the delays here this
but charts the and here you can to some again they are spilled bullets and because you'll be and extended the I can drive and so when the 2 it's a globe 7 the occlusion call of this activated so that the charter hidden and also some decluttering charts are too close together then they get a little bit smaller and more transparent and
another example is CH structure and Europol some have diverging bar charts so that we can some to Switzerland and compare it with other countries like Germany and France so it doesn't looks at different but looks a bit more different when you compare that to African countries the so on the
that's words that's possible
and and maybe you already have identified something so which can be improved so at the moment we don't have legends for comparing sizes but you can imagine as services and oblige described in here phd's cheese is server reference frame for the individual charts to compare them and to put them into relation also the tilting of chart but can be improved so that we look for a right on the globe's then we have the nicest toward view and that's the ability get activated for inuktitut the and of also when you zoom in the charts should get a little bit bigger and from using knowledge and they show I get a bit smaller and lastly and we can imagine what so to have some real loans 3 D charts but then we need probably another JavaScript library at like that which 3 jails through this season to put some into the virtue of so at that point I want true and
saying can the company behind was to us which is unique in that they so they developed so that should go and also did see and Seth integration I want a single my boss for developing industry and all of chromium embedded framework
developers chromium developers I want to think my edges of Switzerland then team especially the more and barrier were did see STG integration in all students and finally th stearic for pondering my trip so what do you enjoy this
presentation and those things will change few the that's a technique to become a little bit more about the the chromium desktop application and is D 3 running in matters of all services I mean yeah the chromium
and embedded is put in an open GL context on top of a virtual globe and we have for our and that's the charts beforehand on so was that it was nutrients so so to us had to 1st see JavaScript of the age of the engine integrated but saves what to to a different and the engine which is called took tape parts of received V 8 engine and it was possible to
dynamically created and the
charts the Richard no but no yeah there's some young buck secured so we know that rendered them on the server side thank you thank you and do you have any have provisions for or a ideas about the including making de active legends and thinking malice overall clicking on the icons because if you if you have 500 types of rocky geology chart on a food scale for precipitations I would want to get to the exact value offer item yeah that fossil actually possible in the previous version so when you have a whole lot of polygons then it is 2 . was displayed to the next 1 transient and neighbors in the legend so you could see the relation so we that might be possible but it is that we have also some common feature picking when you click on a polygon then the little future in 4 appears and you can see the value what makes it any other questions the this might be obvious they did you develop your 3 D Base factor good their treaty that base that did you develop a from basement idea Soloviev are integrated on the custom digital elevation model and the phone or rendered killings the shaded relief and yeah that's also what was done not me but when the team of the atlas of Switzerland if this I has 1 if you're gonna be distributing your source
code for your application I'm you know that's that's a bit difficult because all primary purpose to develops as atlas so that we want to focus on that and part of the have also a plant rule that constructors so caudatus platforms but semantic aware of uh interested parties can use this framework and to their use easy i code which I've I presented today so maybe not in your future future it's unlikely that published on the web but yeah it takes a bit of effort to do that OK thank you it ongoing work which was asking is was that map that 3 that was rendered in the client using what library was using to render it was it was a d 3 without the fear was that something else comes the basement yet meaning know that chosen designed really that so rendered by all students have got at
the any other questions thank you
Kombinatorische Gruppentheorie
Biprodukt
Computeranimation
Benutzeroberfläche
Kategorie <Mathematik>
Natürliche Zahl
sinc-Funktion
Versionsverwaltung
Dialekt
Bitrate
Computeranimation
Mapping <Computergraphik>
Benutzerbeteiligung
Arithmetischer Ausdruck
Biprodukt
Schnitt <Graphentheorie>
Programmierumgebung
Varietät <Mathematik>
Offene Menge
Bit
Browser
Open Source
Browser
Versionsverwaltung
Strömungsrichtung
Kontextbezogenes System
Kombinatorische Gruppentheorie
Framework <Informatik>
Quick-Sort
Computeranimation
Mapping <Computergraphik>
Benutzerbeteiligung
Virtuelle Realität
Programmbibliothek
Benutzerführung
Programmbibliothek
Visualisierung
Inklusion <Mathematik>
Benutzerführung
Zentrische Streckung
Lineares Funktional
Schwellwertverfahren
Extrempunkt
t-Test
Identitätsverwaltung
Extrempunkt
Ein-Ausgabe
Computeranimation
Inverser Limes
Mapping <Computergraphik>
Domain-Name
Array <Informatik>
Maßstab
Flächeninhalt
Ein-Ausgabe
Schwellwertverfahren
Nichtunterscheidbarkeit
Indexberechnung
Eindeutigkeit
Maßerweiterung
Inverter <Schaltung>
Zeichenkette
Attributierte Grammatik
Hydrostatik
Lineares Funktional
Bit
Subtraktion
Eindeutigkeit
Zellularer Automat
Zusammenhängender Graph
Kantenfärbung
Ein-Ausgabe
Computeranimation
Zeichenkette
Attributierte Grammatik
Linienelement
Rechteck
Interaktives Fernsehen
E-Mail
Term
Gerade
Skalarfeld
Computeranimation
Mapping <Computergraphik>
Netzwerktopologie
Textur-Mapping
Maßstab
Translation <Mathematik>
Wort <Informatik>
Datenstruktur
Gerade
Zentrische Streckung
Subtraktion
Schwellwertverfahren
Extrempunkt
Eindeutigkeit
Systemverwaltung
Gruppenkeim
Computeranimation
Inverser Limes
Mapping <Computergraphik>
Arithmetisches Mittel
Spannweite <Stochastik>
Einheit <Mathematik>
Datentyp
Hyperebene
Kantenfärbung
Eindeutigkeit
Attributierte Grammatik
Soundverarbeitung
Zentrische Streckung
Formale Sprache
Eindeutigkeit
Quellcode
Computeranimation
Inverser Limes
Linearisierung
Textur-Mapping
Grenzwert <Mathematik>
Einheit <Mathematik>
Datentyp
Meter
Kantenfärbung
Mapping <Computergraphik>
Lineares Funktional
Schweizerische Physikalische Gesellschaft
Datentyp
Symboltabelle
Gasdruck
Computeranimation
Kreisbogen
Roboter
Lineares Funktional
TVD-Verfahren
Dicke
Gruppenkeim
Sichtenkonzept
Computeranimation
Inverser Limes
Textur-Mapping
Grenzwert <Mathematik>
Einheit <Mathematik>
Datentyp
Mereologie
Innerer Punkt
Attributierte Grammatik
Bildschirmmaske
Unterring
Computeranimation
Mapping <Computergraphik>
Bit
Kategorie <Mathematik>
Natürliche Zahl
Eindeutigkeit
Besprechung/Interview
Kartesische Koordinaten
Computeranimation
Mapping <Computergraphik>
Bit
Flächeninhalt
Systemaufruf
Zeitrichtung
Computeranimation
Bit
Wort <Informatik>
Datenstruktur
Computeranimation
Dienst <Informatik>
Bit
Punkt
Sichtenkonzept
Momentenproblem
Rahmenproblem
Rechter Winkel
Relativitätstheorie
Programmbibliothek
Computeranimation
Benutzerschnittstellenverwaltungssystem
t-Test
Softwareentwickler
Bildschirmfenster
Framework <Informatik>
Computeranimation
Feuchteleitung
Integral
Dienst <Informatik>
Bit
Offene Menge
Magnetbandlaufwerk
Mereologie
Kartesische Koordinaten
Kontextbezogenes System
Kombinatorische Gruppentheorie
Computeranimation
Zentrische Streckung
Betragsfläche
Datentyp
Relativitätstheorie
Besprechung/Interview
Server
Versionsverwaltung
Quellcode
Polygon
Teilbarkeit
Bit
Besprechung/Interview
t-Test
Schlussregel
Kartesische Koordinaten
Kontextbezogenes System
Code
Framework <Informatik>
Textur-Mapping
Client
Benutzerbeteiligung
Mereologie
Programmbibliothek

Metadaten

Formale Metadaten

Titel Creating Charts and Legends for 3D Atlas Maps - A Mashup of D3.js, osgEarth, and the Chromium Embedded Framework
Serientitel FOSS4G 2014 Portland
Autor Schnürer, Raimund
Lizenz CC-Namensnennung 3.0 Deutschland:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen.
DOI 10.5446/31672
Herausgeber FOSS4G, Open Source Geospatial Foundation (OSGeo)
Erscheinungsjahr 2014
Sprache Englisch
Produzent Foss4G
Open Source Geospatial Foundation (OSGeo)
Produktionsjahr 2014
Produktionsort Portland, Oregon, United States of America

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract This presentation introduces a mashup of the JavaScript library D3.js, the virtual globe toolkit osgEarth, and the web browser engine Chromium Embedded Framework. Using the example of a national atlas, it is demonstrated how these OpenSource frameworks facilitate the creation of charts and legends for a series of three-dimensional maps.First, it is explained how a map in osgEarth can be styled with D3 scale functions. Legends for choropleth, line, symbol, and grid maps are derived therefrom. They allow to depict unique values, value ranges, and combinations of those having two dependent variables. Also legend templates for color gradients and hierarchical categories have been developed. All legends are superimposed the virtual globe by means of the Chromium Embedded Framework.Next, six widely used chart types - i.e. pie, ring, wing, divided area, bar, and divergent bar charts - with individual properties are presented. Charts are defined with aforementioned styling functions, created with D3.js, and displayed as billboards in the virtual globe.Finally, a live demo is shown, current limitations are discussed and future work of the atlas project is outlined.
Schlagwörter Charts
Legend
Virtual Globes
3D Cartography
National Atlases
Mashup
D3.js
osgEarth
Chromium Embedded Framework

Ähnliche Filme

Loading...
Feedback