IEX API
xxxxxxxxxx
<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>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"> </script>
<script src="jsonp.js"></script>
<script>
d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");
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