Canadian IPOs

Playing around with clustered force layours, as per Mike Bostock's /mbostock/1747543. Data is from Bloomberg, manually edited.

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

#gi {
    line-height: 1.1;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
  }

#gi .gi-heading {
    font-size: 22px;
    color: #333;
    padding-bottom: 0px;
    margin-bottom: 16px;
    font-weight: bold;
  }

#gi .gi-chart_text {
    margin-bottom: 20px;
  }

#gi .gi-chart_text div {
    padding: 0;
    margin: 0;
  }

#gi .gi-legend {
    background-color: #f9f9f9;
    padding: 10px 10px 8px 10px;
  }

#gi .gi-legend_item {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 5px;
  }

#gi .gi-legend_item span {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 6px;
  }

#gi .gi-legend_item div {
    display: inline-block;
    font-size: 16px;
    color: #333;
    margin: 0;
    padding: 0;
  }

#gi .gi-name,
  #gi .gi-valuation {
    font-size: 20px;
    color: #333;
  }

#gi .gi-name {
    font-weight: bold;
  }

#gi .gi-valuation {
  }

#gi .gi-name:empty:before {
    content: "Company name";
    color: #cacaca;
  }

#gi .gi-valuation:empty:before {
    content: "IPO value";
    color: #cacaca;
  }

#gi .gi-bg {
    fill: #f9f9f9;
  }

#gi .gi-circle {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

#gi .gi-selected {
    stroke: #CE2A23;
    stroke-width: 2px;
  }

@media screen and (max-width: 619px) {
    #gi .gi-heading {
      font-size: 20px;
    }
    #gi .gi-name,
    #gi .gi-valuation {
      font-size: 20px;
    }
    #gi .gi-chart_text {
      margin-bottom: 16px;
    }

#gi .gi-legend_item {
      margin-bottom: 2px;
    }

#gi .gi-legend_item span {
      width: 9px;
      height: 9px;
    }
    #gi .gi-legend_item div {
      font-size: 14px;
    }
  }
  </style>
  <div id="gi">
    <div class="gi-heading">Canadian IPOs on Canadian exchanges worth $50-million (U.S.) or more in the past five years, by size and industry</div>
    <div class="gi-chart_text">
      <div class="gi-name"></div>
      <div class="gi-valuation"></div>
    </div>
    <div class="gi-legend"></div>
    <div class="gi-chart"></div>
    <pre class="gi-data" style="display: none;">
date,year,issuer,size,sector
12/07/2010,2010,Karnalyte Resources,64.027,Basic Materials
09/11/2012,2012,Ivanhoe Mines,305.701,Basic Materials
06/01/2015,2015,TMAC Resources,155.1,Basic Materials
03/16/2010,2010,Stonegate Agricom,51.75,Basic Materials
06/29/2011,2011,EcoSynthetix,103.05,Basic Materials
10/14/2010,2010,Teranga Gold,109.854,Basic Materials
10/26/2012,2012,KP Tissue,153.125,Basic Materials
10/29/2010,2010,Pretium Resources,283.02,Basic Materials
04/24/2015,2015,Stingray Digital Group,161,Communications
05/20/2015,2015,Shopify,188.02,Communications
10/08/2010,2010,Whistler Blackcomb Holdings,345,Consumer
06/05/2015,2015,Sleep Country Canada Holdings,300.05,Consumer
02/13/2015,2015,Cara Operations,230.115,Consumer
04/17/2013,2013,BRP,301.645,Consumer
06/15/2015,2015,Spin Master,253.058,Consumer
10/17/2012,2012,Hudson's Bay,380.375,Consumer
02/11/2010,2010,Sienna Senior Living,190.2,Consumer
06/03/2011,2011,LWP Capital,66.5194,Consumer
09/06/2012,2012,Regal Lifestyle Communities,153.797,Consumer
06/03/2013,2013,Information Services,169.05,Consumer
04/20/2015,2015,GDI Integrated Facility Services,161.68,Consumer
07/31/2015,2015,Gibraltar Growth,104.5,Diversified
06/24/2015,2015,Acasta Enterprises,402.5,Diversified
03/10/2015,2015,Dundee Acquisition,112.3,Diversified
05/22/2015,2015,Alignvest Acquisition,258.75,Diversified
04/22/2015,2015,INFOR Acquisition,230,Diversified
02/10/2010,2010,Secure Energy Services,66.125,Energy
04/12/2010,2010,Rodinia Oil,57.2,Energy
04/07/2011,2011,Longview Oil,172.5,Energy
03/11/2011,2011,Parallel Energy Trust,393.3,Energy
05/11/2012,2012,Argent Energy Trust,244.145,Energy
02/24/2011,2011,Condor Petroleum,87.6245,Energy
02/26/2010,2010,Athabasca Oil,1350,Energy
03/14/2013,2013,Oryx Petroleum,250.5,Energy
04/14/2014,2014,PrairieSky Royalty,1674.4,Energy
04/27/2011,2011,Gibson Energy,568,Energy
05/13/2014,2014,Journey Energy,198,Energy
05/14/2010,2010,C&C Energia,114.99,Energy
06/14/2010,2010,MEG Energy,700,Energy
06/26/2013,2013,TransAlta Renewables,221,Energy
06/30/2014,2014,Northern Blizzard Resources,519,Energy
09/23/2014,2014,Seven Generations Energy,931.5,Energy
10/13/2010,2010,Eagle Energy Trust,169.5,Energy
10/14/2010,2010,Tourmaline Oil,241.5,Energy
11/18/2013,2013,Cardinal Energy,247.501,Energy
04/08/2010,2010,TransGlobe Apartment REIT,247.29,Financial
04/08/2010,2010,Canmarc REIT,176.289,Financial
02/10/2010,2010,NorthWest Healthcare Properties,187.5,Financial
06/09/2011,2011,Dream Global REIT,310.5,Financial
05/01/2012,2012,HealthLease Properties REIT,121,Financial
03/05/2012,2012,Morguard North American Residential REIT,82.5,Financial
09/10/2013,2013,CT REIT,303.025,Financial
06/09/2015,2015,Automotive Properties REIT,81.2,Financial
01/15/2013,2013,American Hotel Income Properties REIT,95.7,Financial
02/24/2012,2012,Slate Retail REIT,50,Financial
02/28/2013,2013,Inovalis REIT,113.7,Financial
03/15/2013,2013,WPT Industrial REIT,116.495,Financial
03/19/2014,2014,Callidus Capital,289.8,Financial
03/21/2013,2013,Melcor REIT,91.3,Financial
03/31/2010,2010,Tricon Capital Group,68.9452,Financial
05/22/2012,2012,Pure Multi-Family REIT,58.5982,Financial
05/22/2015,2015,Crown Capital Partners,65.01,Financial
05/24/2013,2013,Choice Properties REIT,460,Financial
08/17/2012,2012,Dream Industrial REIT,178.25,Financial
11/15/2012,2012,Slate Office REIT,58.8,Financial
11/16/2012,2012,Agellan Commercial REIT,151.212,Financial
11/26/2014,2014,Fairfax India Holdings,630.339,Financial
03/05/2014,2014,Lumenpulse,115,Industrial
04/02/2013,2013,Halogen Software,63.48,Technology
05/02/2014,2014,Kinaxis,115.709,Technology
09/18/2015,2015,Hydro One Ltd,1829.62,Utilities
09/26/2012,2012,Crius Energy Trust,100,Utilities
10/18/2010,2010,Global Water Resources,65.6596,Utilities
    </pre>
  </div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">

