Early/simplifed version of You Draw It: What Got Better or Worse During Obama’s Presidency
d3.drag is pretty great!
forked from 1wheel‘s block: you-draw-it
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 ƒ = d3.f
var sel = d3.select('body').html('')
var c = d3.conventions({
parentSel: sel,
totalWidth: sel.node().offsetWidth,
height: 400,
margin: {left: 50, right: 50, top: 30, bottom: 30}
})
c.svg.append('rect').at({width: c.width, height: c.height, opacity: 0})
c.x.domain([2001, 2015])
c.y.domain([0, 100])
c.xAxis.ticks(4).tickFormat(ƒ())
c.yAxis.ticks(5).tickFormat(d => d + '%')
var area = d3.area().x(ƒ('year', c.x)).y0(ƒ('debt', c.y)).y1(c.height)
var line = d3.area().x(ƒ('year', c.x)).y(ƒ('debt', c.y))
var clipRect = c.svg
.append('clipPath#clip')
.append('rect')
.at({width: c.x(2008) - 2, height: c.height})
var correctSel = c.svg.append('g').attr('clip-path', 'url(#clip)')
correctSel.append('path.area').at({d: area(data)})
correctSel.append('path.line').at({d: line(data)})
yourDataSel = c.svg.append('path.your-line')
c.drawAxis()
yourData = data
.map(function(d){ return {year: d.year, debt: d.debt, defined: 0} })
.filter(function(d){
if (d.year == 2008) d.defined = true
return d.year >= 2008
})
var completed = false
var drag = d3.drag()
.on('drag', function(){
var pos = d3.mouse(this)
var year = clamp(2009, 2016, c.x.invert(pos[0]))
var debt = clamp(0, c.y.domain()[1], c.y.invert(pos[1]))
yourData.forEach(function(d){
if (Math.abs(d.year - year) < .5){
d.debt = debt
d.defined = true
}
})
yourDataSel.at({d: line.defined(ƒ('defined'))(yourData)})
if (!completed && d3.mean(yourData, ƒ('defined')) == 1){
completed = true
clipRect.transition().duration(1000).attr('width', c.x(2015))
}
})
c.svg.call(drag)
function clamp(a, b, c){ return Math.max(a, Math.min(b, c)) }
<!DOCTYPE html>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="style.css">
<body></body>
<script src='d3v4.js'></script>
<script src='_script.js'></script>
svg{
overflow: visible;
}
body{
font-family: monospace;
margin: 0px;
overflow: hidden;
}
.axis{
opacity: .5;
}
.line{
fill: none;
stroke: black;
stroke-width: 3;
}
.area{
fill: #eee;
}
.your-line{
stroke: #f0f;
stroke-width: 3;
stroke-dasharray: 5 5;
}