what we buy

Imports to NZ in 2016. Coloured by continent.

Click circles to zoom in and out.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    text-align:center;
    font-family: "Helvetica Neue", Helvetica, Arial;
  }
.node {
  cursor: pointer;
}

.node:hover {
  stroke: #000;
  stroke-width: 1.5px;
}

.node--leaf {
  fill: white;
}

.label {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

.label,
.node--root,
.node--leaf {
  pointer-events: none;
}

</style>
<svg width="920" height="920">
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
<script>

const svg = d3.select("svg"),
    margin = 2,
    diameter = +svg.attr("width"),
    g = svg
			.append("g")
			.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"),
   renderForExport = false

const group_colors = d3.scaleOrdinal(d3.schemeAccent)

const pack = d3.pack()
    .size([diameter - margin, diameter - margin])
    .padding(0.5);

d3.csv("data.csv", function(error, data) {
  if (error) throw error;

const stratData = d3.stratify()(data),
				root = d3.hierarchy(stratData)
    			.sum(function (d) { return d.data.size })
  				/*.sort(function(x, y){
            return d3.ascending(x.data.data.group, y.data.data.group) || 
              d3.descending(x.value, y.value)
          })*/
  				.sort(function(x, y){return d3.descending(x.value, y.value)})

var focus = root,
      nodes = pack(root).descendants(),
      view

svg
      //.style("background", color(-1))
      .on("click", function() { zoom(root); });

zoomTo([root.x, root.y, root.r * 2 + margin]);

function zoom(d) {
    var focus0 = focus; focus = d;

function label(s, num) {
  if (num > 1000000000) {
    return s + ' $' + (num / 1000000000).toFixed(1) + 'bn'
  }
  return s + ' $' + (num / 1000000).toFixed(0) + 'm'
}
</script>

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

https://d3js.org/d3-scale-chromatic.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js