Built with blockbuilder.org
Last active
August 20, 2019 20:31
-
-
Save mforando/098571bd2eee8dc0f0b17b823dbe131b to your computer and use it in GitHub Desktop.
You Guess It: With Hint
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment