IEX API
xxxxxxxxxx
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://d3js.org/d3.v3.min.js" language="JavaScript"></script>
<script src="jsonp.js" language="JavaScript"></script>
<script src="liquidFillGauge.js" language="JavaScript"></script>
<style>
.liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
</style>
</head>
<body align=center>
<div class=dropdown></div><br>
<script language="JavaScript">
d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");
var margin = {top: 40, right: 45, bottom: 30, left: 40};
var width = 200;
var height = 100;
var xScale = d3.scale.linear()
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(-height,0,0)
.orient("bottom");
var yScale = d3.scale.linear()
.range([height, 0]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
function visualise(data){
data.forEach(function(d) {
d.name = d.venueName;
d.marketPercent = +(d.marketPercent *100).toFixed(1);
});
var option = ["Gauge1",'Gauge2','Gauge3','Gauge4', 'Gauge5']
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.selectAll("svg").remove();
var format = d3.format(",")
var circs = []
//data.forEach(function(d){ circs.push(d[key])})
var color = d3.scale.category10();
var rscale = d3.scale.linear()
.domain([0,d3.max(circs)])
.range([1,100])
var config1 = liquidFillGaugeDefaultSettings();
config1.circleColor = "#FF7777";
config1.textColor = "#FF4444";
config1.waveTextColor = "#FFAAAA";
config1.waveColor = "#FFDDDD";
config1.circleThickness = 0.2;
config1.textVertPosition = 0.5;
config1.waveAnimateTime = 1000;
var config2 = liquidFillGaugeDefaultSettings();
config2.circleColor = "#D4AB6A";
config2.textColor = "#553300";
config2.waveTextColor = "#805615";
config2.waveColor = "#AA7D39";
config2.circleThickness = 0.1;
config2.circleFillGap = 0.2;
config2.textVertPosition = 0.8;
config2.waveAnimateTime = 2000;
config2.waveHeight = 0.3;
config2.waveCount = 1;
var config3 = liquidFillGaugeDefaultSettings();
config3.textVertPosition = 0.8;
config3.waveAnimateTime = 5000;
config3.waveHeight = 0.15;
config3.waveAnimate = false;
config3.waveOffset = 0.25;
config3.valueCountUp = false;
config3.displayPercent = false;
var config4 = liquidFillGaugeDefaultSettings();
config4.circleThickness = 0.15;
config4.circleColor = "#808015";
config4.textColor = "#555500";
config4.waveTextColor = "#FFFFAA";
config4.waveColor = "#AAAA39";
config4.textVertPosition = 0.8;
config4.waveAnimateTime = 1000;
config4.waveHeight = 0.05;
config4.waveAnimate = true;
config4.waveRise = false;
config4.waveHeightScaling = false;
config4.waveOffset = 0.25;
config4.textSize = 0.75;
config4.waveCount = 3;
var config5 = liquidFillGaugeDefaultSettings();
config5.circleThickness = 0.4;
config5.circleColor = "#6DA398";
config5.textColor = "#0E5144";
config5.waveTextColor = "#6DA398";
config5.waveColor = "#246D5F";
config5.textVertPosition = 0.52;
config5.waveAnimateTime = 5000;
config5.waveHeight = 0;
config5.waveAnimate = true;
config5.waveCount = 2;
config5.waveOffset = 0.25;
config5.textSize = 1.2;
config5.minValue = 30;
config5.maxValue = 150
config5.displayPercent = false;
gdict = {
'Gauge1' : config4,
'Gauge2' : config2,
'Gauge3' : config3,
'Gauge4' : config1,
'Gauge5' : config5
};
data.forEach(function(n,i) {
var svg = d3.select("body")
.append("svg")
.attr("id", "fillgauge"+(i+1))
.attr("width", "100")
.attr("height", "150");
svg.append("text")
.attr("x", 50)
.attr("y", 20)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.attr("font-weight", "bold")
.attr("fill", function(d) {
if(n.name === "IEX") {return "orange"}; return "grey"
})
.text(n.name);
loadLiquidFillGauge("fillgauge"+(i+1), n.marketPercent, gdict[key]);
});
function NewValue(){
if(Math.random() > .5){
return Math.round(Math.random()*100);
} else {
return (Math.random()*100).toFixed(1);
}
}
}
updateviz(key);
}
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js