IEX Market - Orbits

IEX API

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Orbit Layout Modes</title>
  <meta charset="utf-8" />
</head>
<style>

#viz, svg {
    width: 600px;
    height: 600px;
    display: block;
    margin:auto;
  }

text {
    pointer-events: none;
  }

#buttons {
    position: absolute;
    top:0;
    left:0;
  }

circle.ring {
    fill: none;
    stroke: white;
    stroke-width: 1px;
    stroke-opacity: .15;

}
      .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 bgcolor=black>
<div class=dropdown></div>
<div id="buttons"></div>
<div id="viz"></div>

function visualise(data){
      var option = ["marketPercent", "volume", "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() {
        drawOrbit(data,d3.select('select').property('value'))
      };
  
  
  
  
  d3.select("#buttons").append("button").html("solar").on("click", function() {newMode("solar")})
  d3.select("#buttons").append("button").html("flat").on("click", function() {newMode("flat")})
  d3.select("#buttons").append("button").html("atomic").on("click", function() {newMode("atomic")})
  d3.select("#buttons").append("button").html("custom").on("click", function() {newMode([4,4])})

orbit = d3.layout.orbit().size([450,450])
  .children(function(d) {return d.values})
  .revolution(function(d) {return 1 / d.orbital_period})
  .orbitSize(function(d) {return orbitScale(d.depth)})
  .speed(1)
  .mode("atomic")
  .nodes(data);

orbit.on("tick", function() {
    d3.selectAll("g.node")
      .attr("transform", function(d) {return "translate(" +d.x +"," + d.y+")"});

d3.selectAll("circle.ring")
    .attr("cx", function(d) {return d.x})
    .attr("cy", function(d) {return d.y});
  });

orbit.start();
  
  function newMode(_mode) {
    orbit.mode(_mode)
    .nodes(data);

d3.select("g.viz")
  .selectAll("circle.ring")
  .data(orbit.orbitalRings())
    .exit()
    .transition()
    .duration(500)
    .style("stroke-opacity", 0)
    .style("stroke-width", 3)
    .remove();

d3.select("g.viz")
    .selectAll("circle.ring")
    .data(orbit.orbitalRings())
    .enter()
    .insert("circle", "g")
    .attr("class", "ring");
    
    d3.selectAll("circle.ring")
    .attr("r", function(d) {return d.r})
    .attr("cx", function(d) {return d.x})
    .attr("cy", function(d) {return d.y});

}

function nodeOver(d) {
    orbit.stop();

if (d.depth == 2) {
      d3.select(this).append("text").text(d.label || d.name).style("text-anchor", "middle")
      .attr("y", 15)
      .attr("class", "moon");
    }
    d3.select(this).select("circle").style("stroke", "black").style("stroke-width", 3);
 
   tip.show

}

function nodeOut() {
    orbit.start();
      d3.selectAll("text.moon").remove();
    d3.selectAll("g.node > circle").style("stroke", "none").style("stroke-width", 0); 
           var format = d3.format(",")

tip.hide
  }

drawOrbit(data,key);

function drawOrbit(_data,key) {
    d3.select("body").selectAll("svg").remove(); 
    //d3.selectAll("g.node").remove();
    //d3.selectAll("text.moon").remove();

var svg =  d3.select("#viz").append("svg");
  
      var circs = []
    _data.forEach(function(d){ circs.push(d[key])})
    var rscale = d3.scale.linear()
           .domain([0,d3.sum(circs)])
           .range([0,100])
    
    _data.forEach(function(d,i) {
     d.name = d.venueName;
     d.radius = rscale(d[key])*2000;
     //d.orbital_period = rscale(d[key])/2;
     d.orbital_period = i+1*2;

});
  
  
  orbitScale = d3.scale.linear().domain([1, 3]).range([3.8, 1.5]).clamp(true);
  radiusScale = d3.scale.linear().domain([210.64,2500,10000,71492.68]).range([2,4,8,16]);

color = d3.scale.category20c();

var format = d3.format(",")

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

svg
.append("g")
.attr("class", "viz")
.attr("transform", "translate(50,50)")
  .selectAll("g.node").data(orbit.nodes())
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", function(d) {return "translate(" +d.x +"," + d.y+")"})
  .on("mouseover", tip.show)
  .on("mouseout", tip.hide)
        d3.selectAll(".node").call(tip)

d3.selectAll("g.node")
  .append("circle")
  .attr("r", function(d) {return d.radius ? radiusScale(d.radius) : 0})
              .attr("opacity", .67)

.style("fill", function(d,i){return color(i)});

d3.selectAll("g.node").filter(function(d) {return d.depth == 1})
  .append("text")
  .text(function(d) {return d.depth == 0 ? "Sun" : d.name})
  .attr("y", 20)
    .style("fill", "white")

.style("text-anchor", "middle")

d3.select("g.viz")
  .selectAll("circle.ring")
  .data(orbit.orbitalRings())
  .enter()
  .insert("circle", "g")
  .attr("class", "ring")
  .attr("r", function(d) {return d.r})
  .attr("cx", function(d) {return d.x})
  .attr("cy", function(d) {return d.y})

}
}
</script>
<footer>
<script src="d3.layout.orbit.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>

Modified http://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.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