D3 Examples - Trade Flows

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
​
<!-- Example based on https://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from https://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
​
<style>
body {
  font-family: "HelveticaNeue-Light";
  font-size: 13px;
}
​
.label{
  font-size: 12px;
}
​
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
​
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
​
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
​
<script>
var margin = {top: 100, right: 20, bottom: 30, left: 40},
    width = 990 - margin.left - margin.right,
    height = 900 - margin.top - margin.bottom,
    nested, formatNumber = d3.format(",d")
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Million USD:</strong> <span style='color:red'>" + formatNumber(Math.round(d)) + "</span>";
  })
​
svg.call(tip);
​
​
var color = d3.scale.quantile()
    .domain([1, 30000])
    .range(["#eee",'#0050fb', '#3367f4', '#447ded', '#4d92e6', '#4fa8df', '#82b3c3', '#b0bb9d', '#d1c275', '#ebca45', '#fcc707', '#fead15', '#fe911d', '#fd7321', '#fb4f24']);
​
var scaledlegend = function(svg, qrange, ml,mt, Title){
  var margin = {top: 40, right: 10, bottom: 30, left: 10},
    width = 874 - margin.left - margin.right,
    height = 70 - margin.top - margin.bottom;
​
  var scope = qrange.map(function(d){ return Math.round(d/1000)*1000});
​
  var color = d3.scale.threshold()
    .domain(scope)
    .range(["",'#0050fb', '#3367f4', '#447ded', '#4d92e6', '#4fa8df', '#82b3c3', '#b0bb9d', '#d1c275', '#ebca45', '#fcc707', '#fead15', '#fe911d', '#fd7321', '#fb4f24'])
​
  var x = d3.scale.log()
    .domain(d3.extent(scope))
    .range([0, width]);
​
  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(17,0)
    .tickValues(color.domain())
    .ticks(20, d3.format("s"));
​
  
  var g = svg.append("g")
    .attr("transform", "translate(" + ml + "," +mt + ")")
    .attr("class", "key")
​
  g.selectAll("rect")
      .data(color.range().map(function(d, i) {
        return {
          x0: i ? x(color.domain()[i - 1]) : x.range()[0],
          x1: i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
          z: d
        };
      }))
    .enter().append("rect")
      .attr("height", 13)
      .attr("x", function(d) { return d.x0; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .style("fill", function(d) { return d.z; });
​
  g.attr("class","legend").call(xAxis).append("text")
      .attr("class", "caption")
      .attr("y", 45)
      .attr("x", width/2)
      .text(Title)
      .style("font-size", 16)
      .style("text-anchor", "middle")
}
​
d3.csv("2013_gross_trade.csv", function(error, data) {
 nested = d3.nest()
        .key(function(d) { return d.exporting_country; })
        .entries(data); 
​
 var group = svg.selectAll(".row").data(nested).enter()
      .append("g")
      .attr("class", "group")
      .attr("transform", function(d, i) { return "translate(0," + (i*13) + ")"; })
​
  group.append("text")
      .attr("class", "label")
      .attr("x", 75)
      .attr("y", 4)
      .attr("dy", ".4em")
      .style("text-anchor", "end")
      .text(function(d) { return d.key; });
​
  group.selectAll(".box").data(function(d){ 
          var newdata = d3.values(d.values[0]); 
          newdata.shift()
          return newdata
        })
      .enter().append("rect")
        .attr("transform", function(d, i) { return "translate("+(i*15 + 80)+",0)"; })
        .attr("x", function(d){  return 0})
        .attr("y", 0)
        .attr("width", 13)
        .attr("height", 12)
        .style("fill", function(d){  return color(+d)})
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
​
  var importernames = d3.keys(nested[0].values[0])
  importernames.shift()
  var importers = svg.selectAll(".row").data(importernames).enter()
      .append("g")
      .attr("class", "group")
      .attr("transform", function(d, i) { return "translate("+(i*15 + 80 )+"," + -10 + ")rotate(-90)"; })
​
    importers.append("text")
      .attr("class", "label")
      .attr("x", -6)
      .attr("y", 5)
      .attr("dy", ".4em")
      .text(function(d) { return d; });
​
  scaledlegend(svg,color.quantiles(), 80, 740, "Gross Exports, Million USD")
​
})
​
d3.select(self.frameElement).style("height", (height + margin.top + margin.bottom) + "px");
d3.select(self.frameElement).style("width", (width + margin.left + margin.right) + "px");
</script>
    