├── README.md
├── graph.js
├── server.R
├── ui.R
└── www
    ├── testperf.csv
    └── testperf_extra.csv


/README.md:
--------------------------------------------------------------------------------
 1 | shiny-d3-plot
 2 | =============
 3 | 
 4 | experiments with d3 and r integration with shiny
 5 | 
 6 | Using the fine example offered by https://github.com/trestletech and http://www.trestletechnology.net/2012/12/reconstruct-gene-networks/, build a d3 bar plot of annual performance data for the S&P 500 and the Barclays US Aggregate Bond Index.  Start with a local .csv file similar to the original example but eventually add on the ability to use live data from the web or from Axys.
 7 | 
 8 | I do not have the ability to host on http://glimmer.rstudio.com for a web example.  Until I get that, you can download the files, and then in R:
 9 | 
10 |   require(shiny)
11 | 
12 |   runApp("C:\\path-to-download-location\\shiny-d3-plot")
13 | 
14 | Unfortunately, my javascript and d3 abilities are weak, so hopefully those knowledgeable in those areas can build something way better than this simple example.


--------------------------------------------------------------------------------
/graph.js:
--------------------------------------------------------------------------------
  1 | <style>
  2 | 
  3 | 
  4 | </style>
  5 | 
  6 | <script src="http://d3js.org/d3.v2.js"></script>
  7 | <script type="text/javascript">var networkOutputBinding = new Shiny.OutputBinding();
  8 |   $.extend(networkOutputBinding, {
  9 |     find: function(scope) {
 10 |       return $(scope).find('.shiny-network-output');
 11 |     },
 12 |     renderValue: function(el, data) {
 13 |         var margin = {top: 50, right: 20, bottom: 50, left: 20},
 14 |             width =  800, // - margin.right - margin.left,
 15 |             height = 600; // - margin.top - margin.bottom;      
 16 | 
 17 |         //remove the old graph
 18 |           var svg = d3.select(el).select("svg");
 19 | 
 20 |           svg.remove();
 21 |           
 22 |           $(el).html("");
 23 |           
 24 |           //append a new one
 25 |           svg = d3.select(el).append("svg")
 26 |                 .attr("width", width + margin.right + margin.left)
 27 |                 .attr("height", height + margin.top + margin.bottom);
 28 | 
 29 |         
 30 |         var perfdata = new Array();
 31 | 
 32 |         var parse = d3.time.format("%m/%d/%Y").parse, format = d3.time.format("%Y")      
 33 |         
 34 |         for (var inc=0;inc<data.Date.length;inc++)  { 
 35 |                 //here is where my javascript ineptness shows best
 36 |                 //i need to figure out the proper way to loop through each of the symbols (columns from the r data.frame)
 37 |                 //within the object data rather than manually coding this
 38 |                 perfdata[inc]  = { date: parse(data.Date[inc]) , perf : parseFloat(data.SP500[inc]), symbol : "SP500" };
 39 |                 perfdata[inc + data.Date.length] = { date: parse(data.Date[inc]) , perf : parseFloat(data.BarAgg[inc]), symbol : "BarAgg" };
 40 |             }
 41 | 
 42 |             // Nest stock values by symbol.
 43 |             symbols = d3.nest()
 44 |               .key(function(d) { return d.symbol; })
 45 |               .entries(perfdata);        
 46 |     
 47 |             var x = d3.time.scale()
 48 |                 .range([0, width - 60]);
 49 |             
 50 |             var y = d3.scale.linear()
 51 |                 .range([height - 20, 0]);
 52 |             
 53 |             var duration = 1500,
 54 |                 delay = 500;
 55 |             
 56 |             var color = d3.scale.category10();
 57 |             
 58 |            //svg
 59 |             //    .attr("id","svgchart")
 60 |             //    .attr("width", width + margin.right + margin.left)
 61 |             //    .attr("height", height + margin.top + margin.bottom)
 62 |             //    .append("g")
 63 |             //        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 64 |         
 65 |                 
 66 |                 // do the minimum and maximum dates
 67 |                 x.domain([
 68 |                     parse(data.Date[0]),
 69 |                     parse(data.Date[data.Date.length-1])
 70 |                 ]);
 71 |                 
 72 |                 var g = svg.selectAll("g")
 73 |                     .data(symbols)
 74 |                     .enter().append("g")
 75 |                         .attr("class", "symbol");  
 76 |                                 
 77 |             groupedBar();
 78 |             
 79 |             function groupedBar() {
 80 |                   x = d3.scale.ordinal()
 81 |                       .domain(symbols[0].values.map(function(d) { return d.date; }))
 82 |                       .rangeBands([0, width - 60], .1);
 83 |                 
 84 |                   var x1 = d3.scale.ordinal()
 85 |                       .domain(symbols.map(function(d) { return d.key; }))
 86 |                       .rangeBands([0, x.rangeBand()]);
 87 |     
 88 |                 var y0 = Math.max(Math.abs(d3.min(symbols.map(function(d) { return d3.min(d.values.map(function(d) { return d.perf; })); }))), d3.max(symbols.map(function(d) { return d3.max(d.values.map(function(d) { return d.perf; })); })));                
 89 |                 y
 90 |                     .domain([-y0, y0])
 91 |                     //.domain([d3.min(symbols.map(function(d) { return d3.min(d.values.map(function(d) { return d.perf; })); })), d3.max(symbols.map(function(d) { return d3.max(d.values.map(function(d) { return d.perf; })); }))])
 92 |                     .range([height, 0])
 93 |                     .nice();
 94 |                 
 95 |                 var yAxis = d3.svg.axis().scale(y).orient("left");                            
 96 | 
 97 |                 svg.selectAll(".labels")
 98 |                     .data(symbols[0].values.map(function(d) { return d.date; }))
 99 |                     .enter().append("text")
100 |                         .attr("class", "labels")
101 |                         .attr("text-anchor", "middle")
102 |                         .attr("x", function(d,i) { return x(i) + x.rangeBand() / 2 ; })
103 |                         .attr("y", height / 2 + 15)
104 |                         .text(function(d) {return format(d) })
105 |                         .style("fill-opacity", 1);
106 | 
107 |                 
108 |                   var g = svg.selectAll(".symbol");
109 |                 
110 |                   var t = g.transition()
111 |                       .duration(duration);
112 |                       
113 |                     //got working with lots of help but this section particularly dedicated to http://stackoverflow.com/questions/10127402/bar-chart-with-negative-values
114 |                   g.each(function(p, j) {
115 |                     d3.select(this).selectAll("rect")
116 |                         .data(function(d) { return d.values; })
117 |                       .enter().append("rect")
118 |                         .attr("x", function(d) { return x(d.date) + x1(p.key); })
119 |                         .attr("y", function(d, i) { return y(Math.max(0, d.perf)); })                        
120 |                         //.attr("y", function(d) { return y(d.perf); })
121 |                         .attr("width", x1.rangeBand())
122 |                         .attr("height", function(d, i) { return Math.abs(y(d.perf) - y(0)); })                        
123 |                         //.attr("height", function(d) { return height - y(d.perf); })
124 |                         .style("fill", color(p.key))
125 |                         .style("fill-opacity", 1e-6)                    
126 |                         //very grateful to http://blog.nextgenetics.net/demo/entry0032/ for help here on mouseover highlighting
127 |                         //another nice example http://bl.ocks.org/2164562
128 |                         .on('mouseover', function(d, i) {
129 |                              d3.select(this).style('fill','gray');
130 |                              statusText
131 |                                 .text(p.key + " " + d.perf)
132 |                                 .attr('fill',color(p.key))
133 |                                 .attr("text-anchor", d.perf < 0 ? "begin" : "begin")
134 |                                 .attr("x", x(d.date) + x1(p.key) + x.rangeBand() / 2 )
135 |                                 .attr("y", y(d.perf))
136 |                                 .attr("transform", d.perf < 0 ? "rotate(90 " + (x(d.date) + x1(p.key) + x.rangeBand() / 4 ) + "," +   y(d.perf) + ")" : "rotate(-90 " + (x(d.date) + x1(p.key) + x.rangeBand() / 4 ) + "," +   y(d.perf) + ")"); 
137 |                           })
138 |                           .on('mouseout', function(d,i) {
139 |                              statusText
140 |                                 .text('');
141 |                              d3.select(this).style('fill',color(p.key));
142 |                           })
143 |                           .transition()
144 |                                 .duration(duration)
145 |                                 .style("fill-opacity", 1);
146 | 
147 |                     
148 |                   var statusText = svg.append('svg:text');
149 |                       
150 |                   });            
151 |                         
152 |                 
153 |                     svg.append("g")
154 |                         .attr("class", "y axis")
155 |                         .call(yAxis);
156 |                     //    .attr("y1", 0)
157 |                     //    .attr("y2", height);
158 |                 
159 |             };
160 |     }
161 |   });
162 |   Shiny.outputBindings.register(networkOutputBinding, 'timelyportfolio.networkbinding');
163 |   
164 |   </script>
165 | 


--------------------------------------------------------------------------------
/server.R:
--------------------------------------------------------------------------------
 1 | #thanks to https://www.trestletechnology.net/2012/12/reconstruct-gene-networks/
 2 | #for doing what I have been wondering how to do and had no clue how to accomplish
 3 | #hopefully whoever reads this will attribute all the good code to him
 4 | #and all the bad code/changes to me
 5 | 
 6 | 
 7 | #enter any requires/library here
 8 | #once I get more advanced, I will very likely add
 9 | #require(quantmod)
10 | #require(PerformanceAnalytics)
11 | 
12 | shinyServer(function(input, output) {
13 | 
14 |   #just as in the reference example, I'll start by loading a csv file
15 |   #the hope in the future is to add Axys data or retrieve through getSymbols lots of data
16 |   data <- reactive(function(){
17 |         
18 |     if (input$dataSource == FALSE){      
19 |       path <- input$url
20 |       
21 |       #translate relative paths to server-friendly paths
22 |       if (substr(input$url, 0, 2) == "./"){
23 |         path <- paste("./www/", substring(input$url, 3), sep="")
24 |       }      
25 |     } else{      
26 |       df <- input$file
27 |       path <- df$datapath  
28 |     }
29 |             
30 |     data <- read.csv(path, row.names=1)
31 |     
32 |     data.df <- cbind(rownames(data), data)
33 |     colnames(data.df)[1] <- "Date"
34 |     
35 |     data.df
36 |   })
37 |   
38 |   output$perfbarplot <- reactive(function() { data() })  #when data changes, update the bar plot
39 | 
40 | })
41 | 


