D3 Examples - ESLint on dc.js

ESLint on dc.js
The charts and table show the results of replacing JSHint and JSCS with ESLint and running it over the current (3.0.7) dc.js source code, using an ESLint config generated using polyjuice from the current .jscsrc and .jshintrc files.
ESLint can automatically fix a number of the errors, including indentation, quotes, and missing jsdoc declarations.
The ESLint config used is included for reference.
xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.7/dc.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.2.1/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.2.1/dt-1.10.16/datatables.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.6/crossfilter.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.7/dc.js"></script>
  <script src="axis.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/colorbrewer@1.0.0/colorbrewer.js"></script>
<script>
window.onload=
function(){
d3.tsv('errs.csv')
  .then(function(results){
    var row = dc.rowChart('#row')
    , bar = dc.barChart('#bar')
    , pie = dc.pieChart('#pie')
    , data_table_opts = tableConfig()
    , table
    , ndx     = crossfilter(results)
    , colors  = {}
    , dim     = {}
    , cntrls  = {
      reset: 'a'
      , filter: 'div'
    }
    , refreshTable = function () {
      dc.events.trigger(function () {
        var t = $('#table' ).DataTable()
        .clear()
        .rows.add( dim.code.top(Infinity) )
        .draw();
      });
    };
​
    ['file','code','fixable'].forEach( n => {
      dim[n] = ndx.dimension( d => d[n] )
    });
​
    dim.fileLoc = ndx.dimension( d => {
      return d.file.lastIndexOf('/') !== -1
      ? d.file.substring(0, d.file.lastIndexOf('/')+1)
      : '/';
    });
​
    colors.code = d3.scaleOrdinal()
      .range( colorbrewer.Spectral[dim.code.group().all().length] )
      .domain( dim.code.group().all().map( n => n.key ));
​
    colors.fileLoc = d3.scaleOrdinal()
      .range( colorbrewer.Pastel2[8].slice(0,[ dim.fileLoc.group().all().length ]) )
      .domain( dim.fileLoc.group().all().map( n => n.key ) );
​
    bar
      .width( dim.code.group().all().length * 80 )
      .margins({ top: 5, right: 5, bottom: 30, left: 30 })
      .height(400)
      .xUnits( dc.units.ordinal )
      .elasticY(true)
      .x( d3.scaleOrdinal() )
      .dimension( dim.code )
      .group( dim.code.group().reduceCount() )
      .colors(colors.code)
      .colorAccessor( d => colors.code(d.key) )
      .controlsUseVisibility(true)
    ;
​
    pie
      .width(500)
      .height(400)
      .dimension(dim.fileLoc)
      .group( dim.fileLoc.group().reduceCount() )
      .colors(colors.fileLoc)
      .innerRadius(25)
      .radius(175)
      .cx(200)
      .minAngleForLabel(0.25)
      .controlsUseVisibility(true)
      .legend( dc.legend().x(400).y(20).itemHeight(20).gap(5) )
    ;
​
    row
      .height( 1200 )
      .width( 800 )
      .margins({ left: 10, top: 0, right: 10, bottom: 0 })
      .dimension( dim.file )
      .group( dim.file.group().reduceCount() )
      .elasticX( true )
      .colors( colors.fileLoc )
      .colorAccessor( d =>
        colors.fileLoc( d.key.lastIndexOf('/') !== -1
        ? d.key.substring( 0, d.key.lastIndexOf('/')+1)
        : '/' )
       )
      .controlsUseVisibility( true )
​
    data_table_opts.data = results;
    table = $('#table').DataTable(data_table_opts);
​
    dc.chartRegistry.list().forEach( function(e){
      e.on('filtered', refreshTable);
      ['reset', 'filter'].forEach( function(n) {
        this.root().append('div')
          .classed(n, true)
          .attr('id', `${this.anchorName()}-${n}`)
          .style('visibility', 'hidden')
          .text(n === 'reset' ? n : 'none')
          .on('click', function() {
            e.replaceFilter(null);
            dc.redrawAll();
            console.log(`clicked ${n} div`);
          });
      }, e);
    });
​
    dc.cboxMenu('#cbox')
      .dimension(dim.fixable)
      .group(dim.fixable.group())
      .multiple(true)
      .title( function(d) {
        if (d.key === 'true') {
          return `fixable by ESLint: ${d.value}`;
        }
        return `no automatic fix: ${d.value}`;
      })
      .on('filtered', refreshTable);
​
​
    dc.axisChart('#row-axis')
      .margins({ left: 10, top: 0, right: 10, bottom: 10 })
      .height( 50 )
      .width( 800 )
      .dimension( dim.file )
      .group( dim.file.group().reduceCount() )
      .elastic( true )
      ;
​
    refreshTable();
    dc.renderAll();
​
  });
​
  function tableConfig() {
    return {
      columns: [
      { data: 'file', title: 'File name',
        render: function( d, t, r ){
          return '<a href="https://github.com/dc-js/dc.js/blob/master/' + r.file + '">' + r.file + '</a>';
        }
      },
      { data: 'line', title: 'Position',
        render: function( d, t, r ){
          return '<a href="https://github.com/dc-js/dc.js/blob/master/' + r.file + '#L' + d + '">' + [ r.line, r.column ].join(":") + '</a>';
        }
      },
    //  { data: 'severity', title: 'Severity' },
      { data: 'description', title: 'Description' },
      { data: 'code', title: 'ESLint rule',
        render: function(d,t,r){
          if (d === 'parse-error' || d === '-') {
              return d;
          }
          return '<a href="https://eslint.org/docs/rules/' + d + '">' + d + '</a>';
        }
      },
      { data: 'fixable', title: 'Fixable',
        render: function(d,t,r){
          if (d === 'true') {
            return 'yes';
          }
          return '';
        }
      },
      ],
      dom: '<"dt_top"iBf>rt<"dt_bottom">',
      paging: false,
      scrollY: "500px",
      scrollCollapse: true,
    };
  }
}
  </script>
  <style>
    body {
       font-family: 'Helvetica Neue', 'Noto Sans', 'Droid Sans', Helvetica, sans-serif;
​
      font-size: 1rem;
      line-height: 1.5;
      padding: 16px 32px;
    }
    h3 {
      font-size: 1.25rem;
    }
    .dc-chart text, #row text, #pie text {
      fill: black;
      font-family: 'Helvetica Neue', 'Noto Sans', 'Droid Sans', Helvetica, sans-serif;
    }
    .dc-chart {
      margin: 0;
      padding: 0;
    }
    div.dc-chart {
      float: none;
    }
    svg {
      display: block;
    }
    #row {
      overflow-y: auto;
      width: 800px;
      height: 300px;
    }
    section:after {
      content: "";
      display: table;
      clear: both;
    }
    #bar-section, #cbox-section {
      display: inline-block;
      vertical-align: top;
    }
    .dc-cbox-group {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .dc-cbox-item input {
      margin-right: 6px;
    }
    .filter:before {
      content: "Active filters: ";
    }
    .reset, .filter {
      display: inline-block;
    }
    .reset, input[type=reset] {
      font-size: 1rem;
      padding: 3px 12px;
      margin-right: 12px;
      cursor: pointer;
      background-color: #66b5af;
      color: #fff;
      border-radius: 3px;
      border: 1px solid #fff
    }
  </style>
</head>
​
<body>
<section id="bar-section">
  <h3>ESLint errors by error type</h3>
  <div id="bar"></div>
</section>
<section id="cbox-section">
  <h3>Errors by fixability</h3>
  <div id="cbox"></div>
</section>
<section>
  <h3>ESLint errors per file</h3>
  <p>Colour indicates by file location; scroll to see more</p>
  <div id="row"></div>
  <div id="row-axis"></div>
</section>
<section id="pie-section">
  <h3>ESLint errors by file location</h3>
  <div id="pie"></div>
</section>
<h3>Errors</h3>
<table id="table" class="display"></table>
</body>
</html>
    