From da0d432d4de66034824d6bdc4800f32595bc77ce Mon Sep 17 00:00:00 2001
From: almossawi <almossawi@gmail.com>
Date: Mon, 26 May 2014 18:13:39 -0700
Subject: [PATCH] Fix issue #74

---
 css/metrics-graphics-demo.css |   4 +
 css/metrics-graphics.css      |   6 +
 data/confidence_band.json     | 548 ++++++++++++++++++++++++++++++++++
 index.html                    |   3 +-
 js/main.js                    |  23 ++
 js/metrics-graphics.js        |  21 +-
 6 files changed, 602 insertions(+), 3 deletions(-)
 create mode 100644 data/confidence_band.json

diff --git a/css/metrics-graphics-demo.css b/css/metrics-graphics-demo.css
index 22b47230b4..8d3861fc8e 100644
--- a/css/metrics-graphics-demo.css
+++ b/css/metrics-graphics-demo.css
@@ -1,4 +1,8 @@
 #long svg .y-axis line,
 #fake_users3 svg .y-axis line {
     opacity: 0.1;
+}
+
+#confidence_band svg .x-axis line {
+    opacity: 0.1;
 }
\ No newline at end of file
diff --git a/css/metrics-graphics.css b/css/metrics-graphics.css
index c43b7b1192..5d5ac4c146 100644
--- a/css/metrics-graphics.css
+++ b/css/metrics-graphics.css
@@ -173,6 +173,12 @@ path.main-area {
     stroke: none;
 }
 