var width = d3.select("#gi").node().getBoundingClientRect().width,
    height = width * 0.9,
    padding = 1.5, // separation between same-color circles
    clusterPadding = 10, // separation between different-color circles
    maxRadius = parseInt(width * 0.105);

var data = d3.csv.parse(d3.select(".gi-data").text());

var ext = d3.extent(data, function(obj) { return Math.sqrt(Number(obj.size) / Math.PI); });

function arrayUnique(a) {
    return a.reduce(function(p, c) {
      if (p.indexOf(c) < 0) p.push(c);
      return p;
    }, []);
  };

data.splice(-1, 1);

var sectorClusters = arrayUnique(data.map(function(value) { return value.sector; }));

var m = sectorClusters.length;

var color = d3.scale.category10()
    .domain(d3.range(m));

var clusters = new Array(m);

var rScale = d3.scale.linear()
    .domain(ext)
    .range([2, maxRadius]);

var nodes = data.map(function(obj, index, arr) {
    var value = obj.size,
        i = sectorClusters.indexOf(obj.sector),
        r = rScale((Math.sqrt(value / Math.PI))),
        d = {
          cluster: i,
          radius: r,
          issuer: obj.issuer,
          size: obj.size,
          sector: obj.sector
        };
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
    return d;
  });

var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(.02)
    .charge(0)
    .on("tick", tick)
    .start();

var svg = d3.select(".gi-chart").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr({
      "class": "gi-bg",
      "width": width,
      "height": height
    });

var circleGroup = svg.append("g")
    .attr("class", "gi-circle-group");

var legendItem = d3.select(".gi-legend").selectAll("div")
    .data(clusters)
    .enter().append("div")
    .attr("class", "gi-legend_item");

legendItem.append("span")
    .attr("class", "gi-legend_dot")
    .style("background-color", function(d, i) {
      return color(d.cluster);
    });

legendItem.append("div")
    .text(function(d) {
      return d.sector;
    });

// Move d to be adjacent to the cluster node.
  function cluster(alpha) {
    return function(d) {
      var cluster = clusters[d.cluster];
      if (cluster === d) return;
      var x = d.x - cluster.x,
        y = d.y - cluster.y,
        l = Math.sqrt(x * x + y * y),
        r = d.radius + cluster.radius;
      if (l != r) {
        l = (l - r) / l * alpha;
        d.x -= x *= l;
        d.y -= y *= l;
        cluster.x += x;
        cluster.y += y;
      }
    };
  }

// Resolves collisions between d and all other circles.
  function collide(alpha) {
    var quadtree = d3.geom.quadtree(nodes);
    return function(d) {
      var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
        nx1 = d.x - r,
        nx2 = d.x + r,
        ny1 = d.y - r,
        ny2 = d.y + r;
      quadtree.visit(function(quad, x1, y1, x2, y2) {
        if (quad.point && (quad.point !== d)) {
          var x = d.x - quad.point.x,
            y = d.y - quad.point.y,
            l = Math.sqrt(x * x + y * y),
            r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
          if (l < r) {
            l = (l - r) / l * alpha;
            d.x -= x *= l;
            d.y -= y *= l;
            quad.point.x += x;
            quad.point.y += y;
          }
        }
        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
      });
    };
  }

</script>

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