All examples By author By category About

maggie-lee

Full window Github gist

Georgia's budget in $1

<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>If Georgia's budget were $1 instead of $42 billion</title>
<style>

body {
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  font-family: "Arial", Arial;
  font-size: 11.5px;
/*  position: relative;*/
  width: 1628px;
}

#chart {
  width: 1728px;
  height: 608px;
  background: #ddd
  opacity: 0;
}

text {
  pointer-events: none;
}

.grandparent text {
  font-weight: bold;
  font-size: 16px;
}

rect {
  fill: none;
  stroke: #fff;
}

rect.parent,
.grandparent rect {
  stroke-width: 2px;
}

.grandparent rect {
  fill: orange;
}

.grandparent:hover rect {
  fill: #ee9700;
}

.children rect.parent,
.grandparent rect {
  cursor: pointer;
}

.children rect.parent {
  fill: #bbb;
  fill-opacity: .5;
}

.children:hover rect.child {
  fill: #bbb;
}

div.tooltip {   
  position: absolute;           
  text-align: left;           
  width: 250px;                  
  height: 168px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: beige; 
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;
  opacity: 0;         
}

.subtitle {   
  position: absolute;           
  text-align: left;           
  width: 1050px;                  
  height: 160px;                 
  padding: 2px;             
  font: 24px sans-serif;        
  background: none; 
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

.explainer {
  font: 14px sans-serif;
}

</style>

<font size='6'><b>If Georgia's budget were $1</b></font><br>
<font size='3'>(Instead of $42,374,896,219)<br></font>
<br>
<font size = '2'>by Maggie Lee<br>
Sept. 4, 2014<br>
<br>

Georgia's total budget is <b>$42,374,896,219</b> for the year ending in June, 2015.<br><br> <b>$18,738,793,140</b> of that is <font color="green">state </font> money: the taxes on purchases and income me and you and companies make to the Georgia taxman. <br><br><b>$12,184,984,411</b> is <font color="green">federal</font> money passed through Georgia's budget. A lot of that is matching funds they send when we pony up some cash as well. <br><br><b>$11,451,118,668</b> comes from <font color="green">'other</font>' sources. That includes fees for service, like tuition payments to colleges and universities<br>
<br>
<br>
<aside><b>Click any cell to zoom in, or the top orange label to zoom out.</b></aside>
</p>

<!-- <p>Treemaps are a form of <a href="https://mbostock.github.com/d3/ex/treemap.html">space</a><a href="https://mbostock.github.com/d3/ex/pack.html">-filling</a> <a href="https://mbostock.github.com/d3/ex/sunburst.html">layout</a> where the area of each rectangle is proportional to its value. This example shows the size of files in a source tree.

<p>Treemaps visualize hierarchical data, but since often only the leaf nodes (files rather than folders) are drawn, it can be difficult to see the hierarchy. <a href="https://en.wikipedia.org/wiki/File:Tree_Map.png">Padding</a> is sometimes used to show the hierarchy via containment, though this introduces area distortion. <a href="https://www.win.tue.nl/~vanwijk/ctm.pdf">Cushion gradients</a> also indicate hierarchy, but are somewhat unintuitive (or perhaps just ugly).

<p>The treemap above uses interaction to reveal the hierarchy incrementally: clicking on a node zooms in. Only two levels of the hierarchy are visible at a time. This allows the layout’s aspect ratio (ideally φ) to be optimized for the current view, rather than computing a global layout. It also allows the exploration of arbitrarily-large datasets: data can be lazily-loaded and positioned on zoom!

<p>This visualization is implemented in <a href="https://d3js.org">D3.js</a>, based on an <a href="https://mbostock.github.com/d3/talk/20111018/treemap.html">earlier version</a> from my talk at SVG Open. Also see Nicolas Garcia Belmonte’s zoomable treemap of <a href="https://thejit.org/static/v20/Jit/Examples/Treemap/example1.html">music albums</a>, and The New York Times’ free-form zooming for <a href="https://www.nytimes.com/packages/html/newsgraphics/2011/0119-budget/">Obama’s 2012 budget proposal</a>. Note the subtle differences in behavior! -->

everything_else_string = "Attorney General's office, Board of Pardons and Paroles, Employees' Retirement System, Department of Agriculture, Forestry Commission, Department of Veterans Service, Teachers Retirement System, Workers' Compensation Board, Secretary of State's office, State Accounting Office, Insurance Commissioner's office, Department of Banking and Finance, Public Service Commission, Soil and Water Conservation Commission, State Properties Commission<br>";

var factor = 8;

var margin = {top: 30, right: 50, bottom: 30, left: 0},
    width = (factor * 166),
    height = (factor * 68) -margin.top ,
    formatNumber = d3.format(",d"),
    transitioning;

console.log(width)
console.log(height)

var color = d3.scale.category10();

var big_cents = d3.format(".2n");
  var little_cents = d3.format(".1n");
  var reg_cents = d3.format(".1n");

var big_total = 42374896219; // let's hardcode total spending

var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, height])
    .range([0, height]);

