D3 Examples - d3.unconf 2017 badge

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://cdn.jsdelivr.net/gh/gka/chroma.js/chroma.min.js"></script>
  <style> 
    body {
/*       background-color: #000; */
    }
    svg {
      width: 1050px;
      height: 1500px;
    }
  </style>
</head>
​
<body>
  <svg></svg>
  <script>
    var midpoint = -2/3;
    var halfSide = Math.sqrt(1 / 3);
    var triangle = [
      (-halfSide) + ',-1',
      (halfSide) + ',-1',
      '0,0'
    ];
​
    var favoritesScale = d3.scaleLinear()
      .range([midpoint - .05, -.85]);
    var versionsScale = d3.scaleOrdinal()
      .range(_.rangeRight(6, 7));
    var firstsScale = d3.scaleOrdinal();
    var reverseFirstsScale = d3.scaleOrdinal();
    var hexScale = 100;
    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()
//          var reverseFirsts = firsts
//         .sortBy(d => d[1])
//         .map(0).value()
//       firsts = firsts
        .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
      
      var colors = chroma.cubehelix()
        .start(280)
//         .rotations(-1 / firsts.length)
        .gamma(0.5)
        .lightness([0.3, 0.4])
        .scale() // convert to chroma.scale
//         .correctLightness()
        .colors(firsts.length);
      firstsScale.domain(firsts).range(colors);
//       reverseFirstsScale.domain(reverseFirsts).range(colors);
      versionsScale.domain(_.range(1, 5));
      var maxFavorites = _.max(_.values(favorites));
      favoritesScale.domain([1, maxFavorites]);
​
      /**************************************
      ** draw the hexagons
      **************************************/
      var svg = d3.select('svg').append('g')
        .attr('transform', 'translate(-200, -200)');
      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.2 + 1.5) * hexSize;
          if (row % 2) {
            x += 1.6 * hexSize;
          }
          var y = (row * 1.05 + 2) * hexScale;
          return 'translate(' + [x, y] + ')scale(' + hexScale + ')';
        }).on('mouseover', d => console.log(d));
​
      var triangles = hex.selectAll('triangle')
        .data((d, j) => {
          return _.times(versionsScale(d.version), i => {
            if (!favorites[d.favorite]) debugger
            return {
              angle: i * 60,
              midpoint: favoritesScale(favorites[d.favorite]),
              color0: firstsScale(_.random(firsts.length)),
              color: firstsScale(d.first),
//               color2: reverseFirstsScale(d.first),
            };
          });
        }).enter().append('g')
        .classed('triangle', true)
        .attr('transform', d => 'rotate(' + d.angle + ')');
​
        var t = d3.transition().duration(10000);
      
      triangles.append('polygon')
        .attr('points', triangle.join(' '))
        .attr('fill', d => chroma(d.color0).darken(2.5))
        .transition(t)
          .attr('fill', d => chroma(d.color).darken(2.5));
      triangles.selectAll('.subtri')
        .data(d => _.times(3, i => {
          return Object.assign({
            subangle: i * 120,
            subcolor0: chroma(d.color0).saturate(1.5).brighten(i),
            subcolor: chroma(d.color).saturate(1.5).brighten(i),
          }, 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',  d => d.subcolor0)
        .transition(t)
        .attr('fill',  d => d.subcolor);
      
    });
  </script>
</body>
​
    