Sgvizler has moved to github. This site and its repository will no longer be maintained.
wiki:Sgvizler/Chart/GoogleVisualizationTreeMap

This chart and its examples are implemented using Sgvizler 0.6, for version 0.5 see Sgvizler/0.5/DesigningQueries.

source:misc/image/screenshot/gTreeMap.png

Google Tree Map

Draws a tree map, see e.g.,  WikiPedia:Treemapping.

Chart ID
google.visualization.TreeMap
External reference
 https://developers.google.com/chart/interactive/docs/gallery/treemap
Other similiar charts
Sgvizler/Chart/GoogleVisualizationOrgChart

Query result set format

3--4 columns:

  1. Identifier for node
    Datatype: String
  2. Identifier for parent node. A root node has no parent
    Datatype: String
  3. Value to determine the size of the box. Non-leaf node values are computed from their children
    Datatype: Number
  4. Value to determine the color of the box.
    Datatype: Number

Column 4 is optional.

See  Google's page on this chart for more details.

Chart options

See  Google's page on this chart for all available options.

See Sgvizler/Using, or the example(s) below, for how to set options.

Live Example

Query: The oil production in year 2009 on the Norwegian Contiental Shelf, grouped after company and field.

There are three levels in the query: the root, the companies and the fields, each are contained in their own block. We use the string "ALL" to represent the root node. Note that values for levels other than the leaves may be ignored also by the query.

HTML

<div id="ex"
   data-sgvizler-endpoint="http://sws.ifi.uio.no/sparql/npd"
   data-sgvizler-query="
        SELECT DISTINCT ?node ?parent ?value
        { 
          # ROOT
          { LET (?node := &quot;ALL&quot;) }
          UNION
          # COMPANIES
          { ?s a npdv:Company ;
               npdv:name ?node .
            [] a npdv:Field ;
               npdv:hasCompany ?s .
            LET(?parent := &quot;ALL&quot;) }
          UNION
          # FIELDS
          { ?s a npdv:Field ;
               npdv:name ?node ;
               npdv:hasCompany [ npdv:name ?parent ] .
            [] a npdv:FieldProductionPeriod ; 
              npdv:hasField ?s ; 
              npdv:year &quot;2012&quot; ; 
              npdv:producedNetOilMillSm3 ?Oil ;
              OPTIONAL{ ?period npdv:month ?month } . 
              FILTER (!bound(?month)) 
           }
        }"
   data-sgvizler-chart="google.visualization.TreeMap"
   style="width:400px; height:265px; border:1px solid black; display: inline-block;"></div>

Result

The result of the HTML above (left), and a google.visualization.Table rendering of the same query (right).


Notes

See Sgvizler/Setup for how Sgvizler is setup on this site.

Note that the query and visualization is ment to show the use of Sgvizler, and may not be the most appropriate way of illustrating this result set.

Feedback

Tickets

No results

User Examples and Comments

Users, please insert (links to) other examples of usage of this Sgvizler chart, or relevant comments here.