atmccann/index.html

## index.html
<meta charset="utf-8">
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <style>

body {
  font: 12px Helvetica;
}

.bars {
 fill: #000;
 stroke: #fff;
}

#graphic {
  padding-top:50px;
  padding-left: 30px;
  padding-bottom: 25px;
}

 #tooltip{
        padding:0px;
        position: absolute;
        height: auto;
        visibility: hidden;
        z-index: 9999;
        width: 135px;

      }

#date {
  font-weight:bold;
  padding-bottom: 5px;
}

#box{
  padding-bottom: none;
}

#test {
  padding:5px;
}

.words {
}

.gdp {
  font-weight: bold;
}

.gdp-spec {
  font-weight: none;
}


.axis  path,line {
    fill: none;
    stroke: none;
    shape-rendering: crispEdges;
}


.axis text {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
}

#five {
  position:absolute;
  left:10px;
  top:150px;
  background-color: #fff;
  width:25px;
}

#intro {
  position:absolute;
  left:5px;
  top:0px;
}


</style>
  </head>
  <body>

    <div id="graphic"></div>
       <div id="tooltip">
          <span id="date">date</span>
          <br>
         <span id="box" class="gdp"></span> <span class="gdp-spec">GDP growth</span>
          <p id="text" class="words">text</p>
    </div>

<script>

var planets = [{"time":1960,"value":0.00,"text":""},
{"time":1961,"value":4.26,"text":""},
{"time":1962,"value":5.57,"text":""},
{"time":1963,"value":5.24,"text":""},
{"time":1964,"value":6.59,"text":""},
{"time":1965,"value":5.57,"text":""},
{"time":1966,"value":5.86,"text":""},
{"time":1967,"value":4.41,"text":"The oil industry transforms the Middle East"},
{"time":1968,"value":6.07,"text":""},
{"time":1969,"value":5.88,"text":""},
{"time":1970,"value":3.17,"text":""},
{"time":1971,"value":4.05,"text":""},
{"time":1972,"value":5.63,"text":""},
{"time":1973,"value":6.55,"text":""},
{"time":1974,"value":1.82,"text":""},
{"time":1975,"value":0.89,"text":"The U.S. is mired in stagflation—stagnant growth and high inflation"},
{"time":1976,"value":5.13,"text":""},
{"time":1977,"value":4.00,"text":""},
{"time":1978,"value":4.29,"text":""},
{"time":1979,"value":4.04,"text":""},
{"time":1980,"value":1.83,"text":""},
{"time":1981,"value":2.03,"text":""},
{"time":1982,"value":0.40,"text":"A Fed campaign to crush inflation sets off a deep recession; the U.S. jobless rate hits 10.8 percent, its highest since the 1930s"},
{"time":1983,"value":2.62,"text":""},
{"time":1984,"value":4.63,"text":"South America’s debt crisis, combined with high oil prices, puts the brakes on growth"},
{"time":1985,"value":3.77,"text":""},
{"time":1986,"value":3.25,"text":""},
{"time":1987,"value":3.45,"text":""},
{"time":1988,"value":4.60,"text":""},
{"time":1989,"value":3.73,"text":""},
{"time":1990,"value":2.70,"text":""},
{"time":1991,"value":1.31,"text":"The First Gulf War sends oil prices up, aggravating the recessions under way in much of Europe"},
{"time":1992,"value":1.79,"text":""},
{"time":1993,"value":1.56,"text":""},
{"time":1994,"value":3.13,"text":""},
{"time":1995,"value":2.86,"text":""},
{"time":1996,"value":3.24,"text":""},
{"time":1997,"value":3.68,"text":"A currency and debt crisis pushes much of Asia into a sharp downturn"},
{"time":1998,"value":2.43,"text":""},
{"time":1999,"value":3.38,"text":""},
{"time":2000,"value":4.29,"text":"An economic boom and a tax windfall result in a U.S. budget surplus equal to 2.4  percent of GDP, but dot-com stocks crash in March"},
{"time":2001,"value":1.81,"text":""},
{"time":2002,"value":2.10,"text":""},
{"time":2003,"value":2.73,"text":""},
{"time":2004,"value":4.00,"text":""},
{"time":2005,"value":3.51,"text":""},
{"time":2006,"value":4.07,"text":""},
{"time":2007,"value":4.00,"text":""},
{"time":2008,"value":1.39,"text":""},
{"time":2009,"value":-2.16,"text":"The financial crisis sends the world into recession for the first time since GDP has been measured"}];

