You Guess It: With Hint

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .guesspath{
			fill:none;
		}
    
  </style>
</head>
<div id="youguess">
	<svg>
  </svg>
  <br><br>
  <button style="margin-left:30px" onclick="handleGuess()">Submit Guess</button>
</div>
<body>
  <script>
    
    //forked from Adam Pearce's https://bl.ocks.org/1wheel/07d9040c3422dac16bd5be741433ff1e
    
    var data = [
    {"year": 2001,    "debt": 31.4},
    {"year": 2002,    "debt": 32.6},
    {"year": 2003,    "debt": 34.5},
    {"year": 2004,    "debt": 35.5},
    {"year": 2005,    "debt": 35.6},
    {"year": 2006,    "debt": 35.3},
    {"year": 2007,    "debt": 35.2},
    {"year": 2008,    "debt": 39.3},
    {"year": 2009,    "debt": 52.3},
    {"year": 2010,    "debt": 60.9},
    {"year": 2011,    "debt": 65.9},
    {"year": 2012,    "debt": 70.4},
    {"year": 2013,    "debt": 72.6},
    {"year": 2014,    "debt": 74.4},
    {"year": 2015,    "debt": 73.6},
  ]
		
    var yeartoshow = 2006;
    
    var height = 300; 
    var width = 500;
    var margin = {"top":20,"left":30,"right":20,"bottom":25}
    
    var svg = d3.select("#youguess").select("svg")
    	.attr("width",width + margin.left + margin.right)
    	.attr("height",height + margin.top + margin.bottom)
   	
    var xScale = d3.scaleLinear()
    	.range([0,width])
    	.domain(d3.extent(data,function(d){return d.year}))
    
    var yScale = d3.scaleLinear()
    	.range([height,0])
    	.domain([0,100])
    
    var chart = svg.append("g")
    		.attr("transform","translate(" + margin.left + "," + margin.top + ")")
		
    var xAxis = chart.append("g")
    	.attr("transform","translate(0," + height + ")")
    	.call(d3.axisBottom(xScale).tickFormat(d3.format('.0f')))
   
    var yAxis = chart.append("g")
    	.call(d3.axisLeft(yScale))
     
    var hintNode = chart.append("circle").datum(data.filter(function(d){return d.year == yeartoshow})[0])
    	.attr("cx",function(d){return xScale(d.year)})
    	.attr("cy",function(d){return yScale(d.debt)})
    	.attr("r",5)
    	.style("fill","red")
   	
    var guessPath = chart.append("path")
    	.style("stroke","red")
    	.style("stroke-dasharray",4)
    	.attr("class","guesspath")
    
    var line = d3.line()
    	.x(function(d){return xScale(d.year)})
			.y(function(d){return yScale(d.debt)})
    	.curve(d3.curveCatmullRom)
	
    //create a shell with the original data, to be replaced using user data. 
    var userData = data
        .map(function(d){ return {year: d.year, debt: d.debt, defined: 0} })
        .filter(function(d){
          if (d.year == yeartoshow){
            	//by default, give the user one data point as a hint.  Dont filter out. 
            	d.defined = true
              return true
          }
          else{
            	//for all other data points... 
            	return d.year != yeartoshow
          }  
        })
    
    var drag = d3.drag()
      .on('drag', function(){
       
        //figure out the x-y value based on mouse location of drag. 
        var pos = d3.mouse(this)
        var year = clamp(2001, 2016, xScale.invert(pos[0]))
        var debt = clamp(0, yScale.domain()[1], yScale.invert(pos[1]))
        
			 
        userData.forEach(function(d){
          	//dont allow the user to update the 'preshown' or hint year.  
          	if(d.year != yeartoshow){
              if (Math.abs(d.year - year) < .5){
                    d.debt = debt
                    d.defined = true
                }
            }
          	else{
              d.defined = true;
              
            }
        })
        
        //update line for guess. 
				guessPath.datum(userData.filter(function(d){return d.defined}))
        	.attr("d",line)
        
				/*
        if (!completed && d3.mean(yourData, Æ’('defined')) == 1){
          completed = true
          clipRect.transition().duration(1000).attr('width', c.x(2015))
        }
        */
        
      })

svg.call(drag)
    
    function handleGuess(){
      	
      	//check if guess is complete. 
      	var guesses = userData.filter(function(d){return d.defined})
        
        if(guesses.length == userData.length){
          
          
        }
      	else{
          	console.log('missing data')
        }
      
      	d3.select("svg").style("background","red")
        
    }
    
    //clamp value at min/max value for the chart. 
    function clamp(a, b, c){ return Math.max(a, Math.min(b, c)) }
    
  </script>
</body>

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