Guess The Ratio

Using d3-drag for an interactive "Make a guess" connected dot plot. As you move the dots along the line the colour also changes based on a colour scale. At the same time, the ratio between the different pay figures is visualised. Clicking reset returns the dots to their original positions.

forked from tlfrd's block: Draggable Connected Dot Plot

TODO:

When the user submits their guess the real ratio and range of salary should be revealed. This connected dot plot should be added to the others and sorted into the correct position.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>  
    .grid-line {
      stroke: black;
      opacity: 0.2;
    }
    
    .dot {
      fill: white;
      stroke: black;
    }
    
    circle {
      stroke: black;
    }
    
    .active {
      stroke-dasharray: 5, 5;
    }
    
    body {
      font-family: sans-serif;
      margin: 0px;
    }
    
    text {
      font-size: 16px;
    }
    
    .ratio text {
      font-size: 12px;
    }
    
    a {
      position: absolute;
      top: 20px;
      left: 20px;
    }
    
    .ratio-single {
      fill: url(#temperature-gradient);
    }
  </style>
</head>

<body>
  <a href="#" class="reset-btn">Reset</a>
  <script>
    var margin = {top: 130, right: 30, bottom: 0, left: 30};
    
    var width = 960 - margin.left - margin.right,
    		height = 500 - margin.top - margin.bottom;
    
    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 salaryRange = [0, 500000];
    
    var colourMin = "yellow",
        colourMid = "orange",
        colourMax = "red";
    
    var radius = 20,
    	strokewidth = 1;
    
    var graphHeight = 100;
   	var graphRatioMargin = 75;
 		
    var ratioHeight = 25;
    var singleSalarySize = 30,
        salaryPadding = 5;
    
    var legendXPos = 625,
    	legendYPos = -90,
    	legendPadding = 110;
    
    var x = d3.scaleLinear()
    	.domain(salaryRange)
    	.range([0, width])
    	.nice();
    
    var xAxis = d3.axisTop().scale(x)
    	.tickFormat(function(d, i) {
        if (i == 0) {
          return "£0"
        } else {
        	return d3.format(".2s")(d); 
        }
      });
    
    var te = d3.easeCubic;
    
    var colourMinMid = d3.scaleLinear()
    	.domain([salaryRange[0], salaryRange[1] / 2])
    	.range([colourMin, colourMid]);
    
    var colourMidMax = d3.scaleLinear()
    	.domain([salaryRange[1] / 2, salaryRange[1]])
    	.range([colourMid, colourMax]);
    
    var colour = function(value) {
      if (value <= salaryRange[1] / 2) {
        return colourMinMid(value);
      } else {
        return colourMidMax(value);
      }
    };
    
    var dots = [
      {
        type: "min",
        value: 30000,
        colour: colour(50000),
        y: graphHeight / 2
      },
      { 
        type: "median",
        value: 70000,
        colour: colour(100000),
        y: graphHeight / 2
      },
      {
        type: "max",
        value: 250000,
        colour: colour(220000),
        y: graphHeight / 2
    	}];
    
    var linearGradient = svg.append("linearGradient")
      .attr("id", "temperature-gradient")
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", 0).attr("y1", 0)
      .attr("x2", width).attr("y2", 0)
    .selectAll("stop")
      .data([
        { colour: colourMin },
        { colour: colourMid },
        { colour: colourMax },
      ])
    .enter().append("stop")
      .attr("offset", function(d, i) { return i * 50 + "%" })
      .attr("stop-color", function(d) { return d.colour; });
    
    var dotsoriginal = JSON.parse(JSON.stringify(dots));
    
    var dragbehaviour = d3.drag()
    	.on("start", dragstarted)
    	.on("drag", dragged)
    	.on("end", dragended);		
     
    var xAxisGroup = svg.append("g")
    	.attr("class", "axis-group");
    
    var xAxisLine = xAxisGroup.append("g")
    	.call(xAxis.ticks());
    
    var gridLineGenerator = d3.line();
    var axisLinePath = function(d) {
      return gridLineGenerator([[x(d) + 0.5, 0], [x(d) + 0.5, graphHeight]]);
    };
    
   	var axisLines = xAxisGroup.selectAll("path")
    	.data(x.ticks().concat(0))
    .enter().append("path")
    	.attr("class", "grid-line")
    	.attr("d", axisLinePath);
      
    var lineGenerator = d3.line()
    	.x(function(d) { return x(d.value) + (d.type == "min" ? radius : -radius)})
    	.y(function(d) { return d.y });
    
    var pathString = function() { return lineGenerator(dots) };
    
    var interactiveLineGroup = svg.append("g")
    	.attr("class", "interactive-line");
    
    var fullLine = interactiveLineGroup.append("line")
    	.attr("class", "background-line")
			.attr("x1", 0)
      .attr("x2", width)
    	.attr("y1", graphHeight / 2)
    	.attr("y2", graphHeight / 2)
    	.style("stroke", "black")
    	.style("stroke-opacity", 0.15)
    	.style("stroke-width", strokewidth * 5);
    
    var line = interactiveLineGroup.append("path")
    	.attr("class", "line")
    	.attr("d", pathString)
    	.attr("stroke", "black")
    	.style("stroke-width", strokewidth * 5)
    	.style("stroke", "url(#temperature-gradient)");
    
    // Create group for cirles
    var circles = interactiveLineGroup.append("g")
    	.attr("class", "circles")
    .selectAll("g")
    	.data(dots)
    .enter().append("g")
    	.attr("class", "circle-container");
    
		circles.append("circle")
    	.attr("class", "dot")
    	.attr("cx", function(d) { return x(d.value); })
    	.attr("cy", function(d) { return d.y; })
    	.attr("r", radius)
    	.style("fill", function(d) { return d.colour })
    	.style("stroke-width", strokewidth)
    	.call(dragbehaviour);
    
    // Add dots with larger radius to improve movement on mo
		circles.append("circle")
    	.attr("class", "touch-dot")
    	.attr("cx", function(d) { return x(d.value); })
    	.attr("cy", function(d) { return d.y; })
    	.attr("r", radius * 2)
    	.attr("fill", "white")
    	.attr("opacity", 0)
    	.call(dragbehaviour);
    
    // Create group for legend
    var legend = svg.append("g")
      .attr("class", "legend")
      .attr("transform", function(d) {
        return "translate(" + legendXPos + ", " + legendYPos + ")";
      });
    
    // Add text to legend
   	var legendText = legend.selectAll("text")
   		.data(dots)
    .enter().append("text")
      .attr("text-anchor", "start")
    	.attr("x", function(d, i) { return i * legendPadding; })
      .text(function(d) {
      	return "£" + d3.format(".2s")(d.value);
      });
    
    var legendDots = legend.selectAll("circle")
   		.data(dots)
    .enter().append("circle")
    	.attr("cx", function(d, i) { return i * legendPadding - 30; })
    	.attr("cy", -5)
    	.attr("r", radius * 3 / 4)
    	.attr("fill", function(d) { return d.colour })
    	.attr("stroke-width", strokewidth);
    
    var ratio = svg.append("g")
    	.attr("class", "ratio")
    	.attr("transform", "translate(0," + (graphHeight + graphRatioMargin) + ")");
    
    // draw min max ratio
    
    var minMaxRatio = ratio.append("g")
    	.attr("class", "minmax");
    minMaxRatio.selectAll("rect")
    	.data(function() {
      	var minMaxRatio = dots[2].value / dots[0].value;
      	return d3.range(Math.round(minMaxRatio));
    	})
    .enter().append("rect")
    	.attr("class", "ratio-single")
    	.attr("x", function(d) {
      	return d * singleSalarySize;
    	})
    	.attr("width", singleSalarySize - salaryPadding)
    	.attr("height", ratioHeight);
    
    ratio.append("text")
    	.attr("y", 0)
    	.attr("dy", -10)
    	.text("Ratio between Lowest & Highest")
    
    // draw min max ratio (refactor so these are both done in a single function)
    
    var midMaxRatio = ratio.append("g")
    	.attr("class", "midmax");
    midMaxRatio.selectAll("rect")
    	.data(function() {
      	var midMaxRatio = dots[2].value / dots[1].value;
      	return d3.range(Math.round(midMaxRatio));
    	})
    .enter().append("rect")
    	.attr("class", "ratio-single")
    	.attr("y", ratioHeight * 3)
    	.attr("x", function(d) {
      	return d * singleSalarySize;
    	})
    	.attr("width", singleSalarySize - salaryPadding)
    	.attr("height", ratioHeight);
    
    ratio.append("text")
    	.attr("y", ratioHeight * 3)
    	.attr("dy", -10)
    	.text("Ratio between Median & Highest")
            
    function dragstarted(d) {
      var parentNode = d3.select(this.parentNode);
      parentNode.selectAll("circle").classed("active", true);
    }
    
    function dragged(d) {
      var minX, maxX;
      
      if (d.type == "min") {
        minX = 0;
        maxX = x(dots[1].value) - (radius * 0) - strokewidth;
      } else if (d.type == "median") {
        minX = x(dots[0].value) + (radius * 0) + strokewidth;
        maxX = x(dots[2].value) - (radius * 0) - strokewidth;
      } else {
        minX = x(dots[1].value) + (radius * 0) + strokewidth;
        maxX = width;
      }
      
      var parentNode = d3.select(this.parentNode);
      var xValue = Math.max(minX, Math.min(maxX, d3.event.x));
      
      parentNode.selectAll("circle")
      	.attr("cx", xValue)
      	.style("fill", colour(x.invert(xValue)));
      
      d.value = x.invert(Math.max(minX, Math.min(maxX, d3.event.x)));
      
      var dotData = d3.select(this.parentNode.parentNode).selectAll(".dot").data()
      
      // Enter, update, exit pattern for min max ratio
      var minMaxSelection = minMaxRatio.selectAll("rect")
        .data(function() {
          var minMaxRatio = dotData[2].value / Math.max(1100, dotData[0].value);
      		minMaxRatio = Math.min(minMaxRatio, (width / singleSalarySize) - 1);
          return d3.range(Math.round(minMaxRatio));
        });
            
      minMaxSelection
        .enter().append("rect")
          .attr("class", "ratio-single")
          .attr("x", function(d) {
            return d * singleSalarySize;
          })
          .attr("width", singleSalarySize - salaryPadding)
          .attr("height", ratioHeight)
      		.attr("opacity", 0)
      		.transition()
      		.attr("opacity", 1);
      
     	minMaxSelection
      	.exit().remove();
      
      // Enter, update, exit pattern for mid max ratio
      var midMaxSelection = midMaxRatio.selectAll("rect")
        .data(function() {
          var midMaxRatio = dotData[2].value / Math.max(1100, dotData[1].value);
      		midMaxRatio = Math.min(midMaxRatio, (width / singleSalarySize) - 1);
          return d3.range(Math.round(midMaxRatio));
        });
                  
      midMaxSelection
        .enter().append("rect")
          .attr("class", "ratio-single")
    			.attr("y", ratioHeight * 3)
          .attr("x", function(d) {
            return d * singleSalarySize;
          })
          .attr("width", singleSalarySize - salaryPadding)
          .attr("height", ratioHeight)
          .attr("opacity", 0)
      		.transition()
      		.attr("opacity", 1);
      
     	midMaxSelection
      	.exit().remove();
      
      line.attr("d", pathString);  
      
      legendText
      	.text(function(d) {
        	if (d.value < 100000) {
            return "£" + d3.format(".2s")(d.value);
          } else {
        		return "£" + d3.format(".3s")(d.value);
          }
      	});
      
      legendDots
      	.style("fill", function(d) {
        	return colour(d.value);
      	})
    }
    
    function dragended(d) {
      var parentNode = d3.select(this.parentNode);
      parentNode.selectAll("circle").classed("active", false);
    }
    
    d3.select(".reset-btn")
    	.on("click", function(d) {
      	d3.event.preventDefault();
      	dots = dotsoriginal;
      	dotsoriginal = JSON.parse(JSON.stringify(dots));
      	
     	 	line.transition()
        	.duration(500)
        	.ease(te)
          .attr("d", pathString); 
      
      	circles.data(dots);
      
      	circles.transition()
        	.duration(500)
        	.ease(te)
        	.select(".dot")
        	.attr("cx", function(d) { return x(d.value); })
      		.style("fill", function(d) { return colour(d.value); });
        
        circles.transition()
        	.duration(500)
        	.ease(te)
        	.select(".touch-dot")
        	.attr("cx", function(d) { return x(d.value); }); 
      	
      	legendText.data(dots).transition()
        	.duration(500)
        	.ease(te)
          .text(function(d) {
            if (d.value < 100000) {
              return "£" + d3.format(".2s")(d.value);
            } else {
              return "£" + d3.format(".3s")(d.value);
            }
          });
      
      	legendDots.data(dots).transition()
          .duration(500)
        	.ease(te)
          .style("fill", function(d) {
            return colour(d.value);
          });
      
      
        // Enter, update, exit pattern for min max ratio
      	// REFACTOR INTO SINGLE FUNCTION
      	var minMaxSelection = minMaxRatio.selectAll("rect")
        .data(function() {
          var minMaxRatio = dots[2].value / Math.max(1100, dots[0].value);
      		minMaxRatio = Math.min(minMaxRatio, (width / singleSalarySize) - 1);
          return d3.range(Math.round(minMaxRatio));
        });
            
        minMaxSelection
          .enter().append("rect")
            .attr("class", "ratio-single")
            .attr("x", function(d) {
              return d * singleSalarySize;
            })
            .attr("width", singleSalarySize - salaryPadding)
            .attr("height", ratioHeight)
            .attr("opacity", 0)
        	  .transition()
        		.delay(function(d, i) { return 50 * i })
        		.attr("opacity", 1);

minMaxSelection
          .exit()
          .transition()
        	.delay(function(d, i) { return 1000 / i })
          .remove();
      
        // Enter, update, exit pattern for mid max ratio
        var midMaxSelection = midMaxRatio.selectAll("rect")
          .data(function() {
            var midMaxRatio = dots[2].value / Math.max(1100, dots[1].value);
            midMaxRatio = Math.min(midMaxRatio, (width / singleSalarySize) - 1);
            return d3.range(Math.round(midMaxRatio));
          });
                  
        midMaxSelection
          .enter().append("rect")
            .attr("class", "ratio-single")
            .attr("y", ratioHeight * 3)
            .attr("x", function(d) {
              return d * singleSalarySize;
            })
            .attr("width", singleSalarySize - salaryPadding)
            .attr("height", ratioHeight)
        		.attr("opacity", 0)
        	  .transition()
        		.delay(function(d, i) { return 50 * i })
        		.attr("opacity", 1);

midMaxSelection
          .exit()
        	.transition()
        	.delay(function(d, i) { return 1000 / i })
        	.attr("opacity", 0)
          .remove();

});

</script>
</body>

https://d3js.org/d3.v4.min.js