+path.confidence-band {
+    fill: #ccc;
+    opacity: 0.4;
+    stroke: none;
+}
+
 path.main-line {
     fill: none;
     opacity: 0.8;
diff --git a/data/confidence_band.json b/data/confidence_band.json
new file mode 100644
index 0000000000..0fb6dea5f1
--- /dev/null
+++ b/data/confidence_band.json
@@ -0,0 +1,548 @@
+    [
+        {
+            "value": -1.1618426259,
+            "date": "2012-08-28",
+            "l": -2.6017329022,
+            "u": 0.2949717757
+        },
+        {
+            "value": -0.5828247293,
+            "date": "2012-08-29",
+            "l": -1.3166963635,
+            "u": 0.1324086347
+        },
+        {
+            "value": -0.3790770636,
+            "date": "2012-08-30",
+            "l": -0.8712221305,
+            "u": 0.0956413566
+        },
+        {
+            "value": -0.2792926002,
+            "date": "2012-08-31",
+            "l": -0.6541832008,
+            "u": 0.0717120241
+        },
+        {
+            "value": -0.2461165469,
+            "date": "2012-09-01",
+            "l": -0.5222677907,
+            "u": 0.0594188803
+        },
+        {
+            "value": -0.2017354137,
+            "date": "2012-09-02",
+            "l": -0.4434280535,
+            "u": 0.0419213465
+        },
+        {
+            "value": -0.1457476871,
+            "date": "2012-09-03",
+            "l": -0.3543957712,
+            "u": 0.0623761171
+        },
+        {
+            "value": -0.002610973,
+            "date": "2012-09-04",
+            "l": -0.3339911495,
+            "u": 0.031286929
+        },
+        {
+            "value": -0.0080692734,
+            "date": "2012-09-05",
+            "l": -0.2951839941,
+            "u": 0.0301762553
+        },
+        {
+            "value": -0.0296490933,
+            "date": "2012-09-06",
+            "l": -0.2964395801,
+            "u": -0.0029821004
+        },
+        {
+            "value": 0.001317397,
+            "date": "2012-09-07",
+            "l": -0.2295443759,
+            "u": 0.037903312
+        },
+        {
+            "value": -0.0117649838,
+            "date": "2012-09-08",
+            "l": -0.2226376418,
+            "u": 0.0239720183
+        },
+        {
+            "value": 0.0059394263,
+            "date": "2012-09-09",
+            "l": -0.2020479849,
+            "u": 0.0259489347
+        },
+        {
+            "value": -0.0115565898,
+            "date": "2012-09-10",
+            "l": -0.2042048037,
+            "u": 0.0077863806
+        },
+        {
+            "value": 0.0041183019,
+            "date": "2012-09-11",
+            "l": -0.1837263172,
+            "u": 0.0137898406
+        },
+        {
+            "value": 0.0353559544,
+            "date": "2012-09-12",
+            "l": -0.136610008,
+            "u": 0.051403828
+        },
+        {
+            "value": 0.0070046011,
+            "date": "2012-09-13",
+            "l": -0.1569988647,
+            "u": 0.0202266411
+        },
+        {
+            "value": -0.0004251807,
+            "date": "2012-09-14",
+            "l": -0.1410340292,
+            "u": 0.0273410185
+        },
+        {
+            "value": -0.0035461023,
+            "date": "2012-09-15",
+            "l": -0.1438653689,
+            "u": 0.0165445684
+        },
+        {
+            "value": 0.007797889,
+            "date": "2012-09-16",
+            "l": -0.1291975355,
+            "u": 0.0232461153
+        },
+        {
+            "value": 0.0025402723,
+            "date": "2012-09-17",
+            "l": -0.133972479,
+            "u": 0.0116753921
+        },
+        {
+            "value": -0.005317381,
+            "date": "2012-09-18",
+            "l": -0.1269266586,
+            "u": 0.0129723291
+        },
+        {
+            "value": -0.0075841521,
+            "date": "2012-09-19",
+            "l": -0.1283478383,
+            "u": 0.0056371616
+        },
+        {
+            "value": -0.0391388721,
+            "date": "2012-09-20",
+            "l": -0.1571172198,
+            "u": -0.0311678828
+        },
+        {
+            "value": 0.0075430252,
+            "date": "2012-09-21",
+            "l": -0.1097354417,
+            "u": 0.0141132062
+        },
+        {
+            "value": 0.1850284663,
+            "date": "2012-09-22",
+            "l": 0.0333682152,
+            "u": 0.2140709422
+        },
+        {
+            "value": 0.076629596,
+            "date": "2012-09-23",
+            "l": -0.0068472967,
+            "u": 0.1101280569
+        },
+        {
+            "value": -0.0314292271,
+            "date": "2012-09-24",
+            "l": -0.1074281762,
+            "u": 0.0032669363
+        },
+        {
+            "value": -0.0232608674,
+            "date": "2012-09-25",
+            "l": -0.0905197842,
+            "u": 0.0164250295
+        },
+        {
+            "value": -0.01968615,
+            "date": "2012-09-26",
+            "l": -0.084319856,
+            "u": 0.0193319465
+        },
+        {
+            "value": -0.0310196816,
+            "date": "2012-09-27",
+            "l": -0.0914356781,
+            "u": 0.0094436256
+        },
+        {
+            "value": -0.0758746967,
+            "date": "2012-09-28",
+            "l": -0.1169814745,
+            "u": -0.019659551
+        },
+        {
+            "value": 0.0233974572,
+            "date": "2012-09-29",
+            "l": -0.0356839258,
+            "u": 0.0610712506
+        },
+        {
+            "value": 0.011073579,
+            "date": "2012-09-30",
+            "l": -0.0558712863,
+            "u": 0.0346160081
+        },
+        {
+            "value": -0.002094822,
+            "date": "2012-10-01",
+            "l": -0.0707143388,
+            "u": 0.0152899266
+        },
+        {
+            "value": -0.1083707096,
+            "date": "2012-10-02",
+            "l": -0.1718101335,
+            "u": -0.0886271057
+        },
+        {
+            "value": -0.1098258972,
+            "date": "2012-10-03",
+            "l": -0.1881274065,
+            "u": -0.1072157972
+        },
+        {
+            "value": -0.0872970297,
+            "date": "2012-10-04",
+            "l": -0.1731903321,
+            "u": -0.064381434
+        },
+        {
+            "value": -0.0761992047,
+            "date": "2012-10-05",
+            "l": -0.1770373817,
+            "u": 0.100085727
+        },
+        {
+            "value": -0.0416654249,
+            "date": "2012-10-06",
+            "l": -0.1502479611,
+            "u": 0.0751148102
+        },
+        {
+            "value": -0.0410128962,
+            "date": "2012-10-07",
+            "l": -0.1618694445,
+            "u": 0.0881453482
+        },
+        {
+            "value": -0.0214289042,
+            "date": "2012-10-08",
+            "l": -0.1590852977,
+            "u": 0.0871880288
+        },
+        {
+            "value": 0.2430880604,
+            "date": "2012-10-09",
+            "l": 0.063624221,
+            "u": 0.2455101587
+        },
+        {
+            "value": 0.3472823479,
+            "date": "2012-10-10",
+            "l": 0.1553854927,
+            "u": 0.3583991097
+        },
+        {
+            "value": 0.3360734074,
+            "date": "2012-10-11",
+            "l": 0.2055952772,
+            "u": 0.3812162823
+        },
+        {
+            "value": -0.0463648355,
+            "date": "2012-10-12",
+            "l": -0.0626466998,
+            "u": 0.0037342957
+        },
+        {
+            "value": -0.0867009379,
+            "date": "2012-10-13",
+            "l": -0.0867594055,
+            "u": -0.0223791074
+        },
+        {
+            "value": -0.1288672826,
+            "date": "2012-10-14",
+            "l": -0.1161709129,
+            "u": -0.0534789124
+        },
+        {
+            "value": -0.1474426821,
+            "date": "2012-10-15",
+            "l": -0.1559759048,
+            "u": -0.0646995092
+        },
+        {
+            "value": -0.1502405066,
+            "date": "2012-10-16",
+            "l": -0.1604364638,
+            "u": -0.0602562376
+        },
+        {
+            "value": -0.1203765529,
+            "date": "2012-10-17",
+            "l": -0.1569023195,
+            "u": -0.0578129637
+        },
+        {
+            "value": -0.0649122919,
+            "date": "2012-10-18",
+            "l": -0.0782987564,
+            "u": -0.0501999174
+        },
+        {
+            "value": -0.015525562,
+            "date": "2012-10-19",
+            "l": -0.1103873808,
+            "u": -0.0132131311
+        },
+        {
+            "value": -0.006051357,
+            "date": "2012-10-20",
+            "l": -0.1089644497,
+            "u": 0.0230384197
+        },
+        {
+            "value": 0.0003154213,
+            "date": "2012-10-21",
+            "l": -0.1073849227,
+            "u": 0.0017290437
+        },
+        {
+            "value": -0.0063018298,
+            "date": "2012-10-22",
+            "l": -0.1120298155,
+            "u": 0.0173284555
+        },
+        {
+            "value": -0.004294834,
+            "date": "2012-10-23",
+            "l": -0.1076841119,
+            "u": 0.0547933965
+        },
+        {
+            "value": -0.0053400832,
+            "date": "2012-10-24",
+            "l": -0.1096991408,
+            "u": 0.0560555803
+        },
+        {
+            "value": 0.0070057212,
+            "date": "2012-10-25",
+            "l": -0.0940613813,
+            "u": 0.0425517607
+        },
+        {
+            "value": 0.0082121656,
+            "date": "2012-10-26",
+            "l": -0.0906810455,
+            "u": 0.0396884383
+        },
+        {
+            "value": 0.0141422884,
+            "date": "2012-10-27",
+            "l": -0.0841305678,
+            "u": 0.0340050012
+        },
+        {
+            "value": 0.0041613553,
+            "date": "2012-10-28",
+            "l": -0.0886723749,
+            "u": 0.039426727
+        },
+        {
+            "value": -0.0013614287,
+            "date": "2012-10-29",
+            "l": -0.0923481608,
+            "u": 0.0438725574
+        },
+        {
+            "value": -0.0052144933,
+            "date": "2012-10-30",
+            "l": -0.0937763043,
+            "u": 0.0459998555
+        },
+        {
+            "value": 0.0078904741,
+            "date": "2012-10-31",
+            "l": -0.0807028001,
+            "u": 0.0334824169
+        },
+        {
+            "value": 0.0099598702,
+            "date": "2012-11-01",
+            "l": -0.0740001323,
+            "u": 0.0280264274
+        },
+        {
+            "value": 0.0001146029,
+            "date": "2012-11-02",
+            "l": -0.0820430294,
+            "u": 0.0326771125
+        },
+        {
+            "value": 0.0047572651,
+            "date": "2012-11-03",
+            "l": -0.0754113825,
+            "u": 0.0294912577
+        },
+        {
+            "value": 0.006204557,
+            "date": "2012-11-04",
+            "l": -0.0750627059,
+            "u": 0.029693607
+        },
+        {
+            "value": 0.0115231406,
+            "date": "2012-11-05",
+            "l": -0.0663484142,
+            "u": 0.0214084056
+        },
+        {
+            "value": -0.0032634994,
+            "date": "2012-11-06",
+            "l": -0.0793170451,
+            "u": 0.0355159827
+        },
+        {
+            "value": -0.0108985452,
+            "date": "2012-11-07",
+            "l": -0.0846123893,
+            "u": 0.0409797057
+        },
+        {
+            "value": -0.0092766813,
+            "date": "2012-11-08",
+            "l": -0.0802668328,
+            "u": 0.0373886301
+        },
+        {
+            "value": 0.0095972086,
+            "date": "2012-11-09",
+            "l": -0.0623739694,
+            "u": 0.0194918693
+        },
+        {
+            "value": -0.0111809358,
+            "date": "2012-11-10",
+            "l": -0.0819555908,
+            "u": 0.038335749
+        },
+        {
+            "value": -0.0023572296,
+            "date": "2012-11-11",
+            "l": -0.0745443377,
+            "u": 0.0306093592
+        },
+        {
+            "value": 0.0084213775,
+            "date": "2012-11-12",
+            "l": -0.0657707155,
+            "u": 0.0227270619
+        },
+        {
+            "value": 0.0107446453,
+            "date": "2012-11-13",
+            "l": -0.0617995017,
+            "u": 0.0196547867
+        },
+        {
+            "value": 0.009457792,
+            "date": "2012-11-14",
+            "l": -0.0597697849,
+            "u": 0.0191832343
+        },
+        {
+            "value": 0.0031194779,
+            "date": "2012-11-15",
+            "l": -0.0589126783,
+            "u": 0.0186409442
+        },
+        {
+            "value": -0.0115128213,
+            "date": "2012-11-16",
+            "l": -0.0767105447,
+            "u": 0.0370292452
+        },
+        {
+            "value": 0.0058347339,
+            "date": "2012-11-17",
+            "l": -0.0592236472,
+            "u": 0.0198181452
+        },
+        {
+            "value": -0.0235630436,
+            "date": "2012-11-18",
+            "l": -0.083529944,
+            "u": 0.046280909
+        },
+        {
+            "value": -0.0479795964,
+            "date": "2012-11-19",
+            "l": -0.1086422529,
+            "u": 0.0113044645
+        },
+        {
+            "value": -0.0218184359,
+            "date": "2012-11-21",
+            "l": -0.0881634878,
+            "u": 0.0448568265
+        },
+        {
+            "value": -0.0071361172,
+            "date": "2012-11-28",
+            "l": -0.0807350229,
+            "u": 0.0453599734
+        },
+        {
+            "value": -0.0151966912,
+            "date": "2012-12-05",
+            "l": -0.089995793,
+            "u": 0.0558329569
+        },
+        {
+            "value": -0.0097784855,
+            "date": "2012-12-12",
+            "l": -0.089466481,
+            "u": 0.0550191387
+        },
+        {
+            "value": -0.0095681495,
+            "date": "2012-12-19",
+            "l": -0.090513354,
+            "u": 0.057073314
+        },
+        {
+            "value": -0.0034165915,
+            "date": "2012-12-27",
+            "l": -0.0907151292,
+            "u": 0.0561479112
+        },
+        {
+            "value": 0.3297981389,
+            "date": "2012-12-31",
+            "l": 0.1537781522,
+            "u": 0.3499473316
+        }
+    ]
\ No newline at end of file
diff --git a/index.html b/index.html
index 9a5c42eae7..3343e3d2d3 100644
--- a/index.html
+++ b/index.html
@@ -54,7 +54,8 @@
                 <div id='currency'></div>
                 <div id='xnotdate'></div>
                 <div id='long'></div>
-                <div id='fake_users3'></div>
+                <div id='fake_users3'></div>                
+                <div id='confidence_band'></div>
             </div>
             <div id='trunk'>
                 <div class='row trunk-section'>
diff --git a/js/main.js b/js/main.js
index 131575ee46..287b66ad9f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -97,6 +97,28 @@ $(document).ready(function() {
             y_accessor: 'value'
         })
     });
