D3 Examples - d3.unconf() 2017 Submission

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
    }
    
    .axis path {
      stroke: none;
    }
    
    text {
      font-family: sans-serif;
    }
    
    .x.grid {
      pointer-events:none;
    }
    
    .x.grid path, .x.grid .tick text {
      stroke-width: 0;
      fill: none;
    }
    
    .x.grid line{
      stroke: lightgrey;
      stroke-opacity: 0.4;
      shape-rendering: crispEdges;
    }
    
  </style>
</head>
​
<body>
  <script>
    
    const margin = {top: 50, right: 30, bottom: 50, left: 30},
      width = 960 - margin.left - margin.right, 
      height = 500 - margin.top - margin.bottom;
    
    let svg = d3.select('body').append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
    .append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);
    
    const startYear = 1995,
          currentYear = 2017;
    
    
    let x = d3.scaleLinear().range([0, width]);
    let y = d3.scaleLinear().range([height-1,0]);
    let color = d3.scaleOrdinal(d3.schemeCategory20);
    
    let stack = d3.stack();
    
    let xAxis = d3.axisBottom()
      .scale(x)
        .tickFormat(d3.format('d'));
​
    let yAxis = d3.axisLeft()
      .scale(y)
    
    let area = d3.area()
      .x(d => x(d.data.year))
      .y0(d => y(d[0]))
      .y1(d => y(d[1]))
        .curve(d3.curveBasis);
    
    d3.json('warped-tour.json', function(error, data) {
      let maxYearsPerformed = d3.max(data,(d) => {
        return d.years.length;
      });
      
      let keys = [],
          years = [],
          map = [];
      
​
      for (let i = 1; i <= maxYearsPerformed; i++) {
        keys.push(i);
      }
     
      for (let year = startYear; year <= currentYear; year++) {
        let submap = {};
        submap.year = year;
        for (let i = 1; i <= maxYearsPerformed; i++) {
          submap[i] = 0;
        }
        map.push(submap);
        years.push(year);
      }
             
      data.forEach(function(band) {
        let yearsPerformed = band.years.length;
        let years = band.years.forEach(function(year) {
          map[`${year-1995}`][`${yearsPerformed}`]++;
        });
      });
      
      
      let maxPerformers = d3.max(map, (d) => {
        let vals = d3.keys(d).map(key => (key !== 'year' ? d[key] : 0));
    return d3.sum(vals);
      });
                                 
      x.domain([startYear, currentYear]);
      xAxis.tickValues(years);
      y.domain([1,maxPerformers]);
      color.domain(keys);
      
        stack.keys(keys);
​
      stack.order(d3.stackOrderNone);
      stack.offset(d3.stackOffsetNone);
      
      
      let stackedData = stack(map);
      
      let bands = svg.selectAll('.browser')
        .data(stackedData)
      .enter().append('g')
​
      bands.append('path')
        .attr('class', 'area')
        .attr('d', area)
        .style('fill-opacity', 0.5)
        .style('stroke', (d) => color(d.key))
        .style('stroke-width', '0')
        .style('fill', (d) => color(d.key))
        .on('mouseover', function(d) {
                    d3.select(this)
            .style('fill-opacity', 0.9)
            .style('stroke-width', 2);
        })
        .on('mouseout', function(d) {
                    d3.select(this)
            .style('fill-opacity', 0.5)
            .style('stroke-width', 0);
        });
      
      
      svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', `translate(0,${height})`)
        .call(xAxis);
      svg.append('g')
        .attr('class', 'y axis')
        .call(yAxis);
      
      svg.append('g')
        .attr('class', 'x grid')
        .attr('transform', `translate(0,${height})`)
        .call(xAxis.tickSize(-height))
      
      
      let boxWidth = 20;
      
            svg.append('text')
        .attr('x', width/2)
        .attr('y', -14)
        .attr('text-anchor', 'middle')
        .text("Stacked Area Chart of Bands Performing at Vans Warped Tour, Grouped by # of Years Performed")
      
      
      let legendContainer = svg.append('g')
        .classed('legend', true);
      
      let legend = legendContainer
        .selectAll('g')
            .data(keys).enter()
                .append('g')
              .attr('transform', (d, i) => `translate(25, ${i*(boxWidth+1)})`);
      
            legend.append('rect')
        .attr('width', boxWidth)
        .attr('height', boxWidth)
        .style('fill-opacity', 0.5)
        .attr('x', x(startYear)+18)
        .attr('y', 0)
        .attr('fill', (d) => color(d));
      
      legend.append('text')
        .attr('font-size', 12)
        .attr('x', x(startYear) + boxWidth + 22)
        .attr('y', boxWidth/2 + 4)
        .text(d => d)
    });
​
  </script>
</body>
​
    