Interview event / score scatterplot

forked from syntagmatic's block: Exoplanets Scatterplot

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
body {
  margin: 0;
  font-family: arial, sans;
}

.label {
  font-size: 15px;
}

.legend text,
.axis text {
  font-size: 13px;
  fill: #333;
}

.axis path,
.axis line {
  fill: none;
  stroke-width:1px;
  stroke: #777;
}

circle {
  fill-opacity: 0.65;
}

.bubble {
  opacity: 1;
  transition: opacity 0.3s;
}

.bubble text {
  opacity: 0;
  pointer-events: none;
  font-size: 12px;
}

.bubble:hover text {
  opacity: 1;
}

.bubble:hover circle {
  fill-opacity: 1;
}

.legend rect {
  fill-opacity: 0.75;
}

.legend:hover rect {
  fill-opacity: 1;
}
</style>
<body>
<button onclick="toggle()">toggle</button>
</body>

var svg = d3.select("body")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xscale = d3.scaleLog()
  .range([0,width]);

var yscale = d3.scaleLinear()
  .domain([0, 4])
  .range([height,0]);

var radius = d3.scaleSqrt()
  .range([1, 5]);

var xAxis = d3.axisBottom()
  .scale(xscale)
  .tickValues([1,10,100,1000,10000])
  .tickFormat(d3.format(","));

var yAxis = d3.axisLeft()
  .scale(yscale)

var color = d3.scaleLinear()
  .range(["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d"])
  .domain([0, 1, 2, 3, 4]);

rawData = null;
d3.csv("phl_hec_all_confirmed.csv", function(error, gottenData) {
  rawData = gottenData;
  var data = rawData.map(function(d) {
    return {
      y: +d["Average"],
      x: +d["interview events"],
      r: +d["Rounded Average"]
    }
  });

xscale.domain(d3.extent(data, function(d) {
    return d.x;
  })).nice()

radius.domain(d3.extent(data, function(d) {
    return d.r;
  })).nice()

svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .attr("class", "x axis")
    .call(xAxis);

svg.append("g")
    .attr("transform", "translate(0,0)")
    .attr("class", "y axis")
    .call(yAxis);

var group = svg.selectAll("g.bubble")
    .data(data)
    .enter().append("g")
    .attr("class", "bubble")
    .attr("transform", function(d) {
      return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"
    });

group
    .append("circle")
    .attr("r", function(d) { return radius(d.r);  })
    .style("fill", function(d) {
      return color(d.r);
    })

group
    .append("text")
    .attr("x", function(d) { return radius(d.r); })
    .attr("alignment-baseline", "middle")
    .text(function(d) {
      return d["ID"] + ' score ' + d.y;  
    });

svg.append("text")
    .attr("x", 10)
    .attr("y", 10)
    .attr("class", "label")
    .text("Average score");

svg.append("text")
    .attr("x", width)
    .attr("y", height-10)
    .attr("text-anchor", "end")
    .attr("class", "label")
    .text("Interview events (count)");

var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
      .attr("x", width)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

legend.append("text")
      .attr("x", width - 6)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

legend.on("mouseover", function(type) {
      d3.selectAll(".bubble")
        .style("opacity", 0.1)
        .filter(function(d) { return d.r === type; })
        .style("opacity", 1);
    })
    .on("mouseout", function(type) {
      d3.selectAll(".bubble")
        .style("opacity", 1);
    });
});

toggle = function(){
  var data = rawData.map(function(d) {
    return {
      y: +d["% +"],
      x: +d["interview events"],
      r: (Math.round(+d["% +"] * 4) / 4),
    }
  });

xscale.domain(d3.extent(data, function(d) {
    return d.x;
  })).nice()

yscale.domain(d3.extent(data, function(d) {
    return d.y;
  })).nice()

yAxis
    .tickFormat(function(d){return Math.round(d * 100) + '%';})
    .scale(yscale)

d3.select('.y.axis').call(yAxis)
  color.domain([0, 0.25, 0.5, 1]);

var group = svg.selectAll("g.bubble")
    .data(data)
    .transition().duration(1000)
    .attr("transform", function(d) {
      return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"
    })
  group.selectAll('circle').transition().style("fill", function(d) {
      return color(d.r/4);
    })

var legend = d3.selectAll(".legend")
      .data(color.domain())

legend.transition() 
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.selectAll('rect')
    .transition() 
      .style("fill", color);
 
  legend.selectAll("text").remove()

legend.append("text")
      .attr("x", width - 6) 
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

legend.exit().remove()
}

</script>

https://d3js.org/d3.v4.0.0-alpha.35.min.js