Skip to content

Playing with D3 & simplify.js

25. April 2013

Within the last weeks I was fiddling around with Mike Bostocks great JavaScript library D3 and his implementation of Visvalinghams algorithm for line simplification, d3.simplify.js.

This post shall be a conclusion of what I have done with it.

  1. I re-implemented MBostocks example for line simplification…see here!
  2. Than…I thought it would be could to have a more interactive visualisation. So I combined the first implementation with Leafletsee here! Choosing the parameter for simplification had to be changed. That is why I added a scalebar to the visualisation.
  3. That was nice, but not usefull. I changed the small scalebar, to a bigger, hideable one and added a scale dependency for the line simplification…see here! Now you get an textual information on the simplification parameter and you can save one parameter for each zoomlevel!
  4. So far I used I used a polygonal geometry of the german administrative boundary, that I extracted from the Admin0-Countries Vector file provided by Natural Earth. These geometries are already heavily generalized and therefore performant applicable. But what if I use more detailled vector? So I extracted the german boundary from OpenStreetMap as this database should offer me the surely most detailled geometry! A loss of performance is clearly recognizable in the example.
  5. That is all very interesting, but we have one problem…how can we somplify the lines and keep the topologic relations of each object. Jason Davies presented an interesting extension for d3.simplify.js. But that seems relatively complicated…wouldn’t it be easier to use the TopoJSON file format? Lastly it already encodes the topologic relations of all objects! That is why I began to implement my example using a TopoJSON file but firstly without topologic consistency. I implemented that using the topojson.objects (see here) and the topojson.mesh (see here). Especially, when you have a look at the mesh example, you can see how topologic inconsistent the simplification works, as you are using lines and not polygons (as in the previous examples).
  6. So let’s try to keep the topology. In TopoJSON are all redundant (lines that belong to more than one polygon…or see in this post) geometries stored only once and the link to the reffering geometries is stored. That is why I know the vertices of all geometries. When I do not throw out these points (when simplifying) will the geometries keep topological consinstent, at least at the vertices! You can see in the example how the objects keep linked together at their veritces (this is still simplification using the topojson.mesh as in the previous example).
  7. Calling this a topological consistent linear simplification would be exaggerated! But the concept of defining “anchor points” seems to be a good possibility to define a kind of granularity on how detailled the topologic consinstency should be. I wanted to play a little bit with the idea of anchor points. Therefore I added the opportunity to define an “anchor area” wherein all points are handled as “anchor points”! Use the right-mouse to define the area in this example!
  8. This basic topology preserving works only for using the topojson.mesh, as you can see in this example! And that was clear…using the mesh…I do have each redundant border only once…using the object…I do have each redundant border twice!
  9. But I wanted to follow the idea: When I add more data respectively more borders, the more shared borders, the more anchor points are detectable. So I made a 1st test on a more detailled dataset, containing also borders of municipalities. See an example using data of saxony! You can see very good, how the basic shape of saxony is still identifiable, even for the highest possible degree of simplification.
  10. So the next stage is clear…do this for germany. But I used the regions of germany as municipalities would be way too detailled for this example!
  11. What if I used other geometries that shared borders to detect where topological consistency could be necessary. In this example I combined the previous examples with some rivers. This is more a test and is not very good implemented. The rivers should also get simplified, but all their points are detected as “anchor points”, but it demonstrated the basic idea very good.
  12. Lastly I applied the previous examples also on official german data, which was published a short time ago. See the basic application of the vg250-dataset (generalised for 1:250K) or have a look at the comparing example of vg250 and vg1000-dataset (generalised for 1:1Mio).
One Comment

Trackbacks & Pingbacks

  1. Over 2000 D3.js Examples and Demos | TechSlides

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: