Logo TIB AV-Portal Logo TIB AV-Portal

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

Video in TIB AV-Portal: Creating Charts and Legends for 3D Atlas Maps - A Mashup of D3.js, osgEarth, and the Chromium Embedded Framework

Formal Metadata

Creating Charts and Legends for 3D Atlas Maps - A Mashup of D3.js, osgEarth, and the Chromium Embedded Framework
Title of Series
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
Open Source Geospatial Foundation (OSGeo)
Production Year
Production Place
Portland, Oregon, United States of America

Content Metadata

Subject Area
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.
Keywords Charts Legend Virtual Globes 3D Cartography National Atlases Mashup D3.js osgEarth Chromium Embedded Framework
presentation Computer animation production
versions web user interfaces category Computer animation mapping rates environment naturally varieties expression since
current Context presentation mapping Open Source time bits browser versions web graphical user interface inclusion Computer animation framework sort libraries
domain area functionality scale mapping exponents maximal student threshold attributes Computer animation string input extent inverted
functionality component unique cellular bits Coloured attributes static Computer animation Graph Coloring case different string input
map mapping interactive translation lines rectangles words Computer animation case terms scalar topology structure metrics
groups scale mapping administrations unique unit Ranges maximal Coloured threshold attributes Types means Computer animation Graph Coloring case different hyperplanes
meter map scale Open Source unique unit limit effects information Types Computer animation Graph Coloring linear
Types functionality Computer animation mapping robotics Schweizerische Physikalische Gesellschaft Symbolic
Types functionality groups map Computer animation case breadth unit limit Part variations attributes
Arm Computer animation ring time
category Computer animation mapping Meeting/Interview naturally unique bits applications
area Computer animation mapping time bits arrow system call
words Computer animation bits structure
point category services Computer animation views moment bits Right framework libraries
boss Barriers Computer animation integrators Development framework student
presentation Context services Computer animation Stream bits open subsets applications Part
versions category Types server scale factor Open Source Meeting/Interview polygons Bas
Context map code bits student clients Part applications rules web Meeting/Interview framework libraries
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