index.html

---
layout: default
title: The Daily Bread
---

<script>
  yepnope({
    load: [
      // 'http://wheredoesmymoneygo.org/wp-content/themes/wdmmg/wdmmg.css',
      "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css",
      "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js",
      "/js/libs/base64.js",
      "/js/libs/underscore.js",
      "/js/libs/raphael-min.js",
      "/js/aggregator.js",
      "/css/dailybread.css",
      "/js/setting.js?20120707",
      "/js/dailybread.js?20120707",
    ],
    complete: function () {
      (function ($) {
        $(function () {
          $("#preloader .txt").html("loading data");

          var db = new OpenSpending.DailyBread($("#dailybread"));
          new OpenSpending.Aggregator({
            apiUrl: "http://openspending.org/api",
            localApiCache: "aggregate.json",
            dataset: OpenSpending.identifier,
            drilldowns: ["cofog1", "cofog2"],
            cuts: ["year:" + OpenSpending.year],
            rootNodeLabel: "Total",
            breakdown: "region",
            callback: function (data) {
              $("#content-wrap").show();
              $("#preloader").remove();
              db.setDataFromAggregator(data, ["unknown"]);
              db.setIconLookup(function (name) {
                var style = OpenSpending.Styles.Cofog[name];
                if (style != undefined) {
                  return style["icon"];
                }
                return "icons/unknown.svg";
              });
              db.draw();
            },
          });

          OpenSpending.renderDependentTypes(db);
        });
      })(jQuery);
    },
  });
</script>

<div id="dailybread">
  <!--
  <h2 class="page-header">The Daily Bread <small> Costs for the British Taxpayer per Day</small></h2>
  -->
  <div>
    <h2 style="width: 240px; display: inline-block; vertical-align: top">
      あなたの世帯タイプは？
    </h2>
    <div
      id="select-dependents-type"
      style="width: 450px; display: inline-block"
    >
      <div class="single">単身世帯</div>
      <div class="family">扶養有り</div>
    </div>
    <br style="clear: both" />
  </div>

  <div id="preloader" style="text-align: center; padding: 100px">
    <img src="img/ajax-loader.gif" style="vertical-align: top" /> &nbsp;<span
      class="txt"
      >loading javascript libraries</span
    >
  </div>

  <div id="content-wrap" style="display: none">
    <div id="db-topbar" class="layout-row layout-3col-15-70-15">
      <div id="db-salary" class="layout-col layout-col-1">
        <h2>年収</h2>
        <p>&yen;4,000,000</p>
      </div>

      <div id="db-slider" class="layout-col layout-col-2">
        <h2>あなたの年間収入を選んでください</h2>
        <div class="wdmmg-slider"></div>
      </div>

      <div id="db-tax" class="layout-col layout-col-3">
        <h2>あなたの横浜市税（年間）</h2>
        <p>&yen;31.12</p>
      </div>
    </div>
    <!-- /#db-topbar -->
  </div>
  あなたの市税は、1日当たり、どこで、いくら使われているか？
</div>
<!-- /#dailybread -->