IEX API
xxxxxxxxxx
<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>
<script src="jsonp.js"></script>
<script type="text/javascript">//<![CDATA[
d3.jsonp("https://api.iextrading.com/1.0/tops?callback=visualise");
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");
var sortOrder = 2;
var sortBubbles = function() {
sortOrder += 1;
sortItems = function(a,b) {
var str,result;
switch(sortOrder%3){
case 0:
str = 'ascending';
result = a.size - b.size;
break;
case 1:
str = 'descending';
result = b.size - a.size;
break;
default:
str = 'default';
result = null;
}
document.getElementById("sortLbl").innerHTML = str;
return result;
};
pack
.sort(sortItems)
.nodes({blocks:data});
node
.attr("transform",function(d){
return "translate("+d.x+","+d.y+")";
})
.selectAll("circle")
.attr("r",function(d){return d.r;});
};
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