D3 Examples - d3unconf 2016, v1

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: 100%;
      height: 100%;
    }
    
    /* blend options taken from visual cinnamon tutorial: https://www.visualcinnamon.com/2016/05/beautiful-color-blending-svg-d3.html */
    /*Set isolate on the group element*/
    svg {isolation: isolate;}  
    /*Set blend mode on SVG element: e.g. screen, multiply*/
    path { mix-blend-mode: multiply; }
  </style>
</head>
​
<body>
  <svg></svg>
  <script type="text/babel">
var width = 600;
var height = 600;
    
var colors = chroma.cubehelix()
    .start(230)
    .rotations(-.25)
//     .gamma(0.7)
    .lightness([0.3, 0.8])
  .scale() // convert to chroma.scale
    .correctLightness()
    .colors(6);
d3.csv('data.csv', (data) => {
  var attendees = _.map(data, d => {
    return {
      firstName: d['First Name'],
      lastName: d['Last Name'],
      ticket: d['Ticket Type'],
      first: d.first.split(', '),
      favorite: d.favorite.split(', '),
      version: d.version,
    };
  });
  
  // create links between the different types
  // of firsts, favorites, and versions
  var firsts = _.chain(attendees)
    .map('first').flatten()
    .countBy().toPairs().sortBy(1)
    .filter(d => d[0] !== 'N/A')
    .map(d => {
      return {type: 'first', value: d[0]}
    }).value();
  
  var favorites = _.chain(attendees)
    .map('favorite').flatten()
    .countBy().toPairs()
    .sortBy(1).filter(d => d[0])
    .map(d => {
      return {type: 'favorite', value: d[0]}
    }).value();
  
  var versions = _.chain(attendees)
    .map('version').flatten()
    .countBy().toPairs().sortBy(1)
    .filter(d => d[1] > 1)
    .map(d => {
      return {type: 'version', value: d[0]}
    }).value();
  
  /**************************************
  ** calculate nodes and links
  **************************************/
  
  function findAddLinks(attendee, links, category, targets) {
    _.each(targets, (target) => {
      var target = _.find(category, (c) => c.value === target);
      if (!target) return;
      links.push({
        source: attendee,
        target,
      });
    });
  }
  var links = _.chain(attendees)
    .map(attendee => {
      var attendeeLinks = [];
            findAddLinks(attendee, attendeeLinks, favorites, attendee.favorite);
      findAddLinks(attendee, attendeeLinks, firsts, attendee.first);
      findAddLinks(attendee, attendeeLinks, versions, [attendee.version]);
      return attendeeLinks;
    }).flatten().value();
  
  var nodes = _.chain(attendees)
    .union(favorites).union(firsts).union(versions).value();
  
  var simulation = d3.forceSimulation(nodes)
    .force("charge", d3.forceManyBody())
    .force("link", d3.forceLink(links).distance(75).strength(1))
    .force("x", d3.forceX())
    .force("y", d3.forceY())
    .force("center", d3.forceCenter(width / 2, height / 2))
    .on("tick", ticked);
  var voronoi = d3.voronoi()
    .x(d => d.x)
    .y(d => d.y);
  
  /**************************************
  ** draw the circles and links
  **************************************/
  var svg = d3.select('svg');
  var gray = '#666';
//   var circles = svg.selectAll('circle')
//      .data(nodes).enter().append('circle')
//      .attr('fill', gray)
//      .attr('r', 2);
//   var lines = svg.selectAll('line')
//      .data(links).enter().append('line')
//      .attr('stroke', gray);
  var paths, triangles;
  
  function ticked() {
//     circles.attr('cx', (d) => d.x)
//      .attr('cy', (d) => d.y);
//     lines.attr('x1', (d) => d.source.x)
//       .attr('y1', (d) => d.source.y)
//       .attr('x2', (d) => d.target.x)
//       .attr('y2', (d) => d.target.y)
    
    triangles = voronoi.triangles(attendees);
    
    // now create the triangles
    paths = svg.selectAll('path')
        .data(triangles);
    
    paths.exit().remove();
    paths.enter().append('path')
        .merge(paths)
        .attr('d', d => {
        return 'M' + _.map(d, function(point) {
          return point.x + ',' + point.y;
        }).join(' L') + 'Z';
      }).attr('fill', (d, i) => colors[i % 6])
      .attr('stroke', (d, i) => colors[i % 6])
        .attr('opacity', .85);
  }
  
});
  </script>
</body>
​
    