mforando/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>
	<!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>