Skip to content

Instantly share code, notes, and snippets.

@martinjc
Last active Apr 23, 2018
Embed
What would you like to do?
Multi-line graph
license: MIT
border: no

Multi-line path using D3, with label relaxation to avoid overlapping. Data is response rate for a survey, for different MSc programmes.

date MSc Advanced Computer Science MSc Advanced Computer Science with Placement MSc Computing MSc Computing with Placement MSc Computing and IT Management MSc Computing and IT Management with Placement MSc Information Security and Privacy MSc Data Science and Analytics MSc Computational and Data Journalism
2018-02-12 0 0 0 0 0 0 0 0 0
2018-02-19 0 0 5.26 0 0 0 0 2.56 0
2018-02-26 0 0 5.26 5.88 0 9.09 0 2.56 7.14
2018-03-05 0 5.88 13.16 5.88 0 9.09 5.88 7.69 14.29
2018-03-12 6.25 11.76 21.05 11.76 8.33 18.18 29.41 17.95 35.71
2018-03-19 6.25 29.41 31.58 29.41 16.67 18.18 47.06 23.08 35.71
2018-03-26 6.25 35.29 39.47 35.29 16.67 27.27 58.82 30.77 50
2018-04-02 18.75 41.18 44.74 35.29 20.83 45.45 58.82 30.77 50
2018-04-09 18.75 41.18 44.74 41.18 20.83 45.45 58.82 33.33 50
2018-04-16 18.75 41.18 44.74 41.18 20.83 45.45 58.82 35.9 50
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>PTES Response Rates by Programme - 1718</title>
</head>
<body>
<div id="vis"></div>
<script src="script.js"></script>
</body>
</html>
/** Are you taking CMT212 by any chance? */
var width = 1100;
var height = 700;
var margin = {
top: 40,
left: 60,
bottom: 40,
right: 300
};
var parseTime = d3.timeParse("%Y-%m-%d");
var line = d3.line()
.curve(d3.curveMonotoneX)
.x(function(d) {
return x_scale(d.date);
})
.y(function(d) {
return y_scale(d.response);
});
var svg = d3.select('#vis')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;
var x_scale = d3.scaleTime()
.range([0, width]);
var y_scale = d3.scaleLinear()
.range([height, 0]);
var colour_scale = d3.scaleOrdinal(d3.schemeCategory10);
var voronoi = d3.voronoi()
.x(function(d) {
return x_scale(d.date);
})
.y(function(d) {
return y_scale(d.response);
})
.extent([
[-margin.left, -margin.top],
[width + margin.right, height + margin.bottom]
]);
svg.append("g")
.attr("class", "axis x")
.attr("transform", "translate(0," + height + ")");
svg.append("g")
.attr("class", "axis y")
function relax(data) {
var spacing = 16;
var dy = 2;
var repeat = false;
var count = 0;
data.forEach(function(dA, i) {
var yA = dA.labelY;
data.forEach(function(dB, j) {
var yB = dB.labelY;
if (i === j) {
return;
}
diff = yA - yB;
if (Math.abs(diff) > spacing) {
return;
}
repeat = true;
magnitude = diff > 0 ? 1 : -1;
adjust = magnitude * dy;
dA.labelY = +yA + adjust;
dB.labelY = +yB - adjust;
dB.labelY = dB.labelY > height ? height : dB.labelY
dA.labelY = dA.labelY > height ? height : dA.labelY
})
})
if (repeat) {
relax(data);
}
}
d3.csv('data.csv', function(d, i, columns) {
d.date = parseTime(d.date);
for (var i = 1; i < columns.length; ++i) {
d[columns[i]] = +d[columns[i]];
}
return d;
}, function(data) {
var responses = data.columns.slice(1)
.map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {
date: d.date,
response: d[id]
};
})
};
});
x_scale.domain(d3.extent(data, function(d) {
return d.date;
}));
y_scale.domain([
d3.min(responses, function(r) {
return d3.min(r.values, function(d) {
return d.response;
});
}),
d3.max(responses, function(r) {
return d3.max(r.values, function(d) {
return d.response;
});
})
]);
responses.forEach(function(r) {
r.labelY = y_scale(r.values[r.values.length - 1].response);
});
relax(responses);
colour_scale.domain(responses.map(function(c) {
return c.id;
}));
var response = svg.selectAll(".response")
.data(responses)
.enter()
.append("g")
.attr("class", "response");
response.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.attr("stroke", function(d) {
return colour_scale(d.id);
})
.attr("stroke-width", "3px")
.attr("fill", "none");
response.append("text")
.datum(function(d) {
return {
id: d.id,
value: d.values[d.values.length - 1],
labelY: d.labelY
};
})
.attr("transform", function(d) {
return "translate(" + (x_scale(d.value.date) + 30) + "," + d.labelY + ")";
})
.attr("x", 3)
.attr("dy", "0.35em")
.attr("class", "label")
.style("font", "10px sans-serif")
.text(function(d) {
return d.id;
});
var data = d3.merge(responses.map(function(d) {
return d.values;
}));
var v = svg.selectAll(".voronoi")
.data(voronoi.polygons(data));
v.enter()
.append("path")
.attr("d", function(d, i) {
return d ? "M" + d.join("L") + "Z" : null;
})
//.style("stroke", "#2074A0") //If you want to look at the cells
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseenter", function(d) {
console.log(d3.mouse(svg));
focus.attr("transform", "translate(" + x_scale(d.data.date) + "," + y_scale(d.data.response) + ")");
focus.select("text")
.text(d.data.response + "%");
})
.on("mouseout", function(d) {
focus.attr("transform", "translate(-100,-100)");
}, true);
var markers = response.append('g')
.attr('data-id', function(d) {
return d.id;
})
.selectAll('circle')
.data(function(d) {
return d.values;
});
var new_markers = markers
.enter()
.append('circle')
.attr('cx', function(d) {
return x_scale(d.date);
})
.attr('cy', function(d) {
return y_scale(d.response);
})
.attr('r', '5')
.attr('fill', function(d) {
return colour_scale(d3.select(this.parentNode)
.attr('data-id'));
})
.attr('opacity', 0.8)
.attr('stroke', '#222')
.attr('stroke-width', '0.5px');
var focus = svg.append("g")
.attr("transform", "translate(-100,-100)")
.attr("class", "focus");
focus.append("circle")
.attr("r", 3.5);
focus.append("text")
.attr("y", -10);
var lines = svg.selectAll(".lines")
.data(responses);
lines.enter()
.append("line")
.attr("x1", function(d) {
return x_scale(d.values[d.values.length - 1].date);
})
.attr("y1", function(d) {
return y_scale(d.values[d.values.length - 1].response);
})
.attr("x2", function(d) {
return x_scale(d.values[d.values.length - 1].date) + 30;
})
.attr("y2", function(d) {
return d.labelY;
})
.attr('stroke', 'black')
.attr('stroke-width', '0.5px');
svg.select('.y.axis')
.call(d3.axisLeft(y_scale))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Response Rate, %");
svg.select('.x.axis .tick text')
svg.select('.x.axis')
.call(d3.axisBottom(x_scale)
.ticks(d3.timeWeek))
.selectAll('text')
.attr("y", 0)
.attr("x", 9)
.attr("dy", "1.5em")
.style("text-anchor", "end")
.attr("transform", "rotate(-30)");
})
html, body, #vis {
height: 100%;
margin: 0;
}
.focus text {
text-anchor: middle;
font-family: sans-serif;
}
svg text {
pointer-events: none;
}
svg circle {
pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment