This is a non-graphical exmaple to demonstrate the general update pattern in d3.
Similar to mBostock's General Update Pattern, I
In console we can chage the array tickers and the comma separated string fields to query from Yahoo Finance API.
The table only updates during US trading hours.
| $(function () { | |
| var table = d3.select("table") | |
| table.append("thead") | |
| table.append("tbody"); | |
| table.append("tfoot"); | |
| function update(res) { | |
| var yahooResult = res; | |
| var keys = Object.keys(yahooResult.query.results.quote[0]); | |
| var header = table.select("thead") | |
| .selectAll("th") | |
| .data(keys); | |
| header.exit().remove(); | |
| header.enter().append("th"); | |
| header.text(function (d, i) { | |
| return d; | |
| }); | |
| var result = yahooResult.query.results.quote; | |
| var rows = table.select("tbody") | |
| .selectAll("tr") | |
| .data(result); | |
| rows.exit().remove(); | |
| rows.enter().append("tr"); | |
| var columns = rows.selectAll("td") | |
| .data(function (d, i) { | |
| var ret = $.map(d, function (v) { | |
| return v; | |
| }); | |
| for (var j = 0; j < ret.length; j++) { | |
| if (this.length && this[j] && this[j].innerHTML != ret[j]) { | |
| d3.select(this[j]) | |
| .attr("class", "update"); | |
| } | |
| } | |
| return ret; | |
| }); | |
| //console.log(JSON.stringify(columns.enter())); | |
| columns.exit().remove(); | |
| columns.enter().append("td"); | |
| var colorPalette = ["AntiqueWhite", "MistyRose", "Beige", "Azure", "NavajoWhite"]; | |
| columns | |
| .text(function (d, i) { | |
| return d; | |
| }) | |
| .style("background-color", | |
| function (d) { | |
| if (this.classList.contains("update")) { | |
| return colorPalette[Math.floor(Math.random() * colorPalette.length)]; | |
| } | |
| }) | |
| .attr("class", ""); | |
| } | |
| tickers = ["YHOO", "AAPL", "GOOG", "MSFT", "VMW", "YELP", "FB", "LNKD", "TWTR", "TRLA"]; | |
| fields = ["symbol", "AverageDailyVolume", "Change", "MarketCapitalization", "LastTradePriceOnly", "DaysRange", "Volume", "StockExchange"]; | |
| (function refresh() { | |
| tickersWithQuotes = tickers.map(function (d) { | |
| return "'" + d + "'"; | |
| }); | |
| var preUrl = "http://query.yahooapis.com/v1/public/yql?q="; | |
| var query = encodeURIComponent('select ' + fields.join(",") + ' from yahoo.finance.quote where symbol in (' + tickersWithQuotes.join(",") + ')'); | |
| var postUrl = "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback="; | |
| var yahooFinanceQueryUrl = preUrl + query + postUrl | |
| $.ajax({ | |
| url: yahooFinanceQueryUrl | |
| }) | |
| .done(function (res) { | |
| update(res); | |
| setTimeout(refresh, 1000); | |
| }) | |
| .fail(function () { | |
| console.log("Error calling Yahoo API"); | |
| }); | |
| })(); | |
| }); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>D3 General update pattern using tables</title> | |
| <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"/> | |
| </head> | |
| <body> | |
| <table class="table"/> | |
| <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script> | |
| <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" charset="utf-8"></script> | |
| <script src="d3Stocks.js"></script> | |
| </body> | |
| </html> |
