Animated Bubble Chart

.gitignore

# Editor backup files
*.bak
*~

BubbleChart.js

var BubbleChart, root;

BubbleChart = function(raw_data) {
  BubbleChart.name = 'BubbleChart';
  var chart = {};

  // first, clean up the raw data, and store it: we will have to redo the nest()ing after applying any filters!
  var id_counter = 0;
  var data = [];
  raw_data.forEach(function(d) {
    var obj = d;
    obj.id = ++id_counter;
    obj.main_trade_group = d["main_trade-group"]; // record.main_trade-group
    delete obj["main_trade-group"];
    // force numeric:
    // '+value' to make sure stored value is of numeric type.
    obj.imports_to = +d.imports_to;
    obj.exports_from = +d.exports_from;
    obj.total_trade = +d.total_trade;
    obj.trade_balance = +d.trade_balance;
    obj.year = +d.year;
    data.push(obj);
  });
  console.debug(data);

  // start display with data grouped by region > year.
  var grouped_data = d3.nest()
    .key(function(d) {
      return d.region;
    })
    .key(function(d) {
      return d.year;
    })
    .rollup(function(rows) {
        return {
          rows: rows, // to make sure the UNaggregated data makes it into the resulting array too!

          id: ++id_counter,
          //id:rows[0].id,
          region:rows[0].region,
          country: "(grouped)",
          us_country_code: "(grouped)",
          iso2_code: "(grouped)",
          main_trade_group:rows[0].main_trade_group,
          group: rows[0].group,
          year: rows[0].year,

          imports_to: d3.sum(rows, function(d) {return d.imports_to;}),
          exports_from: d3.sum(rows, function(d) {return d.exports_from;}),
          total_trade: d3.sum(rows, function(d) {return d.total_trade;}),
          trade_balance: d3.sum(rows, function(d) {return d.trade_balance;})
        };
    })
    .entries(data);

  // add these to each region group for simplified display code:
  grouped_data.forEach(function(d) {
    d.key = d.values[0].values.region;
    d.id = ++id_counter;
    d.country = "(grouped)";
    d.us_country_code = "(grouped)";
    d.iso2_code = "(grouped)";
    d.main_trade_group = d.values[0].values.main_trade_group;
    d.group = d.values[0].values.group;
    d.year = "all";

    d.imports_to = d3.sum(d.values, function(d) {return d.values.imports_to;});
    d.exports_from = d3.sum(d.values, function(d) {return d.values.exports_from;});
    d.total_trade = d3.sum(d.values, function(d) {return d.values.total_trade;});
    d.trade_balance = d3.sum(d.values, function(d) {return d.values.trade_balance;});

    // and helper code to fixup nest output for our other code; this and a few other bits
    // are a clear indication that our way of using d3.nest() is inflexible and above all:
    // cumbersome -- when seen in the light of N-dimensional filtering / zooming of the
    // data, i.e. when treating the loaded data as a 'data cube' and you want to implement
    // drill down, etc..
    d.values.forEach(function(d) {
      d.id = d.values.id;
      d.country = d.values.country;
      d.us_country_code = d.values.us_country_code;
      d.iso2_code = d.values.iso2_code;
      d.main_trade_group = d.values.main_trade_group;
      d.group = d.values.group;
      d.year = d.values.year;

      d.imports_to = d.values.imports_to;
      d.exports_from = d.values.exports_from;
      d.total_trade = d.values.total_trade;
      d.trade_balance = d.values.trade_balance;
    });
    // end of helper code hacky stuff
  });

  console.debug(grouped_data);

  // filtering aid: collect the set of 'known years':
  var year_set = [];
  grouped_data.forEach(function(d) {
    d.values.forEach(function(d) {
      // .key is always a string, coming out of d3.nest(); make it numeric again
      if (year_set.indexOf(+d.key) < 0)
        year_set.push(+d.key);
    });
  });
  console.debug("known years", year_set);

  var vis = null;
  var nodes = [];
  var links = [];
  var force = null;
  var circles = null;
  var width = 940;
  var height = 500;
  var tooltip = CustomTooltip("tooltip", 190);
//    var center = {
//        x: width / 2,
//        y: height / 2
//    };
  var layout_gravity = 0.12;
  //var damper = 0.1;
  var fill_color = d3.scale.ordinal().domain(["low", "medium", "high"]).range(["#d9e3ec", "#e1bebc", "#dbe9b9"]);
  // make sure the max_size is the MAX(_grouped_ total trade) as those values will be the largest ever to show.
  var max_size = d3.max(grouped_data, function(d){
      return d.total_trade;
  });
  var radius_scale = d3.scale.pow().exponent(0.5).domain([0, max_size]).range([10, 45]);
  create_nodes();

  force = d3.layout.force()
      .nodes(nodes)
      .links(links)
      .size([width, height]);
  //create_chart();

  //create node objects that will be used as the data behind each bubble
  function create_nodes(pick_year) {
    nodes = [];
    if (!pick_year) {
      grouped_data.forEach(function(d) {
        nodes.push(d);
      });
    } else {
      grouped_data.forEach(function(d) {
        d.values.forEach(function(e) {
          if (e.values.year == pick_year) {
            nodes.push(e);
          }
        });
      });
    }
    console.log("nodes = ", nodes);

    //nodes.sort(function(a, b) {
    //  var delta = b.group - a.group;
    //  if (!delta)
    //    delta = b.total_trade - a.total_trade;
    //  return delta;
    //});

    // generate a link set to attempt to keep same-group nodes together in the bubblechart. Not too strong, nor too weak a bond...
    //
    // I wing it by being lazy: only one link chain, while 'full fledged' would be linking up everyone with everyone.
    // That will load the force calculation though and this turns out to be good enough.
    // You can always go in and link last with first and maybe a couple of semi-random cross-links to make the group 'tighter'.
    links = [];
    var groups = {};
    nodes.forEach(function(d) {
      if (!groups[d.group])
        groups[d.group] = [];
      groups[d.group].push(d);
    });
    for (var k in groups) {
      var g = groups[k];
      var i = g.length;
      while (--i > 0) {
        links.push({source: g[i], target: g[i-1]});
      }
    }
  };

  //create chart and circles for each node
  function create_chart() {
    if (!vis) {
      vis = d3.select("#vis")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("id", "svg_vis");
    }
    if (!circles) {
      circles = vis.selectAll("circle").data(nodes,function(d) {
          return d.id;
      });
    }

    return redraw(2000); // first time, transition is 2s, rest of the time 750ms
  };

  function year_filter(year) {
    // convert to numeric value:
    year = +year;
    if (year_set.indexOf(year) >= 0) {
      // filter on a single year, for which we do have data:
      create_nodes(year);
    } else {
      // select ALL available data!
      create_nodes();
    }

    // add the nodes to the force, and start running it
    force
      .stop()
      .nodes(nodes)
      .links(links)
      .start();

    circles = vis.selectAll("circle").data(nodes);
    return redraw();
  };

  function redraw(enter_anim_duration) {
    circles.enter().append("circle")
      .attr("id", function(d, i) {
          return "bubble_" + d.id;
      })
      .attr("r", 0)
      .attr("opacity", 0.9)
      .attr("fill", function(d) {
        return "white"; // fill_color(d.group);
      })
      .attr("stroke-width", 2)
      .attr("stroke", function(d) {
        return "white"; // d3.rgb(fill_color(d.group)).darker();
      })
      .on("mouseover", function(d, i) {
        return show_details(d, i, this);
      })
      .on("mouseout", function(d, i) {
        return hide_details(d, i, this);
      })

    circles.transition().duration(enter_anim_duration || 750)
      .attr("fill", function(d) {
        return fill_color(d.group);
      })
      .attr("stroke-width", 2)
      .attr("stroke", function(d) {
        return d3.rgb(fill_color(d.group)).darker();
      })
      .attr("r", function(d) {
        return radius_scale(d.total_trade);
      });

    circles.exit().transition().duration(2000)
        .attr('opacity',0)
        .remove();

    return display_layout();
  };

  //allow for collision detection with nodes of different sizes (based on the radius of each node)
  function charge(d) {
    var r = radius_scale(d.total_trade);
    return -Math.pow(r, 2.0) / 5;
  };

  //starts the force layout
  function start() {
    create_chart();
  };

  //sets up the force layout to display the nodes in one circle
  function display_layout() {
    force
      .gravity(layout_gravity)
      .charge(charge)
      .linkStrength(0.07)
      .friction(0.8)
      .on("tick", function(e) {
        return circles
          //.each(move_to_center(e.alpha))
          .attr("cx", function(d) {
            return d.x;
          })
          .attr("cy", function(d) {
            return d.y;
          });
      });
    return force.start();
  };

//  //moves all nodes to the centre of the visualisation
//  var move_to_center = function(alpha) {
//    return function(d) {
//      d.x = d.x + (center.x - d.x) * (damper + 0.02) * alpha * 1.1;
//      return d.y = d.y + (center.y - d.y) * (damper + 0.02) * alpha * 1.1 ;
//    };
//  };


  //show tooltip
  function show_details(data, i, element) {
    var content;
    d3.select(element).attr("stroke", "#42464a");
    content = "<span class=\"title\"><span class=\"value\"> " + data.region + "</span></span><br/></br>";
    content += "<span class=\"name\">US Country Code:</span><span class=\"value\">    " + data.us_country_code + "</span><br/>";
    content += "<span class=\"name\">ISO 2 Code:</span><span class=\"value\">    " + data.iso2_code + "</span><br/>";
    content += "<span class=\"name\">Main Trade Group:</span><span class=\"value\">    " + data.main_trade_group + "</span><br/></br>";
    // Math.round to cents to remove floating point inaccuracies; run code without the round to see long decimal fraction tails printed.
    // Another way would be using d3.format. Anything to get rid of the floating point inaccuracies (which always happen when you calculate something on any computer: floating point is inaccurate by definition).
    content += "<span class=\"name\">Imports:</span><span class=\"value\">    $" + (addCommas(Math.round(data.imports_to, 2))) + "</span><br/>";
    content += "<span class=\"name\">Exports:</span><span class=\"value\">    $" + (addCommas(Math.round(data.exports_from, 2))) + "</span><br/></br>";
    content += "<span class=\"name\">Total Trade:</span><span class=\"value\">    $" + (addCommas(Math.round(data.total_trade, 2))) + "</span><br/>";
    content += "<span class=\"name\">Trade Balance:</span><span class=\"value\">    $" + (addCommas(Math.round(data.trade_balance, 2))) + "</span><br/></br>";
    content += "<span class=\"name\">Year:</span><span class=\"value\">   " + data.year + "</span><br/></br>";
    return tooltip.showTooltip(content, d3.event);
  };

  //hide tooltip
  function hide_details(data, i, element)
  {
    d3.select(element).attr("stroke", function(d) {
      return d3.rgb(fill_color(d.group)).darker();
    });
    return tooltip.hideTooltip();
  };

  // public exports:
  chart.redraw = redraw;
  chart.start = start;
  chart.display_layout = display_layout;
  chart.year_filter = year_filter;

  return chart;
};

