Bar chart with pos/neg values

<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>

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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

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