Another UI Voronoi

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="https://www.presidency.ucsb.edu/data/popularity.php">https://www.presidency.ucsb.edu/data/popularity.php</a></div>
</body>

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>

Modified http://d3js.org/queue.v1.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js

https://d3js.org/queue.v1.min.js