</script>

<script>

   console.log(planets);

var w = 850,
    h = 200;


 var formatNoComma = d3.format("04d");


var barPadding = 1;

var padding = 12;


var xScale = d3.scale.linear()
                     .domain([1960,2009])
                     .range([padding, w-padding]);

  var yScale = d3.scale.linear()
                  .domain([0,10])
                  .range([padding, h-padding]);


var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom")
                  .ticks(4)
                  .tickFormat(formatNoComma);


var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("right")
                  .ticks(6);


var svg = d3.select("#graphic")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

      svg.append('line')
            .attr('class','referenceLine')
            .attr('x1',0)
            .attr('x2',w)
            .attr('y1',yScale(5))
            .attr('y2',yScale(5))
            .style("stroke-dasharray", ("3, 3"))
            .style("stroke","#AAAAAA")
            .append("div")
            .attr("class","five");


      svg.selectAll("rect")
         .data(planets)
         .enter()
         .append("rect")
         .attr("x", function(d, i) {
          return i * (w / planets.length); })
          .attr("y", function(d) { return h - yScale(Math.max(0, d.value)) - .5 ; })
         .attr("width", w / planets.length - barPadding)
         .attr("height", function(d) { return Math.abs(yScale(d.value) - yScale(0)); })
          .attr("class","bars");


  svg.selectAll("rect")
      .on("mouseover",function(d){
        d3.select(this)
        .transition()
        .duration(100)
        .style("fill", function(d) {if(d.value < 0) {return "#991122"} else{ return "#99bbcc" }; })
        d3.select("#tooltip")
                .style("left", (d3.event.pageX) - 35 + "px")
                .style("top", 40)
                .transition()
                .style("visibility", "visible");
              d3.select("#date")
                .text(d.time );
                d3.select("#box")
                .text( d.value + "%");
              d3.select("#text")
                .text( d.text);
           })

           .on("mouseout", function(d){
              d3.select(this)
                .transition()
                .style("fill", "#000");
              d3.select("#tooltip")
                .transition()
                .style("visibility", "hidden");
           });


</script>
  </body>
