bubbletree.html

---
layout: default
title: 使途別予算額
---

<div class="row">
  <script type="text/javascript">
    yepnope.errorTimeout = 1000;
    yepnope({
      load: [
        "/js/libs/jquery.qtip.min.js",
        "/js/libs/jquery.history.js",
        "/js/libs/raphael-min.js",
        "/js/libs/vis4.js",
        "/js/libs/base64.js",
        "/js/libs/Tween.js",
        "/js/bubbletree.js",
        "/css/bubbletree.css",
        "/css/cra-map.css",
        "/js/aggregator.js",
        "/js/setting.js",
      ],
      complete: function () {
        $(function () {
          var $tooltip = $('<div class="tooltip">Tooltip</div>');
          $(".bubbletree").append($tooltip);
          $tooltip.hide();

          var dataLoaded = function (data) {
            window.bubbleTree = new BubbleTree({
              data: data,
              container: "#bubbletree",
              bubbleType: "icon",
              bubbleStyles: {
                cofog: OpenSpending.Styles.Cofog,
              },
              clearColors: true, // remove all colors coming from OpenSpending API
              rootPath: "/",
              tooltip: {
                qtip: true,
                delay: 800,
                content: function (node) {
                  return [
                    node.label,
                    '<div class="desc">' +
                      (node.description
                        ? node.description
                        : "No description given") +
                      '</div><div class="amount">\u00A5 ' +
                      node.famount +
                      "</div>",
                  ];
                },
              },
            });
          };

          // call openspending api for data
          new OpenSpending.Aggregator({
            apiUrl: "http://openspending.org/api",
            //Use static file instead of api
            localApiCache: "aggregate.json",
            dataset: OpenSpending.identifier,
            rootNodeLabel: "Total",
            drilldowns: ["cofog1", "cofog2"],
            cuts: ["year:" + OpenSpending.year],
            breakdown: "region",
            callback: dataLoaded,
          });
        });
      },
    });
  </script>

  <div class="bubbletree-wrapper">
    <div id="bubbletree" class="bubbletree"></div>
  </div>
</div>