block by emeeks 037488ed37f0e1cbfe32

Another UI Voronoi

Full Screen

Another implementation of a voronoi to improve clickability small points.

index.html


<!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>

reagan_popularity.csv

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