IEX Market - Liquid Fill Gauge

IEX API

forked from iexviz's block: IEX Market - Liquid Fill Gauge

<!DOCTYPE html>
<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]);

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]);

});

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

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