iexviz/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    IEX API

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body { font-family: sans-serif; }
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="jsonp.js"></script>

<body align=center><div class=dropdown></div><br>

  <script>


d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");

function visualise(data){
        data.forEach(function(d) {
        d.name = d.venueName;
        d.marketPercent = (d.marketPercent *100).toFixed(1);
        //d.value = rscale(d);
        console.log(d.value)
        //console.log("Spent $" + d.amount + " on " + d.date);
      });

    var option = ["volume", "marketPercent", "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() {
        updateviz(d3.select('select').property('value'))
      };

    function updateviz(key) {
    d3.select("svg").remove();

    var format = d3.time.format("%Y-%m-%d"),
        margin = {top: 20, right: 20, bottom: 30, left: 40},
        width = 960 - margin.left - margin.right,
        height = 450 - margin.top - margin.bottom;

    var force = d3.layout.force()
          .gravity(.003)
          .size([width, height]);

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

      var rscale = d3.scale.linear()
           .domain([0,d3.sum(circs)])
           .range([1,400])

    var svg = d3.select("body")
                .append("svg")
                .style('background','black')
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom)
                .append("g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


      force
        .nodes(data)
        .start();

      var node = svg.selectAll("g.node")
          .data(data)
          .enter()
          .append("g")
            .attr("class", "node")
            .call(force.drag);

      node.append("circle")
            .attr("r", function(d) { return rscale(d[key]) })
            .attr("opacity", .67)
            .attr("fill", function(d,i){return color(i)});


      node.append("text")
            .text(function(d){ return d.name.toString(); })
             .attr("text-anchor", "middle")

            .attr('fill', '#fff')
            .attr('font-size', 15)
            .attr('dy', -5);

      node.append("text")
            .text(function(d){return  format(d[key]); })
             .attr("text-anchor", "middle")

            .attr('fill', '#fff')
            .attr('font-size', 15)
            .attr('dy', 15);


      force.on("tick", function() {
        node.attr('transform',  function(d) {
          return 'translate('+ Math.max(20, Math.min(width-20, d.x)) + ',' + Math.max(20, Math.min(height-20, d.y)) + ')';
        });
      });

    }
    updateviz(key)

}

  </script>
</body>

## jsonp.js
d3.jsonp = function (url, callback) {
  function rand() {
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
      c = '', i = -1;
    while (++i < 15) c += chars.charAt(Math.floor(Math.random() * 52));
    return c;
  }

  function create(url) {
    var e = url.match(/callback=d3.jsonp.(\w+)/),
      c = e ? e[1] : rand();
    d3.jsonp[c] = function(data) {
      callback(data);
      delete d3.jsonp[c];
      script.remove();
    };
    return 'd3.jsonp.' + c;
  }

  var cb = create(url),
    script = d3.select('head')
    .append('script')
    .attr('type', 'text/javascript')
    .attr('src', url.replace(/(\{|%7B)callback(\{|%7D)/, cb));
};

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body { font-family: sans-serif; }
	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="jsonp.js"></script>

	<body align=center><div class=dropdown></div><br>

	<script>





	d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise");

	function visualise(data){
	data.forEach(function(d) {
	d.name = d.venueName;
	d.marketPercent = (d.marketPercent *100).toFixed(1);
	//d.value = rscale(d);
	console.log(d.value)
	//console.log("Spent $" + d.amount + " on " + d.date);
	});

	var option = ["volume", "marketPercent", "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() {
	updateviz(d3.select('select').property('value'))
	};

	function updateviz(key) {
	d3.select("svg").remove();

	var format = d3.time.format("%Y-%m-%d"),
	margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 450 - margin.top - margin.bottom;

	var force = d3.layout.force()
	.gravity(.003)
	.size([width, height]);

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

	var rscale = d3.scale.linear()
	.domain([0,d3.sum(circs)])
	.range([1,400])

	var svg = d3.select("body")
	.append("svg")
	.style('background','black')
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");




	force
	.nodes(data)
	.start();

	var node = svg.selectAll("g.node")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "node")
	.call(force.drag);

	node.append("circle")
	.attr("r", function(d) { return rscale(d[key]) })
	.attr("opacity", .67)
	.attr("fill", function(d,i){return color(i)});



	node.append("text")
	.text(function(d){ return d.name.toString(); })
	.attr("text-anchor", "middle")

	.attr('fill', '#fff')
	.attr('font-size', 15)
	.attr('dy', -5);

	node.append("text")
	.text(function(d){return format(d[key]); })
	.attr("text-anchor", "middle")

	.attr('fill', '#fff')
	.attr('font-size', 15)
	.attr('dy', 15);


	force.on("tick", function() {
	node.attr('transform', function(d) {
	return 'translate('+ Math.max(20, Math.min(width-20, d.x)) + ',' + Math.max(20, Math.min(height-20, d.y)) + ')';
	});
	});

	}
	updateviz(key)

	}

	</script>
	</body>
	d3.jsonp = function (url, callback) {
	function rand() {
	var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
	c = '', i = -1;
	while (++i < 15) c += chars.charAt(Math.floor(Math.random() * 52));
	return c;
	}

	function create(url) {
	var e = url.match(/callback=d3.jsonp.(\w+)/),
	c = e ? e[1] : rand();
	d3.jsonp[c] = function(data) {
	callback(data);
	delete d3.jsonp[c];
	script.remove();
	};
	return 'd3.jsonp.' + c;
	}

	var cb = create(url),
	script = d3.select('head')
	.append('script')
	.attr('type', 'text/javascript')
	.attr('src', url.replace(/(\{\|%7B)callback(\{\|%7D)/, cb));
	};