IEX API
forked from iexviz's block: IEX Market - Bubble Update
Last active
March 12, 2017 19:55
-
-
Save iexviz/31acf53bf0e7e41e602af4519f45ecb6 to your computer and use it in GitHub Desktop.
IEX Market - Bubble Update
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: "Helvetica", sans-serif; | |
| } | |
| text { | |
| text-anchor: middle; | |
| fill: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="jsonp.js"></script> | |
| <script> | |
| d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise"); | |
| function visualise(data){ | |
| var alphabet = "abcdefghijklmnopqrstuvwxyz".split(""); | |
| var width = window.innerWidth, height = window.innerHeight; | |
| var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).style('background','black'); | |
| svg.append("text").attr('class', "main").text("test") | |
| var pack = d3.pack() | |
| .size([width, height]) | |
| .padding(1.5); | |
| kindex = 0 | |
| redraw(randomizeData()); | |
| d3.interval(function(){ | |
| redraw(randomizeData()); | |
| }, 3606); | |
| function redraw(classes){ | |
| // transition | |
| var t = d3.transition() | |
| .duration(750); | |
| svg.selectAll(".main") | |
| .attr("x", 100) | |
| .attr("y", 40) | |
| .attr("text-anchor", "middle") | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "20px") | |
| .attr("font-weight", "bold") | |
| .attr("fill", "black") | |
| .text(keys[kindex].toUpperCase()); | |
| // hierarchy | |
| var h = d3.hierarchy({children: classes}) | |
| .sum(function(d) { return d.size; }) | |
| //JOIN | |
| var circle = svg.selectAll("path") | |
| .data(pack(h).leaves(), function(d){ return d.data.name; }); | |
| var text = svg.selectAll(".bubble") | |
| .data(pack(h).leaves(), function(d){ return d.data.name; }); | |
| //EXIT | |
| circle.exit() | |
| .style("fill", "#b26745") | |
| .transition(t) | |
| .attr("d", function(d){ return circleToPath(d.x, d.y, 1e-6); }) | |
| .remove(); | |
| text.exit() | |
| .transition(t) | |
| .attr("opacity", 1e-6) | |
| .remove(); | |
| //UPDATE | |
| circle | |
| .transition(t) | |
| .attr("d", function(d){ return circleToPath(d.x, d.y, d.r); }) | |
| .style("fill", function(d,i) { | |
| if(d.data.name === 'IEX') { return 'orange'}; return "#3a403d" | |
| }); | |
| text | |
| .transition(t) | |
| .attr("x", function(d){ return d.x; }) | |
| .attr("y", function(d){ return d.y; }); | |
| //ENTER | |
| circle.enter().append("path") | |
| .attr("d", function(d){ return circleToPath(d.x, d.y, 1e-6); }) | |
| .style("fill", "#fff") | |
| .transition(t) | |
| .attr("d", function(d){ return circleToPath(d.x, d.y, d.r); }) | |
| .style("fill", function(d,i) { | |
| console.log(d.data.name) | |
| if(d.data.name === 'IEX') { return 'orange'}; return "#3a403d" | |
| }); | |
| text.enter().append("text") | |
| .attr("class", 'bubble') | |
| .attr("opacity", 1e-6) | |
| .attr("x", function(d){ return d.x; }) | |
| .attr("y", function(d){ return d.y; }) | |
| .attr("dy", "0em") | |
| .text(function(d){ return d.data.name }) | |
| .transition(t) | |
| .attr("opacity", 1); | |
| /* | |
| text.enter().append("text") | |
| .attr("class", 'bubble') | |
| .attr("dy", "1em") | |
| .text(function(d){ return d.data.size }) | |
| */ | |
| } | |
| function randomizeData(){ | |
| var d0 = data, | |
| d1 = [], | |
| d2 = []; | |
| keys=["volume","marketPercent","tapeA","tapeB","tapeC"] | |
| if (kindex >= keys.length) { kindex = 0} | |
| data.forEach(function(d){ | |
| d2.push({name: d.venueName, size: d[keys[kindex]]}) | |
| }); | |
| kindex +=1 | |
| return d2; | |
| } | |
| function random(min, max) { | |
| return Math.floor(Math.random() * (max - min + 1)) + min; | |
| } | |
| function shuffle(array) { | |
| var m = array.length, t, i; | |
| // While there remain elements to shuffle… | |
| while (m) { | |
| // Pick a remaining element… | |
| i = Math.floor(Math.random() * m--); | |
| // And swap it with the current element. | |
| t = array[m]; | |
| array[m] = array[i]; | |
| array[i] = t; | |
| } | |
| return array; | |
| } | |
| function circleToPath(cx, cy, r){ | |
| return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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)); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment