IEX Market - Classic Charts

IEX API

forked from iexviz's block: IEX Market - Classic Charts

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="A classic comparison" />
  <title>A classic comparison</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://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" language="JavaScript"></script>
</head>
<body align=center>
  <div class=dropdown></div><br>
</body>
<script>
d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");

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 RADIUS, arc_generator, bars, bl, br, color, data, height, max, nodes, pack, pack_nodes, pack_tree, pie, side, svg, tree, treemap, ul, ur, width, x_scale, y_scale;

data = d3.range(data1.length).map(function(d) {
  return {
      category: "cat_" + data1[d].name,
      value: data1[d][key]
    };
  });

max = d3.max(data, function(d) {
    return d.value;
  });

width = 960;
  height = 450;

side = Math.min(width, height);

RADIUS = side / 4 - 20;

svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append('g').attr({
    transform: "translate(" + (width / 2) + ", " + (height / 2) + ")"
  });

ul = svg.append("g").attr({
    transform: "translate(" + (-side / 4) + ", " + (-side / 4) + ")"
  });

ur = svg.append("g").attr({
    transform: "translate(" + (+side / 4) + ", " + (-side / 4) + ")"
  });

bl = svg.append("g").attr({
    transform: "translate(" + (-side / 4) + ", " + (+side / 4) + ")"
  });

br = svg.append("g").attr({
    transform: "translate(" + (+side / 4) + ", " + (+side / 4) + ") rotate(180)"
  });

color = d3.scale.ordinal().domain(data.map(function(d) {
    return d.category;
  })).range([1,20]);

color = d3.scale.ordinal().domain(data.map(function(d) {
    return d.category;
  })).range(["#1b9e77", "#a04a2b", "#9467bd", "#4a4685", "#e7298a", "#66a61e", 
             "#02aee3", "#a6761d", "#666666","#d96d02", "#026bd4","#c803d2",
             "#c20346"]);

y_scale = d3.scale.linear().domain([0, max]).range([0, 2 * RADIUS]);

x_scale = d3.scale.ordinal().domain(data.map(function(d) {
    return d.category;
  })).rangeRoundBands([-RADIUS, RADIUS], .05);

bars = ul.selectAll('.bar').data(data);

bars.enter().append('rect').attr({
    "class": 'bar',
    x: function(d) {
      return x_scale(d.category);
    },
    y: function(d) {
      return RADIUS - y_scale(d.value);
    },
    width: x_scale.rangeBand(),
    height: function(d) {
      return y_scale(d.value);
    },
    fill: function(d) {
      return color(d.category);
    }
  });

pie = d3.layout.pie().sort(null).value(function(d) {
    return d.value;
  });

arc_generator = d3.svg.arc().innerRadius(0).outerRadius(RADIUS);

ur.selectAll('.arc').data(pie(data)).enter().append('path').attr({
    "class": 'arc',
    d: arc_generator,
    fill: function(d) {
      return color(d.data.category);
    }
  });

treemap = d3.layout.treemap().size([2 * RADIUS, 2 * RADIUS]).value(function(node) {
    return node.value;
  }).sort(function(a, b) {
    return d3.descending(a.category, b.category);
  });

tree = {
    children: data
  };

nodes = treemap.nodes(tree);

bl.selectAll('.node').data(nodes.filter(function(node) {
    return node.depth === 1;
  })).enter().append('rect').attr({
    "class": 'node',
    x: function(node) {
      return node.x - RADIUS;
    },
    y: function(node) {
      return node.y - RADIUS;
    },
    width: function(node) {
      return node.dx;
    },
    height: function(node) {
      return node.dy;
    },
    fill: function(d) {
      return color(d.category);
    }
  });

pack = d3.layout.pack().size([2.4 * RADIUS, 2.4 * RADIUS]).value(function(node) {
    return node.value;
  }).sort(function(a, b) {
    return d3.descending(a.category, b.category);
  }).padding(2);

pack_tree = {
    children: data
  };

pack_nodes = pack.nodes(pack_tree);

br.selectAll('.bubble').data(nodes.filter(function(node) {
    return node.depth === 1;
  })).enter().append('circle').attr({
    "class": 'bubble',
    cx: function(node) {
      return node.x - 1.2 * RADIUS;
    },
    cy: function(node) {
      return node.y - 1.2 * RADIUS;
    },
    r: function(node) {
      return node.r;
    },
    fill: function(d) {
      return color(d.category);
    }
  });
     
   
    tip = d3.tip()
      .attr('class', 'd3-tip')
      .html(function(d) { return d.name + ": " + format(d[key]) }); 
      
    svg.call(tip)
    
    svg.selectAll('circle')
      .data(data1)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);
      
    svg.selectAll('rect')
      .data(data1)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);
      
    svg.selectAll('path')
      .data(data1)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);
      
    svg.selectAll('.node')
      .data(data1)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);
    }

updateviz(key)
}
</script>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js