Trade Flows

World's exporters (rows) and importers (cols) in million USD.

<!DOCTYPE html>
<html>
<meta charset="utf-8">

.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>

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>

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

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js