Better setup

app/assets/javascripts/embed.js

@@ -0,0 +1,43 @@
+/**
+ * Application entry point.
+ */
+require([
+  'backbone',
+  'compare/router',
+  'embed/PantropicalView'
+], function(Backbone, RouterView, PantropicalView) {
+
+  'use strict';
+
+  var ComparePage = Backbone.View.extend({
+
+    el: document.body,
+
+    initialize: function() {
+      this._initRouter();
+      this._initViews();
+      this._initApp();
+    },
+
+    /**
+     * Initialize the map by starting the history.
+     */
+    _initApp: function() {
+      if (!Backbone.History.started) {
+        Backbone.history.start({pushState: true});
+      }
+    },
+
+    _initRouter: function() {
+      this.router = new RouterView();
+    },
+
+    _initViews: function() {
+      new PantropicalView();
+    }
+
+  });
+
+  new ComparePage();
+
+});

app/assets/javascripts/embed/PantropicalView.js

@@ -1,8 +1,7 @@
 define([
   'backbone',
-  'countries/views/pantropical/PantropicalTotalEmissionsView',
-  'countries/views/pantropical/vis',
-
+  'embed/views/pantropical/PantropicalTotalEmissionsView',
+  'embed/views/pantropical/vis',
 ], function(Backbone, PantropicalTotalEmissionsView) {
 
   'use strict';

app/assets/javascripts/embed/views/pantropical/PantropicalTotalEmissionsView.js

@@ -0,0 +1,264 @@
+define([
+  'backbone',
+  'd3'
+
+], function(Backbone, d3) {
+
+  'use strict';
+
+  var TotalEmissionsView = Backbone.View.extend({
+
+    el: '#totalEmissionsChart',
+
+    initialize: function() {
+      this.render();
+    },
+
+    render: function() {
+      var self = this;
+
+      this.$el.html('');
+
+      d3.csv('/patropical_total_emissions.csv', function(data){
+        self._parseData(data);
+      });
+    },
+
+    _parseData: function(data) {
+      var dataList = [];
+      _.each(data[0], function(value, key) {
+        dataList.push({
+          date: key,
+          value: Math.round(value),
+          x: key,
+          y: value
+        });
+      });
+
+      this._renderChart({
+        elem: '#totalEmissionsChart',
+        barWidth: 30,
+        barSeparation: 45,
+        data: dataList,
+        hover: true,
+        decimals: 0,
+        loader: 'is-loading',
+        interpolate: 'cardinal',
+        dateFormat: '%Y',
+        unit: '',
+        margin: {
+          top: 30,
+          right: 40,
+          bottom: 40,
+          left: 55,
+          xaxis: 10,
+          tooltip: 3.5
+        }
+      });
+    },
+
+    _renderChart: function(params) {
+      var elem = params.elem;
+      var elemAttr = elem.replace(/[#]|[.]/g, '');
+      var $el = $(elem);
+      var contentWidth = $el.width();
+      var contentHeight = $el.height();
+      var data = params.data;
+      var dateFormat = params.dateFormat || '%Y';
+      var hover = params.hover;
+      var interpolate = params.interpolate || 'linear';
+      var loader = params.loader || null;
+      var infoWindow = params.infoWindowText || '';
+      var decimals = params.decimals || 0;
+      var unit = params.unit || '';
+      var margin = params.margin || {
+        top: 30,
+        right: 0,
+        bottom: 40,
+        left: 0,
+        xaxis: 10,
+        tooltip: 1.8
+      };
+
+      $el.addClass('graph-line');
+
+      var width = contentWidth,
+          height = contentHeight;
+
+      var parseDate = d3.time.format('%Y').parse;
+      var bisectDate = d3.bisector(function(d) { return d.date; }).left;
+
+      var width = width - margin.left - margin.right,
+          height = height - margin.top - margin.bottom;
+
+      var x = d3.time.scale()
+          .range([0, width]);
+
+      var y = d3.scale.linear()
+          .range([height, 0]);
+
+      var xAxis = d3.svg.axis()
+          .scale(x)
+          .orient('bottom')
+          .tickPadding(10)
+          .outerTickSize(0)
+          .tickFormat(d3.time.format(dateFormat));
+
+      var yAxis = d3.svg.axis()
+          .scale(y)
+          .orient('left')
+          .ticks(7)
+          .innerTickSize(-(width+50))
+          .outerTickSize(0)
+          .tickPadding(4);
+          // .tickFormat('');
+
+      var line = d3.svg.line()
+          .x(function(d) { return x(d.date); })
+          .y(function(d) { return y(d.value); })
+          .interpolate(interpolate);
+
+      var svg = d3.select(elem).append('svg')
+        .attr('width', width + margin.left + margin.right)
+        .attr('height', height + margin.top + margin.bottom)
+        .append('g')
+          .attr('transform', 'translate('+margin.left+',' + margin.top + ')');
+
+      data.forEach(function(d) {
+        d.date = parseDate(d.date);
+      });
+
+      x.domain(d3.extent(data, function(d) { return d.date; })).nice();
+      y.domain(d3.extent(data, function(d) { return d.value ; })).nice();
+
+      function customYAxis(g) {
+        g.selectAll('text')
+          .attr('x', 0)
+          .attr('dy', -5);
+      }
+
+      svg.append('g')
+        .attr('class', 'y axis')
+        .attr('transform', 'translate(-45,0)')
+        .call(yAxis)
+        .call(customYAxis);
+
+      svg.append('g')
+        .attr('class', 'x axis')
+        .attr('transform', 'translate(0,' + (height) + ')')
+        .call(xAxis);
+
+      svg.append('path')
+          .datum(data)
+          .attr('class', 'line')
+          .attr('d', line);
+
+      svg.append('g')
+          .attr('transform', 'translate(-5, -10)').append('text')
+          .attr('class', 'unit')
+          .attr('x', function(d) { return 0 })
+          .attr('y', '-10')
+          .attr('dy', '.35em')
+          .attr('text-anchor', 'start')
+          .text(function(d) { return unit; });
+
+      function mousemove() {
+        var x0 = x.invert(d3.mouse(this)[0]),
+            i = bisectDate(data, x0, 1),
+            d0 = data[i - 1],
+            d1 = data[i];
+
+        if(d0 && d0.date && d1 && d1.date) {
+          var d = x0 - d0.date > d1.date - x0 ? d1 : d0;
+          focus.attr('transform', 'translate(' + x(d.date) + ',' + y(d.value) + ')');
+
+          // Move trail
+          trail.attr('transform', 'translate(' + x(d.date) + ', '+y(d.value)+')');
+          trailLine.attr('y2', (height) - y(d.value));
+
+          // Update tooltip
+          d3.select(tooltipEl)
+            .style('left', ( (x(d.date) + margin.left) + (radius/2) - margin.tooltip - (tooltipW / 2) ) + 'px')
+            .style('top', ( (y(d.value) + margin.top) - (tooltipH + (tooltipH/3)) + (radius / 2) - margin.tooltip ) + 'px')
+            .style('display', 'block');
+
+          d3.select(tooltipEl)
+            .select('.title')
+            .text(infoWindow + ' ' + d.value);
+
+          d3.select(tooltipEl)
+            .select('.value')
+            .text(d.x).append('span')
+            .attr('class', 'tooltip-unit')
+            .text(unit);
+        }
+      }
+
+      if(loader) {
+        $el.removeClass(loader);
+      }
+
+      var tooltipEl = elem+'-tooltip';
+      var tooltip = d3.select(elem)
+        .insert('div', 'svg')
+          .attr('id', elemAttr+'-tooltip')
+          .attr('class', 'tooltip-graph')
+
+      var tooltipW = $(tooltipEl).width();
+      var tooltipH = $(tooltipEl).height();
+
+      tooltip.append('div')
+        .attr('class', 'content');
+      tooltip.append('div')
+        .attr('class', 'bottom');
+
+      var tooltipContent = d3.select(tooltipEl)
+        .select('.content');
+
+      tooltipContent.append('div')
+        .attr('class', 'title')
+        .text(infoWindow);
+      tooltipContent.append('div')
+        .attr('class', 'value number');
+
+      /** Trail **/
+      var trail = svg.append('g');
+      var trailLine = trail.append('line')
+        .attr('class', 'trail')
+        .style('display', 'none')
+        .attr('x1', 0)
+        .attr('y1', 0)
+        .attr('x2', 0)
+        .attr('y2', 50);
+
+      var radius = 4;
+      var focus = svg.append('g')
+        .attr('class', 'focus')
+        .style('display', 'none');
+
+      focus.append('circle')
+        .attr('r', radius);
+
+      svg.append('rect')
+        .attr('class', 'overlay')
+        .attr('width', width)
+        .attr('height', height)
+        .on('mouseover', function() {
+          focus.style('display', null);
+          trailLine.style('display', null);
+          d3.select(tooltipEl)
+            .style('display', 'block');
+        })
+        .on('mouseout', function() {
+          focus.style('display', 'none');
+          trailLine.style('display', 'none');
+          d3.select(tooltipEl)
+            .style('display', 'none');
+        })
+        .on('mousemove', mousemove);
+    },
+  });
+
+  return TotalEmissionsView;
+
+});