Adapting a streamgraph to a stock portfolio visualization using d3 js

Question

This project is based on Bostock's streamgraph.

I am looking to make it a stock portfolio visualizer. I can get my javascript to run through all of my stock tickers (stored in the symbols.csv) and print the current prices for each. I'm not sure how to append these in place of Bostock's random data generator in the streamgraph. TBH, I'm not married to the streamgraph per se, I just need a little push in the direction of how to tie these to a visualization. I realize I will need the historical data rather than the now data as well.

The commented out code is just another way to get data, rather than the yahoo api.

var i=[];
var splat;

var symbols = d3.csv("symbols.csv", function(data){
    var arrayLength = data.length;

for (var i = 0; i< arrayLength; i++){
  var symbol = data[i].ticker;
  var yahooURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22"+symbol+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
  var herokuappURL = "https://nasdaqviz.herokuapp.com/api/v1.1/markets/data/nsdaq/realtime/"+symbol;
  splat = data[i];

// $.getJSON(herokuappURL, function(jsonData){
//     var quote2 = jsonData['Price'];
//     document.write("<p>"+splat+" : "+quote2+"</p>");
// })


$.getJSON(yahooURL, function (jsonData){
    var quote = jsonData.query.results.quote;

    document.write("<p>"+quote.Symbol+" : "+quote.LastTradePriceOnly+"</p>");
  }).error(function(xhr, errorType, exception) {
    var errorMessage = exception || xhr.statusText;

    console.log("Error "+errorMessage); })
 };

});

Any help appreciated! I'm stuck. Here's the github if you're interested.

score 0 · Answer 1 · answered Jul 26 '17 at 23:36

The stack format prefers the 'wide' data format, as explained in the D3 API: https://github.com/d3/d3-shape/blob/master/README.md#stack

For your code, you could either create the dataset in this format (ie a column for date, then a column per symbol, eg date, BLK, BARAX, etc). Or create a long dataset (date, symbol, price) as you loop through each symbol and then convert to wide (eg http://jonathansoma.com/tutorials/d3/wide-vs-long-data/), but this will probably be slower.

By the way, if you have a layer for 190 symbols, the graph may be very condensed!

Adapting a streamgraph to a stock portfolio visualization using d3 js

1 Answers1