Test Tops - Pack Layout

IEX API

<head>
  <style>
    .d3-tip {
   font-family: 'Raleway', sans-serif;
   font-size: .8em;
   line-height: 1;
   padding: 7px;
   background: black;
   color: lightgray;
   border-radius: 20px;
}
  </style>
<body align=center>
  <div class=dropdown></div><br><br>
    <button id="sortBtn">next</button>
    <span id="sortLbl">default</span>
    <div id="chart"></div>
</body>
  
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>

function visualise(data){

var diameter = 600;

data.forEach(function(d) {
        d.name = d.symbol;
      d.marketPercent = (d.marketPercent *100).toFixed(1);
      });

var option = ["volume", "marketPercent", "lastSalePrice", "lastSaleSize"]
    var key = option[0]

var select = d3.select('.dropdown')
      .append('select')
          .style('font-size', '20px')

.attr('class','select')
      .on('change',onchange);
    var options = select
      .selectAll('option')
      .data(option).enter()
      .append('option')
      .text(function (d) { return d; }); 
      function onchange() {
        updateviz(d3.select('select').property('value'))
      };

function updateviz(key) {
          data.forEach(function(d){d.size=d[key]})

d3.select("svg").remove();

var color = d3.scale.category10();
    var format = d3.format(",")

var dataset = {
    "collection": {
        "blocks": data,
        "size": data.length
    }
};

var pack = d3.layout.pack()
    .sort(null)
    .size([diameter - 2, diameter - 2])
    .children(function(d){return d.blocks;})
    .value(function(d){return Math.max(0.01, d[key]);});

// Create SVG element
var svg = d3.select("#chart")
    .append("svg")
    .attr("width",diameter)
    .attr("height",diameter);

// Create nodes
var node = svg.selectAll(".node")
    .data(pack.nodes({blocks:data}))
    .enter()
    .append("g")
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform",function(d){return "translate("+d.x+","+d.y+")";})
;

tip = d3.tip()
      .attr('class', 'd3-tip')
      .html(function(d) { return d.name + ": " + format(d[key]) }); 
      
    svg.call(tip)

// Create circles
node.append("circle")
  .attr('class', 'circle')
  .attr("r",function(d){return d.r;})
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);

node.append("text")
      .text(function(d) { return d.name; })
       .attr("text-anchor", "middle")
      .style("font-size", function(d) { size = Math.log(d.r)*3  ; if(size >1) { return size+"px"};return "0px"})
       .attr("dy", ".01em");

d3.select("#sortBtn").on("click",sortBubbles);

}
  updateviz(key)

}
  //]]>

</script>
  
  <style>
    circle {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 1;
}
  </style>
</head>

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js