| license: mit |
Second demo of consuming Heroku DataClips with D3.js.
Data source: https://dataclips.heroku.com/vgyygvzqtezwpmwpcmmjlluamjlk (.json)
forked from dustinlarimer's block: DataClips + D3.js Force-Directed
forked from karthiir's block: X DataClips + D3.js Force-Directed
| <!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> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script> | |
| <script> | |
| var socket = io.connect('https://ws-api.iextrading.com/1.0/tops'); | |
| socket.on('connect', () => { | |
| console.log('connected') | |
| socket.emit('subscribe', 'aapl') | |
| }) | |
| socket.on('message', data => visualise([data])) | |
| socket.on('disconnect', () => console.log('Disconnected.')) | |
| </script> | |
| <script> | |
| //d3.jsonp("https://api.iextrading.com/1.0/market?callback=visualise"); | |
| function visualise(data){ | |
| data.forEach(function(d) { | |
| d.name = d.symbol; | |
| //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('body') | |
| .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 = 1000 - 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])}) | |
| console.log(circs) | |
| var color = d3.scale.category10(); | |
| var rscale = d3.scale.sqrt() | |
| .domain([d3.min(circs),d3.max(circs)]) | |
| .range([1,75]) | |
| 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)); | |
| }; |
| { | |
| "fields":["month","book_purchases"], | |
| "values":[ | |
| ["2011-01-01 00:00:00+00","747.58"], | |
| ["2011-02-01 00:00:00+00","953.48"], | |
| ["2011-03-01 00:00:00+00","767.51"], | |
| ["2011-04-01 00:00:00+00","1221.28"], | |
| ["2011-05-01 00:00:00+00","931.50"], | |
| ["2011-06-01 00:00:00+00","1045.41"], | |
| ["2011-07-01 00:00:00+00","863.42"], | |
| ["2011-08-01 00:00:00+00","629.56"], | |
| ["2011-09-01 00:00:00+00","681.56"], | |
| ["2011-10-01 00:00:00+00","827.51"], | |
| ["2011-11-01 00:00:00+00","701.55"], | |
| ["2011-12-01 00:00:00+00","771.57"] | |
| ] | |
| } |