bubbletree.html

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

<!-- AddToAny BEGIN -->
<a class="a2a_dd" href="http://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fkoganei.spending.jp%2F&amp;linkname=Koganei%20Spending"><img src="http://static.addtoany.com/buttons/share_save_171_16.png" width="171" height="16" border="0" alt="Share"/></a>
<script type="text/javascript">
var a2a_config = a2a_config || {};
a2a_config.linkname = "Koganei Spending";
a2a_config.linkurl = "http://koganei.spending.jp/";
a2a_config.onclick = 1;
a2a_config.locale = "ja";
a2a_config.prioritize = ["email", "facebook", "tumblr", "twitter", "linkedin", "google_plus"];
</script>
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->

<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: ['category', 'subcategory'],
        cuts: ['year:' + OpenSpending.year],
        breakdown: 'subcategory',
        callback: dataLoaded
      });
    });
  }
  });

  </script>

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

<!-- Disqus comments -->
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'koganeispending'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>