quick_search-core 0.1.1 → 0.2.0

data/app/assets/javascripts/quick_search/appstats_general_statistics.js.erb

@@ -0,0 +1,908 @@
+<% url_helper = QuickSearch::Engine.routes.url_helpers %>
+
+(function() {
+    var Globals = {};
+
+    $(document).on("turbolinks:load", function() {
+        if ($("#graph_general_statistics").length) {
+            var from = $("#from").datepicker("getDate");
+            var to = new Date($("#to").datepicker("getDate").getTime() + 1000*60*60*24);
+            Globals.Days_In_Sample = parseInt((to-from)/(1000*60*60*24));
+            d3.select("#graphIconContainer").append("i")
+                .attr("class", "fa fa-spinner fa-spin fa-5x fa-fw big-icon")
+                .attr("id", "graphIcon");
+            d3.select("#tableIconContainer").append("i")
+                .attr("class", "fa fa-spinner fa-spin fa-5x fa-fw big-icon")
+                .attr("id", "tableIcon");
+            // Redraw graph if the date range is changed
+            document.getElementById("dateButton").addEventListener("click", function() {
+                var from = $("#from").datepicker("getDate");
+                var to = new Date($("#to").datepicker("getDate").getTime() + 1000*60*60*24);
+                Globals.Days_In_Sample = parseInt((to-from)/(1000*60*60*24));
+                document.getElementById("numDays").innerHTML = "" + Globals.Days_In_Sample; 
+                $.ajax({
+                    type: "GET",
+                    contentType: "application/json; charset=utf-8",
+                    url: '<%= url_helper.data_general_statistics_path %>',
+                    dataType: "json",
+                    data: {
+                        "start_date": from,
+                        "end_date": to
+                    },
+                    success: function(generalStatisticsDataSet) {
+                        Globals.Data = _.cloneDeep(generalStatisticsDataSet)
+                        var dataMain = _.cloneDeep(Globals.Data);
+                        var dataMini = _.cloneDeep(Globals.Data);
+
+                        draw_graph_general_statistics(dataMain, false, Globals.Index, true);
+
+                        draw_graph_mini(dataMini[0], "#mini0");
+                        draw_graph_mini(dataMini[1], "#mini1");
+                        draw_graph_mini(dataMini[2], "#mini2");
+                    },
+                    error: function(result) {
+                        error();
+                    }
+                });
+                $.ajax({
+                    type: "GET",
+                    contentType: "application/json; charset=utf-8",
+                    url: '<%= url_helper.data_general_table_path %>',
+                    dataType: "json",
+                    data: {
+                        "start_date": from,
+                        "end_date": to
+                    },
+                    success: function(tableDataSet) {
+                        var dataTable = _.cloneDeep(tableDataSet);
+                        draw_table(dataTable);
+                    },
+                    error: function(result) {
+                        error();
+                    }
+                });
+            });
+            $.ajax({
+                type: "GET",
+                contentType: "application/json; charset=utf-8",
+                url: '<%= url_helper.data_general_statistics_path %>',
+                dataType: "json",
+                success: function(generalStatisticsDataSet) {
+                    d3.select("#graphIcon").transition().duration(250)
+                        .style("opacity", .000001)
+                        .remove();
+                    Globals.Data = _.cloneDeep(generalStatisticsDataSet)
+                    var dataMain = _.cloneDeep(Globals.Data);
+                    var dataMini = _.cloneDeep(Globals.Data);
+
+                    draw_graph_general_statistics(dataMain, false, 0, false);
+
+                    draw_graph_mini(dataMini[0], "#mini0");
+                    draw_graph_mini(dataMini[1], "#mini1");
+                    draw_graph_mini(dataMini[2], "#mini2");
+
+                    if ($("#graph_general_statistics").length) {
+                        document.getElementById("mini0").addEventListener("click", function() {
+                            load_new_data(0);
+                        })
+                        document.getElementById("mini1").addEventListener("click", function() {
+                            load_new_data(1);
+                        })
+                        document.getElementById("mini2").addEventListener("click", function() {
+                            load_new_data(2);
+                        })
+                    }
+                },
+                error: function(result) {
+                    error();
+                }
+            });
+            $.ajax({
+                type: "GET",
+                contentType: "application/json; charset=utf-8",
+                url: '<%= url_helper.data_general_table_path %>',
+                dataType: "json",
+                success: function(tableDataSet) {
+                    d3.select("#tableIcon").remove();
+                    var dataTable = _.cloneDeep(tableDataSet);
+                    draw_table(dataTable);
+                },
+                error: function(result) {
+                    error();
+                }
+            });
+        }
+    });
+
+    function error() {
+        console.log("Error retrieving data");
+    }
+
+    function draw_graph_general_statistics(dataShared, transitioning, index, dateUpdated) {
+        if ($("#graph_general_statistics").length) {
+            // General Variables
+            var svg;            // SVG to contain graph
+            var dataInt;        // Internal reference to graph dataset
+            var titles;         // Array of possible titles for graph
+            var title;          // Title as determined by index passed in
+            // Dimension Variables
+            var margin;         // Blank space around top graph (focus)
+            var margin2;        // Blank space around bottom graph (context)
+            var width;          // Drawable width of focus/context (not including margins)
+            var height;         // Drawable height of focus (not including margins)
+            var height2;        // Drawable height of context (not including margins)
+            // Date Variables
+            var parseDate;      // Function to parse dates into proper format
+            var dateRange;      // Range of dates in data set
+            var numDays;        // Number of days in range
+            // Scale Variables
+            var x;              // X-scale for focus graph 
+            var x2;             // X-scale for context graph
+            var y;              // Y-scale for focus graph
+            var y2;             // Y-scale for context graph
+            // Brush and Zoom Variables
+            var brush;          // Object that allows domain selection by brush movement
+            var zoom;           // Object that allows domain selection by zooming
+            // Axis Variables
+            var xAxis;          // X-axis for focus graph
+            var xAxis2;         // X-axis for context graph
+            var yAxis;          // Y-axis for focus graph
+            // Area Variables
+            var area;           // Area for focus graph
+            var area2;          // Area for context graph
+            // Selection Variables
+            var gAllSelection;          // Selection for overarching group
+            var gAll;                   // Group containing all elements
+            var focusSelection;         // Selection for focus group
+            var focus;                  // Group containing all focus elements
+            var contextSelection;       // Selection for context group
+            var context;                // Group containing all context elements
+            var clipSelection;          // Selection for clip path
+            var xAxisSelection;         // Selection for xAxis
+            var yAxisSelection;         // Selection for yAxis
+            var titleSelection;         // Selection for title
+            var focusPathSelection;     // Selection for focus path (area)
+            var xAxis2Selection;        // Selection for xAxis2
+            var contextPathSelection;   // Selection for context path (area)
+            var brushSelection;         // Selection for brush
+            var zoomSelection;          // Selection for zoom
+            // Update global index
+            Globals.Index = index;
+
+            // Initialize General Variables ///////////////////////////////////////////////////////////
+            svg = d3.select("#graph_general_statistics");
+
+            dataInt = dataShared[index];
+
+            titles = ["Clicks", "Sessions", "Searches"];
+
+            title = titles[index];
+
+            // Initialize Dimension Variables /////////////////////////////////////////////////////////
+            margin = {
+                top: 40,
+                right: 20,
+                bottom: 110,
+                left: 40
+            };
+            margin2 = {
+                top: 430,
+                right: 20,
+                bottom: 30,
+                left: 40
+            };
+            width = +svg.attr("width") - margin.left - margin.right;
+            height = +svg.attr("height") - margin.top - margin.bottom;
+            height2 = +svg.attr("height") - margin2.top - margin2.bottom;
+            
+            // Initialize Date Variables and Parse Dates //////////////////////////////////////////////
+            parseDate = d3.timeParse("%Y-%m-%d");
+
+            dataInt.forEach(function(d) {
+                d.date = parseDate(d.date);
+            });
+
+            dateRange = d3.extent(dataInt, function(d) {
+                    return d.date;
+            });
+
+            numDays = parseInt((dateRange[1]-dateRange[0])/(1000*60*60*24));
+
+            // Initialize Scale Variables /////////////////////////////////////////////////////////////
+            x = d3.scaleTime().range([0, width]);
+            x2 = d3.scaleTime().range([0, width]);
+            y = d3.scaleLinear().range([height, 0]);
+            y2 = d3.scaleLinear().range([height2, 0]);
+
+            // Set domains
+            x2.domain(d3.extent(dataInt, function(d) {
+                return d.date;
+            }));
+            if (_.isEqual(undefined, Globals.Domain)) {
+                x.domain(d3.extent(dataInt, function(d) {
+                    return d.date;
+                }));
+            } else {
+                var lb, ub;
+                if (Globals.Domain[0] < x2.domain()[0]) {
+                    lb = x2.domain()[0];
+                } else {
+                    lb = Globals.Domain[0];
+                }
+                if (Globals.Domain[1] > x2.domain()[1]) {
+                    ub = x2.domain()[1];
+                } else {
+                    ub = Globals.Domain[1];
+                }
+                if(Globals.Domain[0]>x2.domain()[1] || Globals.Domain[1]<x2.domain()[0]) {
+                    lb = x2.domain()[0];
+                    ub = x2.domain()[1];
+                }
+                x.domain([lb, ub]);
+            }
+            y.domain([0, d3.max(dataInt, function(d) {
+                return d.count;
+            })]);
+            y2.domain(y.domain());
+
+            // Initialize Brush and Zoom Variables ////////////////////////////////////////////////////
+            brush = d3.brushX()
+                .extent([
+                    [0, 0],
+                    [width, height2]
+                ])
+                .on("brush end", brushed);
+
+            zoom = d3.zoom()
+                .scaleExtent([1, 1000])
+                .translateExtent([
+                    [0, 0],
+                    [width, height]
+                ])
+                .extent([
+                    [0, 0],
+                    [width, height]
+                ])
+                .on("zoom", zoomed);
+
+            // Initialize Axis Variables //////////////////////////////////////////////////////////////
+            xAxis = d3.axisBottom(x);
+            xAxis2 = d3.axisBottom(x2);
+            yAxis = d3.axisLeft(y);
+
+            // Initialize Area Variables //////////////////////////////////////////////////////////////
+            area = d3.area()
+                .curve(d3.curveMonotoneX)
+                .x(function(d) {
+                    return x(d.date);
+                })
+                .y0(height)
+                .y1(function(d) {
+                    return y(d.count);
+                });
+
+            area2 = d3.area()
+                .curve(d3.curveMonotoneX)
+                .x(function(d) {
+                    return x2(d.date);
+                })
+                .y0(height2)
+                .y1(function(d) {
+                    return y2(d.count);
+                });
+
+            // Make overarching group /////////////////////////////////////////////////////////////////
+            gAllSelection = svg.selectAll(".gAll").data([dataInt]);
+
+            gAllSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            gAllSelection.enter().append("g")
+                .attr("class", "gAll")
+                .attr("transform", "translate(0,0)");
+
+            gAll = svg.select(".gAll");
+
+            // Make focus
+            focusSelection = gAll.selectAll(".focus").data([dataInt]);
+
+            focusSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            focusSelection.enter().append("g")
+                .attr("class", "focus")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+            focus = gAll.select(".focus");
+
+            // Make context
+            contextSelection = gAll.selectAll(".context").data([dataInt]);
+
+            contextSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            contextSelection.enter().append("g")
+                .attr("class", "context")
+                .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
+
+            context = gAll.select(".context");
+
+            // Make clip path
+            clipSelection = gAll.selectAll("defs").data([dataInt]);
+
+            clipSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            clipSelection.enter().append("defs").append("clipPath")
+                .attr("id", "clip")
+                .append("rect")
+                .attr("width", width)
+                .attr("height", height);
+
+            // Make focus x axis
+            xAxisSelection = focus.selectAll(".xAxis").data([dataInt]);
+
+            xAxisSelection.transition().duration(750)
+                .call(xAxis);
+            xAxisSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            xAxisSelection.enter().append("g")
+                .style("opacity", .000001)
+                .attr("class", "xAxis")
+                .attr("transform", "translate(0," + height + ")")
+                .call(xAxis)
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Make focus y axis
+            yAxisSelection = focus.selectAll(".yAxis").data([dataInt]);
+
+            yAxisSelection.transition().duration(750)
+                .call(yAxis);
+            yAxisSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            yAxisSelection.enter().append("g")
+                .style("opacity", .000001)
+                .attr("class", "yAxis")
+                .attr("transform", "translate(0,0)")
+                .call(yAxis)
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Make chart title
+            titleSelection = svg.selectAll(".chartTitle").data([dataInt]);
+
+            titleSelection.transition().duration(325)
+                .style("opacity", .00001)
+                .transition()
+                .text(title)
+                .transition().duration(325)
+                .style("opacity", 1);
+            titleSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            titleSelection.enter().append("text")
+                .style("opacity", .000001)
+                .text(title)
+                .attr("class", "chartTitle")
+                .attr("transform", "translate(" + (width / 2) + "," + 30 + ")")
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Make focus path
+            focusPathSelection = focus.selectAll(".area").data([dataInt]);
+
+            focusPathSelection.datum(dataInt).transition().duration(750)
+                .attr("d", area);
+            focusPathSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            focusPathSelection.enter().append("path")
+                .style("opacity", .000001)
+                .datum(dataInt)
+                .attr("class", "area")
+                .transition().duration(500)
+                .style("opacity", 1);;
+
+            // Make context x axis
+            xAxis2Selection = context.selectAll(".xAxis").data([dataInt]);
+
+            xAxis2Selection.transition().duration(500)
+                .call(xAxis2);
+            xAxis2Selection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            xAxis2Selection.enter().append("g")
+                .style("opacity", .000001)
+                .attr("class", "xAxis")
+                .attr("transform", "translate(0," + height2 + ")")
+                .call(xAxis2)
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Make context path
+            contextPathSelection = context.selectAll(".area").data([dataInt]);
+
+            contextPathSelection.datum(dataInt).transition().duration(750)
+                .attr("d", area2);
+            contextPathSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            contextPathSelection.enter().append("path")
+                .style("opacity", .000001)
+                .datum(dataInt)
+                .attr("class", "area")
+                .attr("d", area2)
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Make brush container
+            brushSelection = context.selectAll(".brush").data([dataInt]);
+
+            brushSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            brushSelection.enter().append("g")
+                .attr("class", "brush")
+                .call(brush)
+                .call(brush.move, x.range())
+                .merge(brushSelection)
+                .style("opacity", 1)
+                .call(brush);
+
+            // Misc ///////////////////////////////////////////////////////////////////////////////////
+            // Have to prevent zoom or brush temporarily for transitions to execute
+            if (transitioning) {
+                setTimeout(function() {
+                    transitioning = false;
+                }, 50);
+            } // If not on transition, fade in brush
+            else {
+                svg.selectAll(".brush")
+                    .style("opacity", .000001)
+                    .transition().duration(500)
+                    .style("opacity", 1);
+            }
+
+            // Before updating domains, move brush to domain it was previously set to
+            if (dateUpdated) {
+                var lb, ub;
+                if (x2(Globals.Domain[0]) < 0) {
+                    lb = 0;
+                } else {
+                    lb = x2(Globals.Domain[0]);
+                }
+                if (x2(Globals.Domain[1]) > width) {
+                    ub = width;
+                } else {
+                    ub = x2(Globals.Domain[1]);
+                }
+                if(Globals.Domain[0]>x2.domain()[1] || Globals.Domain[1]<x2.domain()[0]) {
+                    lb = 0;
+                    ub = width;
+                }
+                context.select(".brush").call(brush.move, [lb, ub]);
+                context.select(".brush").transition().duration(500)
+                    .style("opacity", 1);
+            }
+
+            // Make zoom container
+            zoomSelection = gAll.selectAll(".zoom").data([dataInt]);
+
+            zoomSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            zoomSelection.enter().append("rect")
+                .attr("class", "zoom")
+                .attr("width", width)
+                .attr("height", height)
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+                .merge(zoomSelection)
+                .call(zoom);
+
+
+            function brushed() {
+                if (!transitioning) {
+                    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;
+                    var s = d3.event.selection || x2.range();
+                    x.domain(s.map(x2.invert, x2));
+                    Globals.Domain = x.domain();
+                    focus.select(".area").attr("d", area);
+                    focus.select(".xAxis").call(xAxis);
+                    svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
+                        .scale(width / (s[1] - s[0]))
+                        .translate(-s[0], 0));
+                }
+            }
+
+            function zoomed() {
+                if (!transitioning) {
+                    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return;
+                    var t = d3.event.transform;
+                    x.domain(t.rescaleX(x2).domain());
+                    Globals.Domain = x.domain();
+                    focus.select(".area").attr("d", area);
+                    focus.select(".xAxis").call(xAxis);
+                    context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
+                }
+            }
+        }
+    }
+
+    function load_new_data(index) {
+        var updateData = _.cloneDeep(Globals.Data);
+        draw_graph_general_statistics(updateData, true, index, false);
+    }
+
+    function draw_graph_mini(dataShared, id) {
+        if ($("#graph_general_statistics").length) {
+            // General Variables
+            var svg;            // SVG to contain graph
+            var dataInt;        // Internal reference to graph dataset
+            var title;          // Title as determined by id passed in
+            // Dimension Variables
+            var margin;         // Blank space around graph
+            var width;          // Drawable width of graph (not including margins)
+            var height;         // Drawable height of graph (not including margins)
+            // Date Variables
+            var parseDate;      // Function to parse dates into proper format
+            // Scale Variables
+            var x;              // X-scale for graph
+            var y;              // Y-scale for graph
+            // Axis Variables
+            var xAxis;          // X-axis for graph
+            var yAxis;          // Y-axis for graph
+            // Area Variables
+            var area;           // Area for graph
+            // Selection Variables
+            var gAllSelection;  // Selection for overarching group
+            var gAll;           // Group containing all elements
+            var xAxisSelection; // Selection for xAxis
+            var yAxisSelection; // Selection for yAxis
+            var pathSelection;  // Selection for path
+            var textSelection;  // Selection for title
+
+            // Initialize General Variables ///////////////////////////////////////////////////////////
+            svg = d3.select(id);
+
+            dataInt = dataShared;
+
+            title = "";
+            if (id == "#mini0") {
+                title = "Clicks";
+            } else if (id == "#mini1") {
+                title = "Sessions";
+            } else {
+                title = "Searches";
+            }
+
+            // Initialize Dimension Variables /////////////////////////////////////////////////////////
+            margin = {
+                top: 5,
+                right: 5,
+                bottom: 5,
+                left: 5
+            };
+            width = +svg.attr("width") - margin.left - margin.right;
+            height = +svg.attr("height") - margin.top - margin.bottom;
+
+            // Initialize Date Variables and Parse Dates //////////////////////////////////////////////
+            parseDate = d3.timeParse("%Y-%m-%d");
+
+            dataInt.forEach(function(d) {
+                d.date = parseDate(d.date);
+            });
+
+            // Initialize Scale Variables /////////////////////////////////////////////////////////////
+            x = d3.scaleTime().range([0, width]);
+            y = d3.scaleLinear().range([height, 0]);
+
+            // Set domains
+            x.domain(d3.extent(dataInt, function(d) {
+                return d.date;
+            }));
+            y.domain([0, d3.max(dataInt, function(d) {
+                return d.count;
+            })]);
+
+            // Initialize Axis Variables //////////////////////////////////////////////////////////////
+            xAxis = d3.axisBottom(x);
+            yAxis = d3.axisLeft(y);
+
+            // Remove ticks from axes
+            xAxis.tickSizeOuter(0);
+            yAxis.tickSizeOuter(0);
+
+            // Initialize Area Variables //////////////////////////////////////////////////////////////
+            area = d3.area()
+                .curve(d3.curveMonotoneX)
+                .x(function(d) {
+                    return x(d.date);
+                })
+                .y0(height)
+                .y1(function(d) {
+                    return y(d.count);
+                });
+
+            // Make overarching group /////////////////////////////////////////////////////////////////
+            gAllSelection = svg.selectAll(".gAll").data([dataInt]);
+
+            gAllSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            gAllSelection.enter().append("g")
+                .attr("class", "gAll")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+            gAll = svg.select(".gAll");
+
+            // Append clip path
+            svg.append("defs").append("clipPath")
+                .attr("id", "clipMini")
+                .append("rect")
+                .attr("width", width)
+                .attr("height", height);
+
+            // Make xAxis
+            xAxisSelection = gAll.selectAll(".xAxis").data([dataInt]);
+
+            xAxisSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            xAxisSelection.enter().append("g")
+                .style("opacity", .000001)
+                .attr("class", "xAxis")
+                .attr("transform", "translate(0," + height + ")")
+                .call(xAxis.ticks(0))
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Make yAxis
+            yAxisSelection = gAll.selectAll(".yAxis").data([dataInt]);
+
+            yAxisSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            yAxisSelection.enter().append("g")
+                .style("opacity", .000001)
+                .attr("class", "yAxis")
+                .call(yAxis.ticks(0))
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Make path
+            pathSelection = gAll.selectAll(".areaMini").data([dataInt]);
+
+            pathSelection.datum(dataInt).transition().duration(750)
+                .attr("d", area);
+            pathSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            pathSelection.enter().append("path")
+                .style("opacity", .000001)
+                .datum(dataInt)
+                .attr("class", "areaMini")
+                .attr("d", area)
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Make title
+            textSelection = gAll.selectAll(".chartTitle").data([dataInt]);
+
+            textSelection.exit().transition().duration(500)
+                .style("opacity", .000001)
+                .remove();
+            textSelection.enter().append("text")
+                .style("opacity", .000001)
+                .text(title)
+                .attr("class", "chartTitle")
+                .attr("transform", "translate(" + (width / 2) + "," + (height - margin.bottom) + ")")
+                .transition().duration(500)
+                .style("opacity", 1);
+        }
+    }
+
+    function draw_table(dataShared) {
+        if ($("#graph_general_statistics").length) {
+            // General Variables
+            var svg;            // SVG to contain graph
+            var dataInt;        // Internal reference to graph dataset
+            // Dimension Variables
+            var margin;                 // Blank space around graph
+            var width;                  // Drawable width of graph (not including margins)
+            var height;                 // Drawable height of graph (not including margins)
+            var horizontalTextOffset;   // Horizontal text padding
+            var verticalTextOffset;     // Vertical text padding
+            // Scale Variables
+            var x;              // X-scale for graph
+            var y;              // Y-scale for graph
+            // Additional Data Variables
+            var lineData;       // Data for line construction (two x,y pairs)
+            var headingData;    // Data for heading construction (text, x, and y values)
+            var keys;           // Keys used to traverse dataset
+            // Selection Variables
+            var groupEnter;     // Entry selection for overarching group
+            var gAll;           // Group containing all elements
+            var lineGroup;      // Group containing all lines
+            var headingGroup;   // Group containing all headings
+            var dataGroup;      // Group containing all data elements
+
+            // Initialize General Variables ///////////////////////////////////////////////////////////
+            svg = d3.select("#graph_general_table");
+
+            dataInt = dataShared;
+
+            // Initialize Dimension Variables /////////////////////////////////////////////////////////
+            margin = {
+                top: 20,
+                right: 20,
+                bottom: 20,
+                left: 20
+            };
+            width = +svg.attr("width") - margin.left - margin.right;
+            height = +svg.attr("height") - margin.top - margin.bottom;
+            horizontalTextOffset = 10;
+            verticalTextOffset = 30;
+
+            // Initialize Scale Variables /////////////////////////////////////////////////////////////
+            x = d3.scaleLinear().rangeRound([0, width]);
+            y = d3.scaleLinear().rangeRound([0, height]);
+
+            // Set domains
+            x.domain([0, 100]);
+            y.domain([0, 100]);
+
+            // Initialize Additional Data Variables ///////////////////////////////////////////////////
+            lineData = [ {x1: x(0  ), y1: y(25 ), x2: x(100), y2: y(25 )}
+                        ,{x1: x(20 ), y1: y(0  ), x2: x(20 ), y2: y(100)}
+                        ,{x1: x(36 ), y1: y(0  ), x2: x(36 ), y2: y(100)}
+                        ,{x1: x(52 ), y1: y(0  ), x2: x(52 ), y2: y(100)}
+                        ,{x1: x(68 ), y1: y(0  ), x2: x(68 ), y2: y(100)}
+                        ,{x1: x(84 ), y1: y(0  ), x2: x(84 ), y2: y(100)}];
+
+            headingData = [  {txt: "Clicks",      x1: x(2 ), y1: y(37.5)}
+                            ,{txt: "Searches",    x1: x(2 ), y1: y(62.5)}
+                            ,{txt: "Sessions",    x1: x(2 ), y1: y(87.5)}
+                            ,{txt: "Total",       x1: x(22), y1: y(12.5)}
+                            ,{txt: "Per Day",     x1: x(38), y1: y(12.5)}
+                            ,{txt: "Per Click",   x1: x(54), y1: y(12.5)}
+                            ,{txt: "Per Search",  x1: x(70), y1: y(12.5)}
+                            ,{txt: "Per Session", x1: x(86), y1: y(12.5)}];
+
+            keys = ["clicks", "searches", "sessions"];
+
+            // Make overarching group /////////////////////////////////////////////////////////////////
+            groupEnter = svg.selectAll("g").data([dataInt]).enter();
+
+            groupEnter.append("g")
+                .attr("class", "gAll");
+
+            gAll = svg.select(".gAll")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+     
+            
+
+            // Add Lines For Grid
+            gAll.selectAll(".lineGroup").data([dataInt]).enter().append("g")
+                .attr("class", "lineGroup");
+
+            lineGroup = gAll.select(".lineGroup")
+                .attr("transform", "translate(0,0)");
+
+            lineGroup.selectAll(".gridLine").data(lineData).enter().append("line")
+                .style("opacity", .000001)
+                .attr("class", "gridLine")
+                .attr("x1", function(d) { return d.x1; })
+                .attr("x2", function(d) { return d.x2; })
+                .attr("y1", function(d) { return d.y1; })
+                .attr("y2", function(d) { return d.y2; })
+                .transition().duration(500)
+                .style("opacity", 1);;
+
+            // Add row/column headings headings 
+            gAll.selectAll(".headingGroup").data([dataInt]).enter().append("g")
+                .attr("class", "headingGroup");
+
+            headingGroup = gAll.select(".headingGroup")
+                .attr("transform", "translate(0,0)");
+
+            headingGroup.selectAll(".headText").data(headingData).enter().append("text")
+                .style("opacity", .000001)
+                .attr("class", "headText")
+                .text(function (d) { return d.txt; })
+                .attr("transform", function(d) { return "translate(" + d.x1 + "," + d.y1 + ")"; })
+                .transition().duration(500)
+                .style("opacity", 1);;
+
+            // Add data text
+            gAll.selectAll(".dataGroup").data([dataInt]).enter().append("g")
+                .attr("class", "dataGroup");
+
+            dataGroup = gAll.select(".dataGroup")
+                .attr("transform", "translate(0,0)");
+
+            // Totals column
+            dataGroup.selectAll(".totalText").data(dataInt)
+                .transition().duration(325)
+                .style("opacity", .000001)
+                .transition()
+                .text(function (d,i) { return d[keys[i]]; })
+                .transition().duration(325)
+                .style("opacity", 1);
+            dataGroup.selectAll(".totalText").data(dataInt).enter().append("text")
+                .style("opacity", .000001)
+                .attr("class", "totalText")
+                .text(function (d,i) { return d[keys[i]]; })
+                .attr("transform", function(d, i) { return "translate(" + x(22) + "," + y(37.5+25*i) + ")"; })
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Per Day column
+            dataGroup.selectAll(".perDayText").data(dataInt)
+                .transition().duration(325)
+                .style("opacity", .000001)
+                .transition()
+                .text(function (d,i) { return Math.round(parseInt(d[keys[i]])/Globals.Days_In_Sample * 10000)/10000; })
+                .transition().duration(325)
+                .style("opacity", 1);
+            dataGroup.selectAll(".perDayText").data(dataInt).enter().append("text")
+                .style("opacity", .000001)
+                .attr("class", "perDayText")
+                .text(function (d,i) { return Math.round(parseInt(d[keys[i]])/Globals.Days_In_Sample * 10000)/10000; })
+                .attr("transform", function(d, i) { return "translate(" + x(38) + "," + y(37.5+25*i) + ")"; })
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Per Click column
+            dataGroup.selectAll(".perClickText").data(dataInt)
+                .transition().duration(325)
+                .style("opacity", .000001)
+                .transition()
+                .text(function (d,i) { return Math.round(parseInt(d[keys[i]])/parseInt(dataInt[0]["clicks"]) * 10000)/10000; })
+                .transition().duration(325)
+                .style("opacity", 1);
+            dataGroup.selectAll(".perClickText").data(dataInt).enter().append("text")
+                .style("opacity", .000001)
+                .attr("class", "perClickText")
+                .text(function (d,i) { return Math.round(parseInt(d[keys[i]])/parseInt(dataInt[0]["clicks"]) * 10000)/10000; })
+                .attr("transform", function(d, i) { return "translate(" + x(54) + "," + y(37.5+25*i) + ")"; })
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Per Search column
+            dataGroup.selectAll(".perSearchText").data(dataInt)
+                .transition().duration(325)
+                .style("opacity", .000001)
+                .transition()
+                .text(function (d,i) { return Math.round(parseInt(d[keys[i]])/parseInt(dataInt[1]["searches"]) * 10000)/10000; })
+                .transition().duration(325)
+                .style("opacity", 1);
+            dataGroup.selectAll(".perSearchText").data(dataInt).enter().append("text")
+                .style("opacity", .000001)
+                .attr("class", "perSearchText")
+                .text(function (d,i) { return Math.round(parseInt(d[keys[i]])/parseInt(dataInt[1]["searches"]) * 10000)/10000; })
+                .attr("transform", function(d, i) { return "translate(" + x(70) + "," + y(37.5+25*i) + ")"; })
+                .transition().duration(500)
+                .style("opacity", 1);
+
+            // Per Session column
+            dataGroup.selectAll(".perSessionText").data(dataInt)
+                .transition().duration(325)
+                .style("opacity", .000001)
+                .transition()
+                .text(function (d,i) { return Math.round(parseInt(d[keys[i]])/parseInt(dataInt[2]["sessions"]) * 10000)/10000; })
+                .transition().duration(325)
+                .style("opacity", 1);
+            dataGroup.selectAll(".perSessionText").data(dataInt).enter().append("text")
+                .style("opacity", .000001)
+                .attr("class", "perSessionText")
+                .text(function (d,i) { return Math.round(parseInt(d[keys[i]])/parseInt(dataInt[2]["sessions"]) * 10000)/10000; })
+                .attr("transform", function(d, i) { return "translate(" + x(86) + "," + y(37.5+25*i) + ")"; })
+                .transition().duration(500)
+                .style("opacity", 1);
+        }
+    }
+
+})();