DS April, Code 1 by sxywu

index.html

<!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.17.4/lodash.min.js'></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js"></script>
  <style>
  </style>
</head>

<body>
  <svg />
  <script>
    var width = 700;
    var height = 300;
    var margin = {left: 20, top: 20};
    var blockWidth = 3;
    var blockHeight;
    var svg = d3.select('svg')
    	.attr('width', width)
    	.attr('height', height);
    
    // survey questions
    var moreorless = 'Do you want to spend more time or less time visualizing data in the future?';
    var percentday = 'Percent of your day focused on creating/implementing/productizing data visualizations?';
    var frustration = 'What is your biggest frustration with doing data visualization in your job?';
    var employment = "What's your employment status";
    var morelessorder = ['Much Less', 'Less', 'Same', 'More', 'Much more'];
    
    var yScale = d3.scaleLinear()
    	.domain([0, 100])
    	.range([margin.top, height - margin.top]);
    var colorScale = d3.scaleOrdinal()
    	.domain(morelessorder)
    	.range(chroma.scale(['#e85d87', '#6298e8']).colors(5));
   
    

    // load data
    d3.csv('survey.csv', survey => {
      // only care about % of time on dataviz
      // and whether they want more or less dataviz time
      var data = _.chain(survey)
      	.filter(d => d[moreorless] && d[percentday] && d[employment] === 'Full-time')
      	.map(d => {
          return Object.assign(d, {
            sentiment: d[moreorless],
            percent: parseFloat(d[percentday]),
            color: colorScale(d[moreorless]),
            order: _.indexOf(morelessorder, d[moreorless]),
          });
        }).value();
     
      var bins = d3.histogram()
      	.domain(yScale.domain())
      	.value(d => d.percent)
      	(data);
      console.log(bins)
      
      var dots = svg.selectAll('.dots')
				.data(bins).enter().append('g')
      	.classed('dots', true)
      	.attr('transform', d => 'translate(' + [margin.left, yScale(d.x0)] + ')');
      
      dots.selectAll('rect')
      	.data(d => _.sortBy(d, 'order')).enter().append('rect')
      	.attr('width', blockWidth)
      	.attr('height', bins[1].x1 - bins[0].x0)
      	.attr('x', (d, i) => i * blockWidth + (d.order > 1 ? blockWidth : 0))
      	.attr('fill', d => d.color)
      	.attr('opacity', 0.85);
      
      console.log(_.chain(data).filter(d => d.order < 2).map(d => d[frustration]).filter().value().join('\n\n'));
    });
  </script>
</body>