D3 Examples - d3.unconf 2016, v8

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
  <script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
  <script type="text/javascript" src="https://gka.github.io/chroma.js/vendor/chroma-js/chroma.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    svg {
      width: 1000px;
      height: 1000px
    }
  </style>
</head>
​
<body>
  <svg></svg>
  <script>
    var colors = chroma.cubehelix()
//         .start(200)
//         .rotations(1.5)
        .gamma(0.7)
        .lightness([0.3, 0.8]);
    var midpoint = -2/3;
    var halfSide = Math.sqrt(1 / 3);
    var triangle = [
      (-halfSide) + ',-1',
      (halfSide) + ',-1',
      '0,0'
    ];
​
    var favoritesScale = d3.scaleLinear()
      .range([-.95, midpoint - .01]);
    var versionsScale = d3.scaleOrdinal()
      .domain(_.range(1, 5)).range(_.rangeRight(3, 7));
    var firstsScale = d3.scaleOrdinal();
    var hexScale = 25;
    var hexSize = hexScale * 2 / Math.sqrt(3);
    
    d3.csv('data.csv', data => {
      /**************************************
      ** process data and add them to scales as domain
      **************************************/
      var attendees = _.map(data, d => {
        return {
          name: d['First Name'],
          first: d.first.split(', ')[0],
          favorite: d.favorite.split(', ')[0],
          version: parseInt(d.version.replace('v', '')),
        };
      });
      var firsts = _.chain(attendees)
        .map('first').flatten()
        .countBy().toPairs()
        .sortBy(d => -d[1])
        .map(0).value();
​
      var favorites = _.chain(attendees)
        .map('favorite').flatten()
        .countBy().value();
​
      var versions = _.chain(attendees)
        .map('version').flatten()
        .countBy().toPairs()
    //      .sortBy(d => -d[1])
        .filter(d => d[1] > 1)
        .map(0).value();
      
      // update colors with number of classes
      colors = colors.scale() // convert to chroma.scale
        .correctLightness()
        .colors(firsts.length);
      
      firstsScale.domain(firsts).range(colors);
      versionsScale.domain(versions);
      var maxFavorites = _.max(_.values(favorites));
      favoritesScale.domain([1, maxFavorites]);
​
      /**************************************
      ** draw the hexagons
      **************************************/
      var svg = d3.select('svg').append('g');
      var perRow = 5;
      var hex = svg.selectAll('.hex')
        .data(attendees).enter().append('g')
        .classed('hex', true)
        .attr('transform', (d, i) => {
          var row = Math.floor(i / perRow);
          var x = (i % perRow * 3 + 1.5) * hexSize;
          if (row % 2) {
            x += 1.5 * hexSize;
          }
          var y = (row + 1) * hexScale;
          return 'translate(' + [x, y] + ')scale(' + hexScale + ')';
        });
​
      var triangles = hex.selectAll('triangle')
        .data(d => {
          var start = _.random(6);
          return _.times(versionsScale(d.version), i => {
            if (!favorites[d.favorite]) debugger
            return {
              angle: ((i + start) % 6) * 60,
              midpoint: favoritesScale(favorites[d.favorite]),
              color: firstsScale(d.first),
            };
          });
        }).enter().append('g')
        .classed('triangle', true)
        .attr('transform', d => 'rotate(' + d.angle + ')');
​
      triangles.append('polygon')
        .attr('points', triangle.join(' '))
        .attr('fill', d => d.color);
      triangles.selectAll('.subtri')
        .data(d => _.times(3, i => {
          return Object.assign({
            subangle: i * 120,
          }, d);
        })).enter().append('polygon')
        .classed('subtri', true)
        .attr('transform', d => 'rotate(' + d.subangle + ' 0 ' + midpoint + ')')
        .attr('points', d => {
          return [
            (-halfSide) + ',-1',
            '0,' + d.midpoint,
            halfSide + ',-1'
          ].join(' ');
        }).attr('fill', '#fff');
    });
  </script>
</body>
​
    