Skip to content

Instantly share code, notes, and snippets.

@martinjc

martinjc/.block

Last active March 20, 2018 20:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save martinjc/980a2fcdbf0653c301dc2fb52750b0d9 to your computer and use it in GitHub Desktop.
Save martinjc/980a2fcdbf0653c301dc2fb52750b0d9 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-line graph with non-overlapping labels and voronoi hover interaction
Raw
.block
license: MIT
border: no
Raw
README.md

Multi-line path using D3, with relaxation on labels to avoid overlapping, and voronoi cells around points for hover interaction.

Raw
data.csv
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
Raw
index.html
<!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>
Raw
script.js
var width = 900;
var height = 500;
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("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function(d) {
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)");
});
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.timeDay))
.selectAll('text')
.attr("y", 0)
.attr("x", 9)
.attr("dy", "1.5em")
.style("text-anchor", "end")
.attr("transform", "rotate(-30)");
})
Raw
style.css
html, body, #vis {
height: 100%;
margin: 0;
}
.focus text {
text-anchor: middle;
font-family: sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment