fabiovalse

This diagram shows the different kind of Source of Law contained within the DoGi dataset. The data have been retrieved using the SPARQL endpoint of Linked Data Dogi. The bar chart uses a logarithmic scale in order to better visualize smaller values. The logarithmic trend of the scale can be noticed by looking at x axes on the top and the vertical lines behind the red bars.

SELECT ?desc (COUNT(*) AS ?cont) {
  ?s a http://www.dogi.cnr.it/resource/SourceOfLaw ;
      dcterms:description ?desc .
} GROUP BY ?desc ORDER BY DESC(?cont)

fabiovalse

fabiovalse

fabiovalse

This treemap is an experiment of how the Hilbert treemap approach based on base 4 numbers behave with some samples data. Even if they are not so significant for the purpose of the visualization, English words has been choosen as sample data.

Surprisingly, the creation of all the regions and tiles that can be seen by zooming in and out within the visualization is computed on the fly, client side. Turf.js has been used for merging:

• the quads generated by the base4 number algorithm into the polygons of the lowest level of depth
• the polygons of a certain level of depth to polygons of the upper

fabiovalse

This experiment concludes the Hilbert Map series (1, 2, 3, 4). The level of detail has been added in order to show quad tiles only when a certain zoom level has been reached.

fabiovalse

Differently from the previous examples (1, 2, 3), this experiment adds the concept of viewport for loading the tiniest quads in the map. The idea is to shows the smallest quads within the blue viewport in order to prevent the loading of large amount of data. In the next gist the viewport will be combined with a level of detail mechanism.

fabiovalse

This example extends the previous by adding tiles on the map. This is only a demonstration for the future implementation of the viewport and level of details.

fabiovalse

The Hilbert map presented in the previous example is here improved by aggregating the quads belonging to the same class (The Clipper library has been used for this purpose). The map results to be ligther than the previous one, since a single SVG path is used for representing a class instead of a set of squares.

fabiovalse

This example is an attempt to generate a treemap based on the Hilbert curve. We use an approach based on the generation of quads from numbers in base 4. Each color represents a class. On the top left, the legend shows the amount of instances each class contains.

The fractal structure of the resulting map can be seen by zooming the tiny tails of each region. REFRESH the page in order to get a new map (Both number of classes and class amounts are randomly generated).

fabiovalse