+    
+    d3.json('data/confidence_band.json', function(data) {
+        data = convert_dates(data);
+        moz_chart({
+            title: "Confidence Band",
+            description: "Example of a chart with a confidence band and extended x-axis ticks enabled.",
+            data: data,
+            format: 'percentage',
+            width: 860,
+            height: 300,
+            right: trunk.right,
+            target: 'div#confidence_band',
+            xax_count: 9,
+            show_years: false,
+            show_confidence_band: true,
+            x_extended_ticks: true,
+            min_y: 0,
+            max_y: 1,
+            x_accessor: 'date',
+            y_accessor: 'value'
+        });
+    });
 
     d3.json('data/some_percentage.json', function(data) {
         for(var i=0;i<data.length;i++) {
@@ -394,6 +416,7 @@ $(document).ready(function() {
             y_accessor: 'y'
         });
     });
+    
 
     function assignEventListeners() {
         $('#dark-css').click(function () {
diff --git a/js/metrics-graphics.js b/js/metrics-graphics.js
index df229e095f..bebc6ca2ce 100644
--- a/js/metrics-graphics.js
+++ b/js/metrics-graphics.js
@@ -67,12 +67,12 @@ function moz_chart() {
         transition_on_update: true,
         rollover_callback: null,
         show_rollover_text: true,
+        show_confidence_band: false,
         xax_format: function(d) {
             //assume date by default, user can pass in custom function
             var df = d3.time.format('%b %d');
             return df(d);
         },
-
         area: true,
         chart_type: 'line',   
         data: [],
@@ -555,6 +555,16 @@ charts.line = function(args) {
             .y1(args.scalefns.yf)
             .interpolate('cardinal');
 
+        // confidence band
+        var confidence_area;
+        if(args.show_confidence_band) {
+            var confidence_area = d3.svg.area()
+                .x(args.scalefns.xf)
+                .y0(function(d) { return args.scales.Y(d.l); })
+                .y1(function(d) { return args.scales.Y(d.u); })
+                .interpolate("cardinal");
+        }
+		    
         // main line
         var line = d3.svg.line()
             .x(args.scalefns.xf)
@@ -568,6 +578,13 @@ charts.line = function(args) {
             .interpolate('cardinal');
 
         for(var i=args.data.length-1; i>=0; i--) {
+            //add confidence band
+            if(args.show_confidence_band) {
+                svg.append('path')
+                    .attr('class', 'confidence-band')
+                    .attr('d', confidence_area(args.data[i]));
+            }
+        
             //add the area
             if(args.area && !args.y_axis_negative && args.data.length <= 1) {
                 //if area already exists, transition it
@@ -615,7 +632,7 @@ charts.line = function(args) {
                         .attr('d', line(args.data[i]));
                 }
             }
-        }
+        }	    
 
         return this;
     }