</html>
	<meta charset="utf-8">
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<style>

	body {
	font: 12px Helvetica;
	}

	.bars {
	fill: #000;
	stroke: #fff;
	}

	#graphic {
	padding-top:50px;
	padding-left: 30px;
	padding-bottom: 25px;
	}

	#tooltip{
	padding:0px;
	position: absolute;
	height: auto;
	visibility: hidden;
	z-index: 9999;
	width: 135px;

	}

	#date {
	font-weight:bold;
	padding-bottom: 5px;
	}

	#box{
	padding-bottom: none;
	}

	#test {
	padding:5px;
	}

	.words {
	}

	.gdp {
	font-weight: bold;
	}

	.gdp-spec {
	font-weight: none;
	}


	.axis path,line {
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
	}




	.axis text {
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	}

	#five {
	position:absolute;
	left:10px;
	top:150px;
	background-color: #fff;
	width:25px;
	}

	#intro {
	position:absolute;
	left:5px;
	top:0px;
	}


	</style>
	</head>
	<body>

	<div id="graphic"></div>
	<div id="tooltip">
	<span id="date">date</span>
	<br>
	<span id="box" class="gdp"></span> <span class="gdp-spec">GDP growth</span>
	<p id="text" class="words">text</p>
	</div>

	<script>

	var planets = [{"time":1960,"value":0.00,"text":""},
	{"time":1961,"value":4.26,"text":""},
	{"time":1962,"value":5.57,"text":""},
	{"time":1963,"value":5.24,"text":""},
	{"time":1964,"value":6.59,"text":""},
	{"time":1965,"value":5.57,"text":""},
	{"time":1966,"value":5.86,"text":""},
	{"time":1967,"value":4.41,"text":"The oil industry transforms the Middle East"},
	{"time":1968,"value":6.07,"text":""},
	{"time":1969,"value":5.88,"text":""},
	{"time":1970,"value":3.17,"text":""},
	{"time":1971,"value":4.05,"text":""},
	{"time":1972,"value":5.63,"text":""},
	{"time":1973,"value":6.55,"text":""},
	{"time":1974,"value":1.82,"text":""},
	{"time":1975,"value":0.89,"text":"The U.S. is mired in stagflation—stagnant growth and high inflation"},
	{"time":1976,"value":5.13,"text":""},
	{"time":1977,"value":4.00,"text":""},
	{"time":1978,"value":4.29,"text":""},
	{"time":1979,"value":4.04,"text":""},
	{"time":1980,"value":1.83,"text":""},
	{"time":1981,"value":2.03,"text":""},
	{"time":1982,"value":0.40,"text":"A Fed campaign to crush inflation sets off a deep recession; the U.S. jobless rate hits 10.8 percent, its highest since the 1930s"},
	{"time":1983,"value":2.62,"text":""},
	{"time":1984,"value":4.63,"text":"South America’s debt crisis, combined with high oil prices, puts the brakes on growth"},
	{"time":1985,"value":3.77,"text":""},
	{"time":1986,"value":3.25,"text":""},
	{"time":1987,"value":3.45,"text":""},
	{"time":1988,"value":4.60,"text":""},
	{"time":1989,"value":3.73,"text":""},
	{"time":1990,"value":2.70,"text":""},
	{"time":1991,"value":1.31,"text":"The First Gulf War sends oil prices up, aggravating the recessions under way in much of Europe"},
	{"time":1992,"value":1.79,"text":""},
	{"time":1993,"value":1.56,"text":""},
	{"time":1994,"value":3.13,"text":""},
	{"time":1995,"value":2.86,"text":""},
	{"time":1996,"value":3.24,"text":""},
	{"time":1997,"value":3.68,"text":"A currency and debt crisis pushes much of Asia into a sharp downturn"},
	{"time":1998,"value":2.43,"text":""},
	{"time":1999,"value":3.38,"text":""},
	{"time":2000,"value":4.29,"text":"An economic boom and a tax windfall result in a U.S. budget surplus equal to 2.4  percent of GDP, but dot-com stocks crash in March"},
	{"time":2001,"value":1.81,"text":""},
	{"time":2002,"value":2.10,"text":""},
	{"time":2003,"value":2.73,"text":""},
	{"time":2004,"value":4.00,"text":""},
	{"time":2005,"value":3.51,"text":""},
	{"time":2006,"value":4.07,"text":""},
	{"time":2007,"value":4.00,"text":""},
	{"time":2008,"value":1.39,"text":""},
	{"time":2009,"value":-2.16,"text":"The financial crisis sends the world into recession for the first time since GDP has been measured"}];

	</script>

	<script>

	console.log(planets);

	var w = 850,
	h = 200;


	var formatNoComma = d3.format("04d");


	var barPadding = 1;

	var padding = 12;



	var xScale = d3.scale.linear()
	.domain([1960,2009])
	.range([padding, w-padding]);

	var yScale = d3.scale.linear()
	.domain([0,10])
	.range([padding, h-padding]);


	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(4)
	.tickFormat(formatNoComma);


	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("right")
	.ticks(6);


	var svg = d3.select("#graphic")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	svg.append('line')
	.attr('class','referenceLine')
	.attr('x1',0)
	.attr('x2',w)
	.attr('y1',yScale(5))
	.attr('y2',yScale(5))
	.style("stroke-dasharray", ("3, 3"))
	.style("stroke","#AAAAAA")
	.append("div")
	.attr("class","five");


	svg.selectAll("rect")
	.data(planets)
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
	return i * (w / planets.length); })
	.attr("y", function(d) { return h - yScale(Math.max(0, d.value)) - .5 ; })
	.attr("width", w / planets.length - barPadding)
	.attr("height", function(d) { return Math.abs(yScale(d.value) - yScale(0)); })
	.attr("class","bars");




	svg.selectAll("rect")
	.on("mouseover",function(d){
	d3.select(this)
	.transition()
	.duration(100)
	.style("fill", function(d) {if(d.value < 0) {return "#991122"} else{ return "#99bbcc" }; })
	d3.select("#tooltip")
	.style("left", (d3.event.pageX) - 35 + "px")
	.style("top", 40)
	.transition()
	.style("visibility", "visible");
	d3.select("#date")
	.text(d.time );
	d3.select("#box")
	.text( d.value + "%");
	d3.select("#text")
	.text( d.text);
	})

	.on("mouseout", function(d){
	d3.select(this)
	.transition()
	.style("fill", "#000");
	d3.select("#tooltip")
	.transition()
	.style("visibility", "hidden");
	});





	</script>
	</body>
	</html>