Another implementation of a voronoi to improve clickability small points.
<!DOCTYPE html>
<head>
<title>Difference Chart</title>
</head>
<meta charset="utf-8">
<style>
svg{
background-color: #eee;
margin-top: 20px;
}
path.domain {
fill: none;
}
g.tick > line {
stroke: white;
stroke-width: 1px;
}
g.tick > text {
text-anchor: middle;
fill: #606060;
}
</style>
<body>
<div id="viz"></div>
<div>Data From: <a href="//www.presidency.ucsb.edu/data/popularity.php">//www.presidency.ucsb.edu/data/popularity.php</a></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="//d3js.org/queue.v1.min.js" type="text/JavaScript"></script>
<script>
var width = 500,
height = 500;
xScale = d3.scale.linear().domain([0,10]).range([40,760]);
yScale = d3.scale.linear().domain([0,10]).range([60,830]);
svg = d3.select('#viz')
.append('svg')
.attr({width: 1500, height: height});
var chartPoints = 50;
queue()
.defer(d3.csv, "reagan_popularity.csv")
.defer(d3.csv, "obama_popularity.csv")
.await(function(error, file1, file2) { createAllCharts(file1, file2); });
function createAllCharts(bush, obama) {
createChart(bush, obama, "approval", d3.select("svg").append("g").attr("transform", "translate(0,0)"))
}
function createChart(bush, obama, type, linechart) {
var bushScale = createScale(bush, type);
var obamaScale = createScale(obama, type);
var s = 86400000;
var latestDay = obamaScale.domain()[0];
var firstObama = obamaScale.domain()[obamaScale.domain().length - 1];
var firstBush = bushScale.domain()[bushScale.domain().length - 1];
var lengthOfOffice = Math.floor(( latestDay - firstObama ) / s);
var stepSize = lengthOfOffice / chartPoints;
var fromStart = [];
var rawPoints = [];
for (var x = 0; x <= chartPoints; x++) {
var obamaStep = new Date(firstObama.getTime() + ((x * stepSize) * s));
var bushStep = new Date(firstBush.getTime() + ((x * stepSize) * s));
var obamaPoint = obamaScale(obamaStep);
var bushPoint = bushScale(bushStep);
fromStart.push({x: x, o: obamaPoint, b: bushPoint});
rawPoints.push({x: x, y: bushPoint, color: "darkred"});
rawPoints.push({x: x, y: obamaPoint, color: "darkblue"});
}
createLineChart(fromStart, linechart, rawPoints)
}
function createScale(data, type) {
var scale = d3.time.scale();
var domain = [];
var range = [];
data.forEach(function(d) {
domain.push(new Date(d.start));
range.push(parseInt(d[type]));
})
scale.domain(domain).range(range);
return scale;
}
function createLineChart(data, linechart, rawPoints) {
var chartExtent = [0,90];
var xScale = d3.scale.linear().domain([0, chartPoints]).range([20,480]);
var yScale = d3.scale.linear().domain(chartExtent).range([480,20]);
var axis = d3.svg.axis().scale(yScale)
.orient("right")
.ticks(8)
.tickSize(-480)
.tickSubdivide(true);
var b_aLine = d3.svg.line()
.x(function(d) {return xScale(d.x)})
.y(function(d) {return yScale(d.b)})
.interpolate("linear");
var o_aLine = d3.svg.line()
.x(function(d,i) {return xScale(d.x)})
.y(function(d) {return yScale(d.o)})
.interpolate("linear");
linechart.append("g").attr("transform", "translate(480,0)").call(axis);
linechart.selectAll("g.tick > text").style("text-anchor", "middle").attr("x", 10)
linechart.append("path")
.style("fill", "none")
.style("stroke-width", "2px")
.style("stroke", "darkred")
.attr("class", "line")
.attr("d", b_aLine(data))
linechart.append("path")
.style("fill", "none")
.style("stroke-width", "2px")
.style("stroke", "darkblue")
.attr("class", "line")
.attr("d", o_aLine(data))
linechart.selectAll("circle")
.data(rawPoints)
.enter()
.append("circle")
.attr("r", 3)
.style("fill", function (d) {return d.color})
.attr("cx", function (d) {return xScale(d.x)})
.attr("cy", function (d) {return yScale(d.y)})
.on("mouseover", function () {
d3.select(this).transition().duration(1000).attr("r", 5)})
voronoi = d3.geom.voronoi();
voronoi
.clipExtent([[0,0],[500,400]])
.x(function (d) {return xScale(d.x)})
.y(function (d) {return yScale(d.y)})
voronoiData = voronoi(rawPoints);
voronoiData = voronoiData.map(function (d,i) {
return {coordinates: d, data: rawPoints[i]}
})
console.log(voronoiData)
linechart.selectAll("path.voronoi")
.data(voronoiData)
.enter()
.append("path")
.attr("class", "voronoi")
.style("stroke", "gold")
.style("stroke-width", "1px")
.style("fill", "yellow")
.style("fill-opacity", 0.5)
.attr("d", function(d) { return "M" + d.coordinates.join("L") + "Z"; })
.on("mouseover", function (d,i) {
d3.selectAll("circle").filter(function (p) {
return p === d.data
})
.transition()
.duration(1000)
.attr("r", 20)
.transition()
.duration(1000)
.attr("r", 3)
});
}
</script>
start,end,approval,disapproval,undecided
12/27/1988,12/29/1988,63,29,8
11/11/1988,11/14/1988,56,35,8
09/09/1988,09/11/1988,53,37,9
07/01/1988,07/07/1988,50,35,14
05/13/1988,05/15/1988,49,37,12
03/08/1988,03/12/1988,51,36,11
03/10/1988,03/10/1988,51,41,6
02/04/1988,02/04/1988,52,36,10
12/15/1987,12/15/1987,51,35,12
12/08/1987,12/11/1987,61,32,6
11/06/1987,11/06/1987,52,38,9
10/23/1987,10/26/1987,50,40,8
10/23/1987,10/26/1987,50,40,8
10/22/1987,10/23/1987,48,38,12
10/07/1987,10/09/1987,47,41,11
09/25/1987,10/04/1987,51,38,10
09/02/1987,09/03/1987,51,36,11
08/24/1987,09/02/1987,48,42,8
07/10/1987,07/13/1987,48,43,8
07/09/1987,07/10/1987,50,39,10
06/01/1987,06/01/1987,45,40,14
05/17/1987,05/18/1987,49,42,8
04/29/1987,04/30/1987,47,44,8
04/10/1987,04/13/1987,48,43,8
03/14/1987,03/18/1987,46,43,9
03/05/1987,03/06/1987,46,45,8
02/27/1987,02/27/1987,40,52,7
01/28/1987,01/29/1987,49,40,9
01/16/1987,01/19/1987,48,42,8
01/07/1987,01/08/1987,52,36,10
12/04/1986,12/05/1986,47,43,8
12/04/1986,12/05/1986,47,43,8
10/01/1986,10/02/1986,64,28,7
09/13/1986,09/17/1986,62,26,10
08/20/1986,08/21/1986,63,28,7
07/31/1986,07/31/1986,59,28,12
07/11/1986,07/14/1986,63,27,8
07/01/1986,07/02/1986,67,22,9
06/09/1986,06/16/1986,67,23,9
04/30/1986,05/01/1986,67,21,10
04/11/1986,04/20/1986,61,28,9
04/17/1986,04/18/1986,67,20,12
04/11/1986,04/14/1986,61,28,9
03/26/1986,03/27/1986,63,24,12
03/04/1986,03/10/1986,63,25,11
01/29/1986,01/30/1986,71,19,8
01/10/1986,01/13/1986,63,27,9
11/19/1985,11/19/1985,66,26,7
11/11/1985,11/18/1985,65,23,10
11/13/1985,11/14/1985,69,23,6
10/11/1985,10/14/1985,62,29,8
08/27/1985,08/28/1985,61,29,9
08/13/1985,08/14/1985,65,25,8
08/01/1985,08/02/1985,62,24,13
07/17/1985,07/18/1985,67,20,11
07/12/1985,07/15/1985,62,28,9
06/20/1985,06/21/1985,65,25,9
06/07/1985,06/10/1985,57,32,9
05/17/1985,05/20/1985,55,36,8
04/26/1985,04/26/1985,54,32,12
04/12/1985,04/15/1985,52,37,10
03/08/1985,03/11/1985,55,37,7
02/28/1985,03/01/1985,57,30,11
02/15/1985,02/18/1985,59,31,9
01/25/1985,01/28/1985,63,28,7
01/11/1985,01/14/1985,61,29,9
01/03/1985,01/04/1985,59,29,11
12/07/1984,12/10/1984,59,31,9
11/30/1984,12/03/1984,61,30,7
11/09/1984,11/12/1984,61,30,8
10/26/1984,10/29/1984,58,32,8
09/28/1984,10/01/1984,53,35,10
09/21/1984,09/24/1984,56,36,6
09/07/1984,09/09/1984,56,35,7
08/10/1984,08/12/1984,53,38,8
07/27/1984,07/30/1984,51,36,11
07/13/1984,07/16/1984,55,34,9
07/12/1984,07/13/1984,51,38,10
07/06/1984,07/09/1984,53,35,10
06/29/1984,07/02/1984,53,36,10
06/22/1984,06/22/1984,54,36,9
06/01/1984,06/03/1984,52,36,11
05/18/1984,05/21/1984,53,38,8
05/09/1984,05/10/1984,49,38,11
04/25/1984,04/26/1984,48,38,13
04/06/1984,04/09/1984,54,36,9
03/16/1984,03/19/1984,53,38,7
03/01/1984,03/02/1984,52,35,12
02/10/1984,02/13/1984,55,35,8
01/30/1984,02/06/1984,52,37,9
01/27/1984,01/30/1984,55,36,8
01/13/1984,01/16/1984,52,37,9
12/09/1983,12/12/1983,53,37,8
11/18/1983,11/21/1983,52,37,10
10/07/1983,10/14/1983,45,43,10
09/13/1983,09/13/1983,47,42,10
09/09/1983,09/12/1983,47,41,10
08/19/1983,08/22/1983,42,46,11
08/12/1983,08/15/1983,43,44,11
08/05/1983,08/08/1983,43,46,9
07/29/1983,08/02/1983,44,42,13
07/22/1983,07/25/1983,42,46,10
06/24/1983,06/27/1983,46,43,9
06/10/1983,06/13/1983,43,45,11
05/20/1983,05/23/1983,45,42,11
05/13/1983,05/16/1983,43,45,11
04/29/1983,05/02/1983,42,46,10
04/15/1983,04/18/1983,40,49,10
03/11/1983,03/14/1983,40,49,10
01/28/1983,01/31/1983,35,56,8
01/21/1983,01/24/1983,37,52,9
01/11/1983,01/11/1983,36,54,9
12/10/1982,12/13/1982,41,50,8
11/19/1982,11/22/1982,43,46,9
11/05/1982,11/08/1982,42,47,10
10/15/1982,10/18/1982,41,47,10
09/17/1982,09/20/1982,42,47,9
08/24/1982,08/24/1982,41,45,12
08/13/1982,08/16/1982,40,48,10
07/30/1982,08/02/1982,40,46,12
07/23/1982,07/26/1982,42,46,11
06/25/1982,06/28/1982,44,45,10
06/11/1982,06/14/1982,44,45,9
05/14/1982,05/17/1982,44,44,10
04/30/1982,05/03/1982,44,45,9
04/23/1982,04/26/1982,43,47,9
04/02/1982,04/05/1982,45,46,8
03/12/1982,03/15/1982,46,44,9
02/05/1982,02/08/1982,46,43,10
01/22/1982,01/25/1982,47,41,11
01/05/1982,01/05/1982,49,39,11
12/11/1981,12/14/1981,48,41,10
11/20/1981,11/23/1981,54,36,8
11/13/1981,11/16/1981,48,40,10
10/30/1981,11/03/1981,54,34,11
09/18/1981,09/21/1981,51,37,10
08/14/1981,08/17/1981,59,29,10
07/31/1981,08/03/1981,59,28,12
07/24/1981,07/27/1981,55,30,13
07/17/1981,07/20/1981,59,29,10
06/26/1981,06/29/1981,57,30,12
06/16/1981,06/16/1981,58,28,12
06/05/1981,06/08/1981,58,28,12
05/08/1981,05/11/1981,68,21,11
04/10/1981,04/13/1981,66,19,13
03/31/1981,03/31/1981,66,18,15
02/13/1981,02/16/1981,55,17,26
01/30/1981,02/02/1981,51,13,36