root = (typeof exports !== "undefined" && exports !== null) ? exports : this;

$(function() {
  var chart, render_chart, render_vis;
  chart = null;
  render_vis = function(csv) {
    return render_chart(csv);
  };
  render_chart = function(csv) {
    chart = BubbleChart(csv);
    chart.start();
    return root.display_layout();
  };
  root.display_layout = function() {
    return chart.display_layout();
  };
  root.year_filter = function(year) {
    return chart.year_filter(year);
  };
  root.toggle_view = function(year_selected) {
    return root.year_filter(year_selected);
  };
  return d3.csv("USTradeFigures.csv", render_vis);
});

Modal.js

$.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( jQuery(window).height() - this.height() ) / 2 +jQuery(window).scrollTop() + "px");
        this.css("left", ( jQuery(window).width() - this.width() ) / 2 +jQuery(window).scrollLeft() + "px");
        return this;
      }

    $(".modal-profile").center();

    $('.modal-lightsout').css("height", jQuery(document).height());

    $('a[rel="modal-profile"]').click(function() {
        $('.modal-profile').fadeIn("slow");
        $('.modal-lightsout').fadeTo("slow", .9);
    });

    $('a.modal-close-profile, .modal-lightsout').click(function() {
        $('.modal-profile').fadeOut("slow");
        $('.modal-lightsout').fadeOut("slow");
    });

style.css

article, aside, details, figcaption, figure, footer, header, hgroup, section, nav {
	display: block;
	margin-left:0px;
}
@font-face {
	font-family:"Myriad Web Pro";
	src:url("fonts/MyriadWebPro.ttf");
}
body {
	font-family: "Myriad Web Pro", Arial, sans-serif;
}
#wrapper {
	width: 940px;
	height: auto;
	overflow:hidden;
	border: solid 1px #CCC;
	border-radius:5px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	margin-bottom:5px;
	margin-top: auto;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}
header {
	font-size:24px;
	border-bottom:1px solid #CCC;
	padding-bottom:10px;
}
.year_selection {
	float: left;
	list-style:none;
	margin-top:20px;
	margin-bottom: 5px;
}
.year_selection a {
	padding: 10px 15px;
	background: #fafafa;
	color: #333333;
	text-decoration:none;
	display:inline-block;
	padding:10px;
	font-size:14px;
	border-radius: 4px;
	border: solid 1px #ccc;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	cursor:pointer;
}
.year_selection a.active {
	background: #e6e6e6;
	color:#FFF;
	outline:none;
	text-decoration: none;
}
.about {
	float:right;
	cursor:pointer;
	margin-top:30px;
	margin-bottom:5px;
	font-size:14px;
	text-decoration:none;
}
a.about:active {
	color:#e6e6e6;
}
#information {
	position: absolute;
	width: 200px;
	top:165px;
	border: solid 1px #CCC;
	border-radius:5px;
	padding:10px;
	height: 440px;
	z-index: 10;
	background-color:#fafafa;
}
#information p {
	font-size:14px;
}
#legend {
	float: right;
	top: 180px;
	z-index: 10;
	overflow: hidden;
	height: 40px;
	clear: both;
	width: 100%;
}
#vis {
	width: 940px;
	height: 500px;
	clear: both;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
footer {
	width:940px;
	margin:auto;
	text-align: center;
	font-size:12px;
	padding-right: 20px;
	padding-left: 20px;
	border: solid 1px #CCC;
	border-radius:5px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.tooltip {
	position: absolute;
	top: 100px;
	left: 100px;
	border-radius: 5px;
	border: 1px solid #ccc;
	background: #fafafa;
	opacity: 0.8;
	color: black;
	padding:10px;
	font-size: 12px;
	z-index: 10;
}
.tooltip .title {
	font-size: 13px;
	font-weight:bold;
	text-transform:uppercase;
	border-bottom:1px solid #CCC;
	padding:5px;
}
.tooltip .name {
	font-weight:bold;
}
.modal-profile {
	display:none;
	height: 250px;
	width: 500px;
	padding:25px;
	border:1px solid #ccc;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	border-radius:5px;
	background: #fafafa;
	z-index:50;
	opacity:0.7;
}
a.modal-close-profile {
	position:absolute;
	top:10px;
	right:10px;
}
.modal-lightsout {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:25;
	background:#fff;
	opacity:0.7;
}

Trade.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>US FOREIGN TRADE</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://raw.github.com/vlandham/vlandham.github.com/master/vis/js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<section id="wrapper">
  <header>US Foreign Trade</header>
  <section>
      <nav class="year_selection">
      <a id="all" class="active">All</a>
      <a id="2010">2010</a>
      <a id="2009">2009</a>
      <a id="2008">2008</a>
      <a id="2007">2007</a>
      <a id="2006">2006</a>
      </nav>
    <a rel="modal-profile" class="about" ref="#">About</a>

  </section>
 <section id="legend">
  <svg>
      <circle cx="633" cy="30" r="8" fill="#d9e3ec" stroke-width="1" stroke="#bababa"></circle>
      <text x="644" y="35" style="font-size:14px;" fill="black" >Low Trade</text>
      <circle cx="735" cy="30" r="8" fill="#e1bebc" stroke-width="1" stroke="#bababa"></circle>
      <text x="746" y="35" style="font-size:14px;"fill="black">Medium Trade</text>
      <circle cx="860" cy="30" r="8" fill="#dbe9b9" stroke-width="1" stroke="#bababa"></circle>
      <text x="871" y="35" style="font-size:14px;" fill="black">High Trade</text>
    </svg>
 </section>
  <section id="information" name="information">

    <p>Values are in millions of dollars.</p>
    <p>All values are not seasonally adjusted except:
      0004 World (seasonally adjusted)</p>
    <p>Country codes beginning with the number 0 (zero) are unofficial country
      codes created by the Foreign Trade Division for organizational use only.
      These codes are not valid for reporting or statistical purposes. </p>
    <p>
  </section>
  <section class="modal-lightsout"></section>

  <section class="modal-profile">
  <a class="modal-close-profile" title="Close" href="#"><img src="images/Sign-Error-icon.png" alt="Close" width="40" height="40" /></a>
  <p>Bubbles are sized according to the total trade figures for the region/country.</p>
   <p>Clicking on a bubble will filter the data to show the countries within this region.</p>
  </section>
  <section id="vis"></section>
</section>
<footer>
  <p>SOURCE - U.S. Department of Commerce, Bureau of the Census, Foreign Trade
  Division. </p>
  <p> For more information, contact Matthew Przybocki (301-763-3148)
    or Maria Iseman (301-763-2311), Foreign Trade Division.</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script defer src="https://raw.github.com/vlandham/vlandham.github.com/master/vis/gates/js/plugins.js"></script>
<script defer src="https://raw.github.com/vlandham/vlandham.github.com/master/vis/gates/js/script.js"></script>
<script src="https://raw.github.com/vlandham/vlandham.github.com/master/vis/gates/js/CustomTooltip.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>
<script src="Modal.js"></script>
<script src="BubbleChart.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(document).ready(function() {
          $(".year_selection a").click(function() {
            var year_selected = $(this).attr('id');
            $(".year_selection a").removeClass('active');
            $(this).toggleClass('active');
            toggle_view(year_selected);
            return false;
          });
        });
    });
  </script>
</body>
</html>

USTradeFigures.csv