DS April, Code 2

forked from sxywu's block: DS April, Code 1

<!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.jsdelivr.net/gh/gka/chroma.js/chroma.min.js"></script>
  <style>
  </style>
</head>

<body>
  <svg />
  <script>
    var width = 800;
    var centerSize = 100;
    var answerHeight = 200;
    var radius = 2;
    var margin = {left: 20, top: 20};
    var svg = d3.select('svg')
    	.attr('width', width)
    	.attr('height', answerHeight * 3);
    
    // scales
    var experienceScale = d3.scaleLinear();
    var xScale = d3.scaleLinear()
    	.range([0, (width - centerSize) / 2]);
   	var colorScale = chroma
    	.scale(['#e68fc3', '#7386e8', '#53c3ac']);
    // force simulation
    var simulation = d3.forceSimulation()
//     	.force('x', d3.forceX().x(d => d.focusX))
    	.force('charge', d3.forceManyBody().strength(30))
    	.force('collide', d3.forceCollide().radius(radius))
//     	.force('center', d3.forceCenter().y(0))
    	.stop();
    
    // question
    var frustration = 'What is your biggest frustration with doing data visualization in your job?';
    var experience = 'How many years have you been doing data visualization?';
    var intended = 'Did you set out to work in data visualization or did you fall into it?';
    var question = 'What focus is data visualization in your work?';
    var answerMap = {
      'Data visualization is the focus of my job': '1. primary',
      'Data visualization is an important secondary part of my job but not the focus': '2. secondary',
      'Data visualization is one of several other things I do in my job but not a primary or secondary part of my role': '3. not focus'
    };

// load data
    d3.csv('survey.csv', survey => {
 			var xDomain = d3.extent(survey, d => ++d[experience]);
      experienceScale.domain(xDomain);
      
      // get the data ready
      survey = _.map(survey, (d, i) => {
        var exp = experienceScale(d[experience]);
        return {
          frustrated: !!d[frustration],
          question: answerMap[d[question]],
          x: xScale(exp),
          color: colorScale(exp),
          data: d,
          id: i,
        }
      });
      var data = d3.nest()
      	.key(d => d.frustrated)
      	.key(d => d.question)
        .entries(survey);
      
      // draw the circles
      var frustratedG = svg.selectAll('.frustrated')
      	.data(data).enter().append('g')
      	.classed('frustrated', true)
      	.attr('transform', 'translate(' + [width / 2, 0] + ')');
      
      var questionG = frustratedG.selectAll('.question')
      	.data(d => d.values, d => d.key).enter().append('g')
      	.classed('question', true)
      	.attr('transform', (d, i) =>
        	'translate(' + [0, (i + 0.5) * answerHeight] + ')');
      
      questionG.selectAll('circle')
      	.data(d => {
        	simulation.nodes(d.values);
          _.times(1000, () => simulation.tick());
        
        	return d.values;
        }, d => d.id).enter().append('circle')
      	.attr('cx', d => d.x)
      	.attr('cy', d => d.y)
      	.attr('r', radius)
      	.attr('fill', d => d.color)
    });
  </script>
</body>

Updated missing url https://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js to https://cdn.jsdelivr.net/gh/gka/chroma.js/chroma.min.js

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js

https://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js