var treemap = d3.layout.treemap()
    .children(function(d, depth) { return depth ? null : d._children; })
    .sort(function(a, b) { return a.value - b.value; })
    .ratio(height / width * 0.5 * (1 +  Math.sqrt(10))) // ohh this changest the layont
    .round(false);

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.bottom + margin.top)
    .style("margin-left", -margin.left + "px")
    .style("margin.right", -margin.right + "px")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .style("shape-rendering", "crispEdges");

var grandparent = svg.append("g")
    .attr("class", "grandparent");

grandparent.append("rect")
    .attr("y", -margin.top)
    .attr("width", width)
    .attr("height", margin.top);

grandparent.append("text")
    .attr("x", 6)
    .attr("y", 6 - margin.top)
    .attr("dy", ".65em");

var div = d3.select("body").append("div")   // put the tooltip in a separate div
          .attr("class", "tooltip");       //see d3noob website for all tooltip

var div2 = d3.select("body").append("div")
          .attr("class", "subtitle");

d3.json("dollar.json", function(root) {
  initialize(root);
  accumulate(root);
  layout(root);
  display(root);

function initialize(root) {
    root.x = root.y = 0;
    root.dx = width;
    root.dy = height;
    root.depth = 0;
  }

// Aggregate the values for internal nodes. This is normally done by the
  // treemap layout, but not here because of our custom implementation.
  // We also take a snapshot of the original children (_children) to avoid
  // the children being overwritten when when layout is computed.
  function accumulate(d) {
    return (d._children = d.children)
        ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 0)
        : d.value;
  }

// Compute the treemap layout recursively such that each group of siblings
  // uses the same size (1×1) rather than the dimensions of the parent cell.
  // This optimizes the layout for the current zoom state. Note that a wrapper
  // object is created for the parent node for each group of siblings so that
  // the parent’s dimensions are not discarded as we recurse. Since each group
  // of sibling was laid out in 1×1, we must rescale to fit using absolute
  // coordinates. This lets us use a viewport to zoom.
  function layout(d) {
    if (d._children) {
      treemap.nodes({_children: d._children});
      d._children.forEach(function(c) {
        c.x = d.x + c.x * d.dx;
        c.y = d.y + c.y * d.dy;
        c.dx *= d.dx;
        c.dy *= d.dy;
        c.parent = d;
        layout(c);
      });
    }
  }

console.log("ok")

function display(d) { // this is the orange bar
    grandparent
        .datum(d.parent)
        .on("click", transition)
      .select("text")
        .text("Georgia budget June 2014 through July 2015 -- includes state and federal funds");
 
    var g1 = svg.insert("g", ".grandparent") 
        .datum(d)
        .attr("class", "depth");

var g = g1.selectAll("g")
        .data(d._children)
      .enter().append("g");

g.filter(function(d) { return d._children; })
        .classed("children", true)
        .on("click", transition);

g.selectAll(".child")
        .data(function(d) { return d._children || [d]; })
      .enter().append("rect")
        .attr("class", "child")
        .style("fill", function (d) {return color(d.parent.name); })
        .style("stroke-width", "0px")
        .call(rect);

dollar_formatter = d3.format("0,000");

g.append("rect") 
        .attr("class", "parent")
        .call(rect);

d3.selectAll(".parent")
        .on("mouseover", function (d) {
          div.transition()
            .duration(200)
            .style("opacity", 0.9);
         div.html( d.longname + "<p><b><u>Total: $" + dollar_formatter(d.total) + "</u></b>" + footnoter(d))
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px"); })
        .on("mouseout", function (d) {
          div.transition()
            .duration(300)
            .style("opacity", 0)
        });

d3.selectAll(".depth").append("text") // this appends the subtitle
      div2.style("opacity", 0.5)
      div2.html(d.name != "Everything else" ? 
        d.longname + " " + big_cents(d.cents*100) + "¢"
        :
        d.longname + " " + big_cents(d.cents*100) + "¢" + "<br><font size = '2'>" + everything_else_string + "</font>")
        .style("opacity", isNaN(d.cents) ? 0 : 1 ) // erase out the ones that are NaN
        .style("left", width*0.01)
        .style("top", height *1.64);

g.append("text") // this appends text to parent node
        .attr("dy", "0.75em")
        .text(function(d) { return d.name; })
        .call(text);

g.append("text") // this appends cents figure to parent node
        .attr("class", "cents")
        .attr("dy", function(d) {

if (d.cents > 0.0019) {return "1.75em"; }
          else if (d.cents < 0.0019) {return "0.75em" ;}
          else if (isNaN(d.cents)) {return "1.75em"; }
          ;})
        .attr("dx", function(d) {return d.cents < 0.0019 ? "2.75em" : 0 ;})
        .call(text)
        .text(function(d) {
          if (d.cents > 0.1) { return (big_cents(100*d.cents)) + "¢"; } 
          else if (d.cents < 0.1) { return (little_cents(100*d.cents)) + "¢"; }
          else if ( isNaN(d.cents)) {
            if (d.value/big_total > 0.1) {return (big_cents(100*(d.value/big_total))) + "¢";}
            else {return (little_cents(100*(d.value/big_total))) + "¢"; }}
        ;})

function transition(d) {
      if (transitioning || !d) return;
      transitioning = true;

var g2 = display(d),
          t1 = g1.transition().duration(750),
          t2 = g2.transition().duration(750);

// Update the domain only after entering new elements.
      x.domain([d.x, d.x + d.dx]);
      y.domain([d.y, d.y + d.dy]);

// Enable anti-aliasing during the transition.
      svg.style("shape-rendering", null);

// Draw child nodes on top of parent nodes.
      svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });

// Fade-in entering text.
      g2.selectAll("text").style("fill-opacity", 0);

// Transition to the new view.

t1.selectAll("text").call(text).style("fill-opacity", 0);
      t2.selectAll("text").call(text).style("fill-opacity", 1);
      t1.selectAll("rect").call(rect);
      t2.selectAll("rect").call(rect);

// Remove the old node when the transition is finished.
      t1.remove().each("end", function() {
        svg.style("shape-rendering", "crispEdges");
        transitioning = false;

});
    }

return g;
  }

function text(text) {
    text.attr("x", function(d) { return x(d.x) + 2 ; }) //moves text left/right
        .attr("y", function(d) { return y(d.y) + 2; }); // moves text up/down
  }

function footnoter(footnote) {
          var my_string = ""
          for (i = footnote._children.length-1; i > -1 ; i--) {
            //console.log(i);
            //console.log(footnote._children[i].name + " " + dollar_formatter(footnote._children[i].value));
            my_string = my_string.concat("<p>", footnote._children[i].name, ": $", (dollar_formatter(footnote._children[i].value)))
          }
          return my_string;
        }

function name(d) {
    return d.parent
        ? name(d.parent) + "." + d.name
        : d.name;
  }

});

</script>

<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img src="https://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"></a><br><hr> 
Check out how boring <a href="https://opb.georgia.gov/sites/opb.georgia.gov/files/related_files/site_page/Budget%20In%20Brief%20AFY%202014%20and%20FY%202015.pdf" target="_blank">the original data presentation was, pages 34 and 35.</a><br><br><br><br><br>
This treemap was made with D3.js and mostly lifted from Mike Bostock's <a href="https://bost.ocks.org/mike/treemap/" target="_blank">canonical example</a>.<br>
My remixed code <a href="https://bl.ocks.org/greencracker/fd56f1a279c0e3d5a5d0" target="_blank">is here.</a>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http:// to a secure url

https://d3js.org/d3.v3.min.js

https://