anchor.diff:  	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   	<script src="c3/c3.min.js"></script>
   	<script>
  -
  -    d3.csv("customer_walk_flat_file.csv", function (error, csv_data) {
  -        var modData = [];
  -        var category = [];
  -        var item = [];
  -        var donutData = d3.nest()
  -                .key(function (d) {
  -                    return d.Transaction_Type;
  -                })
  -                .rollup(function (d) {
  -                    return d3.sum(d, function (g) {
  -                        return 1;
  -                    });
  -                }).entries(csv_data);
  -
  -        console.log(donutData);
  -
  -        donutData.filter(function (d) {
  -            return (d.key == "New" || d.key == "Lost")
  -        })
  -                .forEach(function (d, i) {
  -            console.log(d.key)
  -            var item = [d.key];
  -            item.push(d.values);
  -            modData.push(item);
  -        });
  -
  -        var donutChart = c3.generate({
  -            data: {
  -                columns: modData,
  -                //mimeType: 'json'
  -                type: 'donut',
  -                onclick: function (d, i) {
  -                    console.log("onclick", d, i);
  -                },
  -                onmouseover: function (d, i) {
  -                    console.log("onmouseover", d, i);
  -                },
  -                onmouseout: function (d, i) {
  -                    console.log("onmouseout", d, i);
  -                }
  -            },
  -            donut: {
  -                title: "Customer"
  -            },
  -            bindto: "#chart"
  -        });
  -
  -
  -                       modData = [];
  -                       category = [];
  -                       item = [];
  -                        var totalLineData = d3
  -                                .nest()
  -                                .key(
  -                                        function (d) {
  -                                            var parseDate = d3.time.format("%m/%d/%Y").parse;
  -                                            var monthYear = d3.time.format("%b-%Y")(new Date(parseDate(d.Transaction_Date)));
  -                                            return monthYear;
  -                                        })
  -                                .rollup(
  -                                        function (d) {
  -                                            return d3
  -                                                    .sum(
  -                                                            d,
  -                                                            function (g) {
  -                                                                return 1;
  -                                                            });
  -                                        })
  -                                .entries(
  -                                        csv_data);
  -
  -              //          console.log(data);
  -                        item = ["Total Customer Count"];
  -                        var totalCount = 0;
  -        totalLineData
  -                                .forEach(function (d, i) {
  -                                    console
  -                                            .log(d.key);
  -                                    category
  -                                            .push(d.key);
  -                                    totalCount = totalCount + d.values;
  -                                    item
  -                                            .push(totalCount);
  -
  -                                });
  -                        modData.push(item);
  -
  -                //        console.log(category);
  -                  //      console.log(modData);
  -                        var totalLineChart = c3
  -                                .generate({
  -                                    data: {
  -                                        columns: modData
  -
  -                                    },
  -                                    axis: {
  -                                        x: {
  -                                            type: 'category',
  -                                            categories: category
  -                                        },
  -                                        y : {
  -                                            tick: {
  -                                                // count: 20
  -
  -                                            }
  -                                        }},
  -                                    bindto: '#chart1'
  -                                });
  -
  -                        modData = [];
  -                        category = [];
  -                        item = [];
  -                        //var data = csv_data.filter(function(d) { return (d.Transaction_Type == "New" || d.Transaction_Type == "Lost");});
  -                     //   console.log(csv_data);
  -                        var categoryLineData = d3
  -                                .nest()
  -
  -                                .key(function (d) {
  -                                    return d.Transaction_Type;
  -                                })
  -                                .rollup(
  -                                        function (d) {
  -
  -                                            var subData = d3
  -                                                    .nest()
  -                                                    .key(
  -                                                            function (d) {
  -                                                                var parseDate = d3.time.format("%m/%d/%Y").parse;
  -                                                                var monthYear = d3.time.format("%b-%Y")(new Date(parseDate(d.Transaction_Date)));
  -                                                                return monthYear;
  -                                                            })
  -                                                    .rollup(
  -                                                            function (d) {
  -                                                                return d3
  -                                                                        .sum(
  -                                                                                d,
  -                                                                                function (g) {
  -                                                                                    return 1;
  -                                                                                });
  -                                                            })
  -                                                    .entries(
  -                                                            d);
  -                                            return subData;
  -                                        })
  -
  -                                .entries(
  -                                        csv_data);
  -                        //                            console.log(data);
  -        categoryLineData.filter(function (d) {
  -                            return (d.key == "New" || d.key == "Lost")
  -                        })
  -                                .forEach(function (d, i) {
  -                                    item = [];
  -                                    category = [];
  -                                    item.push(d.key);
  -                                    //                                          console.log(d.key);
  -
  -                                    d.values.forEach(function (k, l) {
  -
  -                                        category
  -                                                .push(k.key);
  -                                        item
  -                                                .push(k.values);
  -
  -                                    });
  -                                    modData.push(item);
  -                                });
  -//							console.log(category);
  -//							console.log(modData);
  -                        var categoryLineChart = c3
  -                                .generate({
  -                                    data: {
  -                                        columns: modData
  -
  -                                    },
  -                                    axis: {
  -                                        x: {
  -                                            type: 'category',
  -                                            categories: category
  -                                        }
  -                                    },
  -                                    bindto: '#chart2'
  -                                });
  -								
  -							
  -							
  +		d3
  +				.csv(
  +						"customer_walk_flat_file.csv",
  +						function(error, csv_data) {
  +							var parseDate = d3.time.format("%m/%d/%Y").parse;
  +							csv_data
  +									.forEach(function(d) {
  +										d.Transaction_Date = parseDate(d.Transaction_Date);
  +									});
  +							var modData = [];
  +							var category = [];
  +							var item = [];
  +							var donutData = d3.nest().key(function(d) {
  +								return d.Transaction_Type;
  +							}).rollup(function(d) {
  +								return d3.sum(d, function(g) {
  +									return 1;
  +								});
  +							}).entries(csv_data);
  +
  +							//     console.log(donutData);
  +
  +							donutData.filter(function(d) {
  +								return (d.key == "New" || d.key == "Lost")
  +							}).forEach(function(d, i) {
  +								//   console.log(d.key)
  +								var item = [ d.key ];
  +								item.push(d.values);
  +								modData.push(item);
  +							});
  +
  +							var donutChart = c3.generate({
  +								data : {
  +									columns : modData,
  +									//mimeType: 'json'
  +									type : 'donut',
  +									onclick : function(d, i) {
  +										//    console.log("onclick", d, i);
  +									},
  +									onmouseover : function(d, i) {
  +										//  console.log("onmouseover", d, i);
  +									},
  +									onmouseout : function(d, i) {
  +										//  console.log("onmouseout", d, i);
  +									}
  +								},
  +								donut : {
  +									title : "Customer"
  +								},
  +								bindto : "#chart"
  +							});
  +
  +							modData = [];
  +							category = [];
  +							item = [];
  +							//var data = csv_data.filter(function(d) { return (d.Transaction_Type == "New" || d.Transaction_Type == "Lost");});
  +							//console.log(csv_data);
  +							var categoryLineData = d3.nest()
  +
  +							.key(
  +									function(d) {
  +
  +										var monthYear = d3.time.format("%b-%Y")
  +												(new Date(d.Transaction_Date));
  +										//  console.log(monthYear);
  +										return monthYear;
  +									}).rollup(function(d) {
  +
  +								var subData = d3.nest().key(function(d) {
  +									return d.Transaction_Type;
  +								}).rollup(function(d) {
  +									return d
  +								}).entries(d);
  +								return subData;
  +							}).entries(csv_data);
  +							console.log(categoryLineData);
  +							var customerCountKPI = totalPolicy = totalPaymentCost = 0;
  +							var newItem = [ "New" ];
  +							var lostItem = [ "Lost" ];
  +							category = [];
  +							item = [ "Total Customer Count" ];
  +							var totalModData = [];
  +							var lastMonthChangeCC = 0;
  +							var firstMonthChangeCC = 0;
  +							var lastMonthChangePD = 0;
  +							var firstMonthChangePD = 0;
  +							var lastMonthChangeGWP = 0;
  +							var firstMonthChangeGWP = 0;
  +							var lastMonthChangeRES = 0;
  +							var firstMonthChangeRES = 0;
  +
  +							var prevMonthCC = 1;
  +							var firstMonthCC = 0;
  +							var currMonthCC = 0;
  +							var prevMonthPD = 1;
  +							var firstMonthPD = 0;
  +							var currMonthPD = 0;
  +							var prevMonthGWP = 1;
  +							var firstMonthGWP = 0;
  +							var currMonthGWP = 0;
  +							var prevMonthRES = 1;
  +							var firstMonthRES = 0;
  +							var currMonthRES = 0;
  +							categoryLineData
  +									.filter(function(f) {
  +										return f.key != "Jan-1970"
  +									})
  +									.forEach(
  +											function(d, i) {
  +
  +												currMonthCC = 0;
  +
  +												console.log(d.key);
  +												category.push(d.key);
  +
  +												d.values
  +														.forEach(function(k, l) {
  +
  +															var custCount = d3
  +																	.map(
  +																			k.values,
  +																			function(
  +																					d) {
  +																				return d.Customer_ID;
  +																			})
  +																	.keys().length;
  +															var policyCount = k.values.length;
  +															var paymentSum = d3
  +																	.sum(
  +																			k.values,
  +																			function(
  +																					d) {
  +																				return d.Payment_Cost;
  +																			});
  +															if (k.key == "Lost") {
  +																console
  +																		.log(custCount);
  +																lostItem
  +																		.push(custCount);
  +																customerCountKPI = customerCountKPI
  +																		- custCount;
  +																totalPolicy = totalPolicy
  +																		- policyCount;
  +																totalPaymentCost = totalPaymentCost
  +																		- paymentSum;
  +															} else if (k.key == "New") {
  +																newItem
  +																		.push(custCount);
  +																customerCountKPI = customerCountKPI
  +																		+ custCount;
  +																totalPolicy = totalPolicy
  +																		+ policyCount;
  +																totalPaymentCost = totalPaymentCost
  +																		+ paymentSum;
  +															} else {
  +																customerCountKPI = customerCountKPI
  +																		+ custCount;
  +																totalPolicy = totalPolicy
  +																		+ policyCount;
  +																totalPaymentCost = totalPaymentCost
  +																		+ paymentSum;
  +															}
  +														});
  +												//customerCountKPI = customerCountKPI + currMonthCC;
  +												lastMonthChangeCC = ((customerCountKPI - prevMonthCC) / prevMonthCC) * 100;
  +												lastMonthChangePD = ((totalPolicy - prevMonthPD) / prevMonthPD) * 100;
  +												lastMonthChangeGWP = ((totalPaymentCost - prevMonthGWP) / prevMonthGWP) * 100;
  +												item.push(customerCountKPI);
  +												//        console.log(currMonthCC);
  +												//      console.log(prevMonthCC);
  +												if (prevMonthCC == 1) {
  +													firstMonthCC = customerCountKPI;
  +													firstMonthPD = totalPolicy;
  +													firstMonthGWP = totalPaymentCost;
  +												}
  +												prevMonthCC = customerCountKPI;
  +												prevMonthPD = totalPolicy;
  +												prevMonthGWP = totalPaymentCost;
  +
  +											});
  +							policyDensityKPI = (totalPolicy / customerCountKPI);
  +							firstMonthChangeCC = ((customerCountKPI - firstMonthCC) / firstMonthCC) * 100;
  +							firstMonthChangePD = ((totalPolicy - firstMonthPD) / firstMonthPD) * 100;
  +							firstMonthChangeGWP = ((totalPaymentCost - firstMonthGWP) / firstMonthGWP) * 100;
  +
  +							var reserveKPI = totalPaymentCost * 0.75;
  +							var amtFormat = d3.format(",.0f");
  +							var txtFormat = d3.format(",.2f");
  +							//// ######### Customer Count KPI ################# ////
  +							d3.select("#txtCustomerCountKPI").text(
  +									customerCountKPI);
  +
  +							d3.select("#lastMonthCCKPI").style("color",
  +									txtColorFunc(lastMonthChangeCC)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(lastMonthChangeCC).concat("%"));
  +							d3.select("#firstMonthCCKPI").style("color",
  +									txtColorFunc(firstMonthChangeCC)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(firstMonthChangeCC).concat("%"));
  +							d3.select("#eoyCCKPI").style("color",
  +									txtColorFunc(firstMonthChangeCC)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(firstMonthChangeCC).concat("%"));
  +
  +							//// ######### Product Density KPI ################# ////
  +							d3.select("#txtProductDensityKPI").text(
  +									txtFormat(policyDensityKPI));
  +
  +							d3.select("#lastMonthPDKPI").style("color",
  +									txtColorFunc(lastMonthChangePD)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(lastMonthChangePD).concat("%"));
  +							d3.select("#firstMonthPDKPI").style("color",
  +									txtColorFunc(firstMonthChangePD)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(firstMonthChangePD).concat("%"));
  +							d3.select("#eoyPDKPI").style("color",
  +									txtColorFunc(firstMonthChangePD)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(firstMonthChangePD).concat("%"));
  +
  +							//// ######### Gross Written Premium KPI ################# ////
  +							d3.select("#txtGrossWrittenPremiumKPI").style(
  +									"font-size", "15px").text(
  +									"€ ".concat(amtFormat(totalPaymentCost)));
  +
  +							d3.select("#lastMonthGWPKPI").style("color",
  +									txtColorFunc(lastMonthChangeGWP)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(lastMonthChangeGWP).concat("%"));
  +							d3.select("#firstMonthGWPKPI").style("color",
  +									txtColorFunc(firstMonthChangeGWP)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(firstMonthChangeGWP).concat("%"));
  +							d3.select("#eoyGWPKPI").style("color",
  +									txtColorFunc(firstMonthChangeGWP)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(firstMonthChangeGWP).concat("%"));
  +
  +							//// ######### Reserve KPI ################# ////
  +							d3
  +									.select("#txtReserveKPI")
  +									.style("font-size", "15px")
  +									.text(
  +											"€ "
  +													.concat(amtFormat(totalPaymentCost * 0.75)));
  +							var amtFormat = d3.format(",.0f");
  +							d3.select("#lastMonthRESKPI").style("color",
  +									txtColorFunc(lastMonthChangeGWP)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(lastMonthChangeGWP).concat("%"));
  +							d3.select("#firstMonthRESKPI").style("color",
  +									txtColorFunc(firstMonthChangeGWP)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(firstMonthChangeGWP).concat("%"));
  +							d3.select("#eoyRESKPI").style("color",
  +									txtColorFunc(firstMonthChangeGWP)).style(
  +									"font-weight", "bold").text(
  +									txtFormat(firstMonthChangeGWP).concat("%"));
  +
  +							//   console.log(item);
  +							totalModData.push(item);
  +							modData.push(newItem);
  +							modData.push(lostItem);
  +							//     console.log(customerCountKPI);
  +							//   console.log(totalModData);
  +							//							console.log(modData);
  +							var categoryLineChart = c3.generate({
  +								data : {
  +									columns : modData
  +
  +								},
  +								axis : {
  +									x : {
  +										type : 'category',
  +										categories : category
  +									}
  +								},
  +								bindto : '#chart2'
  +							});
  +
  +							//    console.log(category);
  +							//console.log(modData);
  +							var totalLineChart = c3.generate({
  +								data : {
  +									columns : totalModData
  +
  +								},
  +								axis : {
  +									x : {
  +										type : 'category',
  +										categories : category
  +									}
  +								},
  +								bindto : '#chart1'
  +							});
  +
   							/////WIP::::WORK IN PROGRESS: WATERFALL
   							modData = [];
   							category = [];
   							item = [];
  -							var WaterfallData = d3.nest()
  -								.key(function (d) {
  +							var WaterfallData = d3.nest().key(function(d) {
   								return d.Transaction_Detail;
  -							})
  -							.rollup(function (d) {
  -								return d3.sum(d, function (g) {
  +							}).rollup(function(d) {
  +								return d3.sum(d, function(g) {
   									return 1;
  -							});
  +								});
   							}).entries(csv_data);
   
  -						console.log("Waterfall");
  -						console.log(WaterfallData);
  -
  -						// Transform data (i.e., finding cumulative values and total)
  -						  var cumulative = 0;
  -						  for (var i = 0; i < WaterfallData.length; i++) {
  -							WaterfallData[i].start = cumulative;
  -							cumulative += WaterfallData[i].values;
  -							WaterfallData[i].end = cumulative;
  -							//WIP::::PENDING----LOGIC FOR +ve / -ve
  -							WaterfallData[i].class = ( WaterfallData[i].values >= 0 ) ? 'positive' : 'negative'
  +							console.log("Waterfall");
  +							console.log(WaterfallData);
  +
  +							// Transform data (i.e., finding cumulative values and total)
  +							var cumulative = 0;
  +							for (var i = 0; i < WaterfallData.length; i++) {
  +								WaterfallData[i].start = cumulative;
  +								cumulative += WaterfallData[i].values;
  +								WaterfallData[i].end = cumulative;
  +								//WIP::::PENDING----LOGIC FOR +ve / -ve
  +								WaterfallData[i].class = (WaterfallData[i].values >= 0) ? 'positive'
  +										: 'negative'
   							}
   							WaterfallData.push({
  -								name: 'Total',
  -								key: 'Total',
  -								end: cumulative,
  -								values: cumulative,
  -								start: 0,
  -								class: 'total'
  +								name : 'Total',
  +								key : 'Total',
  +								end : cumulative,
  +								values : cumulative,
  +								start : 0,
  +								class : 'total'
   							});
  -							
  -							var startValueArray = ['data1'];
  -							var endValueArray = ['data2'];
  +
  +							var startValueArray = [ 'data1' ];
  +							var endValueArray = [ 'data2' ];
   							WaterfallData.forEach(function(k) {
   								startValueArray.push(k.start);
   								endValueArray.push(k.values);
  
positive.code: 				<div class="row">
  					<div class="col-md-6">
  						<section class="panel">
  							<header class="panel-heading"> How are customer movements trending over time? </header>
  							<div class="panel-body">
  								<div id="chart1"></div>
  							</div>
  
negative.code: 				<!-- /.search form -->
  				<!-- sidebar menu: : style can be found in sidebar.less -->
  				<ul class="sidebar-menu">
  					<li class="active"><a href="#"> <i class="fa fa-dashboard"></i>
  							<span>Month</span></br> <select class="form-control m-b-10">
  								<option value="volvo">Volvo</option>
  								<option value="saab">Saab</option>
  								<option value="opel">Opel</option>
  								<option value="audi">Audi</option>
  						</select>
  					</a></li>
  					<li><a href="general.html"> <i class="fa fa-gavel"></i> <span>Channel
  								Type</span></br> <select class="form-control m-b-10">
  								<option value="volvo">Volvo</option>
  								<option value="saab">Saab</option>
  								<option value="opel">Opel</option>
  								<option value="audi">Audi</option>
  						</select>
  					</a></li>
  
  					<li><a href="basic_form.html"> <i class="fa fa-globe"></i>
  							<span >Channel Name</span></br> <select class="form-control m-b-10">
  								<option value="volvo">Volvo</option>
  								<option value="saab">Saab</option>
  								<option value="opel">Opel</option>
  								<option value="audi">Audi</option>
  						</select>
  					</a></li>
  
  					<li><a href="simple.html"> <i class="fa fa-globe"></i> <span>Region</span></br>
  							<select class="form-control m-b-10">
  								<option value="volvo">Volvo</option>
  								<option value="saab">Saab</option>
  								<option value="opel">Opel</option>
  								<option value="audi">Audi</option>
  						</select>
  					</a></li>
  					<li><a href="simple.html"> <i class="fa fa-glass"></i> <span>Product
  								Family</span></br> <select class="form-control m-b-10">
  								<option value="volvo">Volvo</option>
  								<option value="saab">Saab</option>
  								<option value="opel">Opel</option>
  								<option value="audi">Audi</option>
  						</select>
  					</a></li>
  					<li><a href="simple.html"> <i class="fa fa-glass"></i> <span>Policy
  								Name</span></br> <select class="form-control m-b-10">
  								<option value="volvo">Volvo</option>
  								<option value="saab">Saab</option>
  								<option value="opel">Opel</option>
  								<option value="audi">Audi</option>
  						</select>
  					</a></li>
  					<li><a href="simple.html"> <i class="fa fa-glass"></i> <span>Customer
  								Type</span></br> <select class="form-control m-b-10">
  								<option value="volvo">Volvo</option>
  								<option value="saab">Saab</option>
  								<option value="opel">Opel</option>
  								<option value="audi">Audi</option>
  						</select>
  					</a></li>
  
  				</ul>
  