[bugfix] fixing && linting the histogram viz (#987)

caravel/assets/.eslintrc

@@ -8,5 +8,6 @@
     "prefer-arrow-callback": 0,
     "func-names": 0,
     "react/jsx-no-bind": 0,
+    "no-confusing-arrow": 0,
   }
 }

caravel/assets/visualizations/histogram.js

@@ -1,16 +1,12 @@
-// JS
+import { category21 } from '../javascripts/modules/colors';
-const d3 = require('d3')
+import d3 from 'd3';
-const px = window.px || require('../javascripts/modules/caravel.js')
 
-// CSS
+require('./histogram.css');
-require('./histogram.css')
 
 function histogram(slice) {
+  const div = d3.select(slice.selector);
 
-    const div = d3.select(slice.selector)
+  const draw = function (data, numBins) {
-    
-    const _draw = function(data, numBins) {
-        
     // Set Margins
     const margin = {
       top: 50,
@@ -19,7 +15,6 @@ function histogram(slice) {
       left: 50,
     };
     const navBarHeight = 36;
-        const navBarTitleSize = 12;
     const navBarBuffer = 10;
     const width = slice.width() - margin.left - margin.right;
     const height = slice.height() - margin.top - margin.bottom - navBarHeight - navBarBuffer;
@@ -29,20 +24,30 @@ function histogram(slice) {
     const formatTicks = d3.format(',.00f');
     const x = d3.scale.ordinal();
     const y = d3.scale.linear();
-        const xAxis = d3.svg.axis().scale(x).orient('bottom').ticks(numBins).tickFormat(formatTicks);
+    const xAxis = d3.svg.axis()
-        const yAxis = d3.svg.axis().scale(y).orient('left').ticks(numBins*3);
+    .scale(x)
+    .orient('bottom')
+    .ticks(numBins)
+    .tickFormat(formatTicks);
+    const yAxis = d3.svg.axis()
+    .scale(y)
+    .orient('left')
+    .ticks(numBins * 3);
     // Calculate bins for the data
     const bins = d3.layout.histogram().bins(numBins)(data);
 
     // Set the x-values
-        x.domain(bins.map(function(d) { return d.x;}))
+    x.domain(bins.map((d) => d.x))
-         .rangeRoundBands([0, width], .1); 
+    .rangeRoundBands([0, width], 0.1);
     // Set the y-values
-        y.domain([0, d3.max(bins, function(d) { return d.y;})])
+    y.domain([0, d3.max(bins, (d) => d.y)])
     .range([height, 0]);
 
     // Create the svg value with the bins
-        const svg = div.selectAll('svg').data([bins]).enter().append('svg');
+    const svg = div.selectAll('svg')
+    .data([bins])
+    .enter()
+    .append('svg');
 
     // Make a rectangular background fill
     svg.append('rect')
@@ -69,16 +74,14 @@ function histogram(slice) {
     bar.exit().remove();
     // Set the Height and Width for each bar
     bar.attr('width', x.rangeBand())
-            .attr('x', function(d) { return x(d.x); })
+    .attr('x', (d) => x(d.x))
-            .attr('y', function(d) { return y(d.y); })
+    .attr('y', (d) => y(d.y))
-            .attr('height', function(d) {
+    .attr('height', (d) => y.range()[0] - y(d.y))
-                return y.range()[0] - y(d.y);
+    .style('fill', (d) => category21(d.length))
-            })
-            .attr('fill', function(d) { return px.color.category21(d.length); })
     .order();
 
     // Find maximum length to position the ticks on top of the bar correctly
-       const maxLength = d3.max(bins, function(d) { return d.length;});  
+    const maxLength = d3.max(bins, (d) => d.length);
     function textAboveBar(d) {
       return d.length / maxLength < 0.1;
     }
@@ -90,22 +93,20 @@ function histogram(slice) {
     .append('text')
     .attr('dy', '.75em')
     .attr('y', function (d) {
-            let padding = 0.0
+      let padding = 0.0;
       if (textAboveBar(d)) {
-              padding = 12.0
+        padding = 12.0;
       } else {
-              padding = -8.0
+        padding = -8.0;
       }
       return y(d.y) - padding;
     })
-          .attr('x', function(d) { return x(d.x) + (x.rangeBand()/2);})
+    .attr('x', (d) => x(d.x) + (x.rangeBand() / 2))
     .attr('text-anchor', 'middle')
     .attr('font-weight', 'bold')
     .attr('font-size', '15px')
-          .text(function(d) { return formatNumber(d.y); })
+    .text((d) => formatNumber(d.y))
-          .attr('fill', function(d) {
+    .attr('fill', (d) => textAboveBar(d) ? 'black' : 'white')
-            if(textAboveBar(d)) { return 'black'; } else { return 'white'; }
-          })
     .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
     // Update the x-axis
@@ -127,23 +128,22 @@ function histogram(slice) {
   };
 
   const render = function () {
-    
     d3.json(slice.jsonEndpoint(), function (error, json) {
       if (error !== null) {
         slice.error(error.responseText, error);
-                return '';
+        return;
       }
 
       const numBins = Number(json.form_data.link_length) || 10;
 
       div.selectAll('*').remove();
-            _draw(json.data, numBins);
+      draw(json.data, numBins);
       slice.done(json);
     });
   };
 
   return {
-        render: render,
+    render,
     resize: render,
   };
 }