--------------------------------------------------------------------------------
/ui.R:
--------------------------------------------------------------------------------
 1 | #thanks to https://www.trestletechnology.net/2012/12/reconstruct-gene-networks/
 2 | #for doing what I have been wondering how to do and had no clue how to accomplish
 3 | #hopefully whoever reads this will attribute all the good code to him
 4 | #and all the bad code/changes to me
 5 | 
 6 | reactiveBar <- function (outputId) 
 7 | {
 8 |   HTML(paste("<div id=\"", outputId, "\" class=\"shiny-network-output\"><svg /></div>", sep=""))
 9 | }
10 | 
11 | 
12 | 
13 | shinyUI(pageWithSidebar(    
14 |   headerPanel(HTML("Performance Comparison with shiny and d3.js thanks to  <a href = \"https://www.trestletechnology.net/2012/12/reconstruct-gene-networks\">Trestle Technology</a>")),
15 |   
16 |   sidebarPanel(
17 |     #selectInput(inputId = "dataSource",
18 |     #            label = "Source of the performance data:",
19 |     #            choices = c("Local", "Remote"),
20 |     #            selected = "Remote"),
21 |     
22 |     checkboxInput(inputId= "dataSource", label="Use a file stored on my local machine.", value=FALSE),
23 |     
24 |     conditionalPanel(
25 |       condition = "input.dataSource == false",
26 |       textInput(inputId="url", label="File URL:", value="./testperf.csv"),
27 |       helpText(HTML("<div style=\"text-indent: 25px\">Download the sample dataset <a href=\"testperf.csv\">here</a></div>"))
28 |     ),
29 |     
30 |     conditionalPanel(
31 |       condition = "input.dataSource == true",            
32 |       fileInput(inputId = "file", label="Performance to plot:"),
33 |       helpText(HTML("<div style=\"color: red; font-weight: bold\">Warning:</div> Local file uploads in 
34 |                     Shiny are <strong>very</strong> experimental. I have had success using this
35 |                     feature from the latest version of Firefox but, at the time of writing, it
36 |                     does not seem to be working from Chrome or IE.
37 |                     <p>If you have trouble using this feature but want to analyze your own 
38 |                     dataset, you can upload the file to a public URL using a tool like 
39 |                     <a href=\"http://dropbox.com\">Dropbox</a> or one of the many free upload
40 |                     sites."))
41 |     ),
42 |       
43 |     HTML("<hr />"),
44 |     helpText(HTML("All source available on <a href = \"https://github.com/timelyportfolio/d3-shiny-plot\">Github</a>"))
45 |   ),
46 |   
47 |   
48 |   mainPanel(    
49 |     includeHTML("graph.js"),
50 |     reactiveBar(outputId = "perfbarplot")    
51 |   )
52 |   
53 |   
54 | 
55 | ))
56 | 


--------------------------------------------------------------------------------
/www/testperf.csv:
--------------------------------------------------------------------------------
 1 | Date,SP500,BarAgg
 2 | 12/31/2000,-9.10,11.63
 3 | 12/31/2001,-11.89,8.44
 4 | 12/31/2002,-22.10,10.25
 5 | 12/31/2003,28.68,4.10
 6 | 12/31/2004,10.88,4.34
 7 | 12/31/2005,4.91,2.43
 8 | 12/31/2006,15.79,4.33
 9 | 12/31/2007,5.49,6.97
10 | 12/31/2008,-37.00,5.24
11 | 12/31/2009,26.46,5.93
12 | 12/31/2010,15.06,6.54
13 | 12/31/2011,2.11,7.84


--------------------------------------------------------------------------------
/www/testperf_extra.csv:
--------------------------------------------------------------------------------
 1 | Date,Composite,BarAgg,SP500,CPI
 2 | 06/30/2008,-1.34,-0.08,-8.43,1.01
 3 | 07/31/2008,0.86,-0.08,-0.84,0.53
 4 | 08/31/2008,0.9,0.95,1.45,-0.4
 5 | 09/30/2008,-2.31,-1.34,-8.91,-0.14
 6 | 10/31/2008,-0.98,-2.36,-16.8,-1.01
 7 | 11/30/2008,-4.37,3.25,-7.18,-1.92
 8 | 12/31/2008,-0.91,3.73,1.06,-1.03
 9 | 01/31/2009,0.85,-0.88,-8.43,0.44
10 | 02/28/2009,-3.57,-0.38,-10.65,0.5
11 | 03/31/2009,2.51,1.39,8.76,0.24
12 | 04/30/2009,4.38,0.48,9.57,0.25
13 | 05/31/2009,6.28,0.73,5.59,0.29
14 | 06/30/2009,-0.94,0.57,0.2,0.86
15 | 07/31/2009,5.65,1.61,7.56,-0.16
16 | 08/31/2009,1.05,1.04,3.61,0.22
17 | 09/30/2009,1.43,1.05,3.73,0.06
18 | 10/31/2009,-0.77,0.49,-1.86,0.1
19 | 11/30/2009,0.7,1.29,6,0.07
20 | 12/31/2009,0.07,-1.56,1.93,-0.18
21 | 01/31/2010,0.24,1.53,-3.6,0.34
22 | 02/28/2010,0.39,0.37,3.1,0.02
23 | 03/31/2010,0.01,-0.12,6.03,0.41
24 | 04/30/2010,0.06,1.04,1.58,0.17
25 | 05/31/2010,1.04,0.84,-7.99,0.08
26 | 06/30/2010,1.65,1.57,-5.23,-0.1
27 | 07/31/2010,-0.48,1.07,7.01,0.02
28 | 08/31/2010,-2.16,1.29,-4.51,0.14
29 | 09/30/2010,1.45,0.11,8.92,0.06
30 | 10/31/2010,2.74,0.36,3.8,0.12
31 | 11/30/2010,-1.68,-0.57,0.01,0.04
32 | 12/31/2010,4.36,-1.08,6.68,0.17
33 | 01/31/2011,1.37,0.12,2.37,0.48
34 | 02/28/2011,-0.82,0.25,3.43,0.49
35 | 03/31/2011,-0.28,0.06,0.04,0.98
36 | 04/30/2011,-0.13,1.27,2.96,0.64
37 | 05/31/2011,0.25,1.31,-1.13,0.47
38 | 06/30/2011,-0.21,-0.29,-1.67,-0.11
39 | 07/31/2011,0.53,1.59,-2.03,0.09
40 | 08/31/2011,-0.11,1.46,-5.43,0.28
41 | 09/30/2011,-0.36,0.73,-7.03,0.15
42 | 10/31/2011,-3.15,0.11,10.93,-0.21
43 | 11/30/2011,-0.72,-0.09,-0.22,-0.08
44 | 12/31/2011,-1.88,1.1,1.02,-0.25
45 | 01/31/2012,0.49,0.88,4.48,0.44
46 | 02/29/2012,4.69,-0.02,4.32,0.44
47 | 03/31/2012,1.02,-0.55,3.29,0.76
48 | 


--------------------------------------------------------------------------------