IEX Market - Force-Directed

IEX API

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body { font-family: sans-serif; }
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="jsonp.js"></script>

d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");

function visualise(data){
        data.forEach(function(d) {
        d.name = d.venueName;
        d.marketPercent = (d.marketPercent *100).toFixed(1);
        //d.value = rscale(d);
        console.log(d.value)
        //console.log("Spent $" + d.amount + " on " + d.date);
      });
      
    var option = ["volume", "marketPercent", "tapeA", "tapeB", "tapeC"]
    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) {
    d3.select("svg").remove();

var format = d3.time.format("%Y-%m-%d"),
        margin = {top: 20, right: 20, bottom: 30, left: 40},
        width = 960 - margin.left - margin.right,
        height = 450 - margin.top - margin.bottom;

var force = d3.layout.force()
          .gravity(.003)
          .size([width, height]);
      
    var format = d3.format(",")
    var circs = []
    data.forEach(function(d){ circs.push(d[key])})
  color = d3.scale.ordinal().domain(data.map(function(d) {
    return d.name;
  })).range(["#1b9e77", "#a04a2b", "#9467bd", "#4a4685", "#e7298a", "#66a61e", 
             "#02aee3", "#a6761d", "#666666","#d96d02", "#026bd4","#c803d2",
             "#c20346"]); 
      
      var rscale = d3.scale.linear()
           .domain([0,d3.sum(circs)])
           .range([1,400])

var svg = d3.select("body")
                .append("svg")
                .style('background','black')
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom)
                .append("g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

force
        .nodes(data)
        .start();
      
      var node = svg.selectAll("g.node")
          .data(data)
          .enter()
          .append("g")
            .attr("class", "node")
            .call(force.drag);
      
      node.append("circle")
            .attr("r", function(d) { return rscale(d[key]) })
            .attr("opacity", .67)
            .attr("fill", function(d,i){return color(i)});
      
  
  
      node.append("text")
            .text(function(d){ return d.name.toString(); })
             .attr("text-anchor", "middle")

.attr('fill', '#fff')
            .attr('font-size', 15)
            .attr('dy', -5);
            
      node.append("text")
            .text(function(d){return  format(d[key]); })
             .attr("text-anchor", "middle")

.attr('fill', '#fff')
            .attr('font-size', 15)
            .attr('dy', 15);
                
  
      force.on("tick", function() {
        node.attr('transform',  function(d) {
          return 'translate('+ Math.max(20, Math.min(width-20, d.x)) + ',' + Math.max(20, Math.min(height-20, d.y)) + ')';
        });
      });

}
    updateviz(key)

}

</script>
</body>

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

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