Built with blockbuilder.org
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.rawgit.com/gka/chroma.js/master/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>