var data=[
     {"month": "2010-19", "to": 30,"from": 20},
     {"month": "2000-09", "to": 5.5,"from": 4.5},
      {"month": "2000-09", "to": 29.5,"from": 20.5},
     {"month": "1990-99", "to": 6.2,"from": 3.8},
      {"month": "1990-99", "to": 15.2,"from": 14.8},
      {"month": "1990-99", "to": 28.6,"from": 21.4},
     {"month": "1980-89", "to": 5.4,"from": 4.6},
      {"month": "1980-89", "to": 29.3,"from": 20.7},
     {"month": "1970-79", "to": 6.8,"from": 3.2},
      {"month": "1970-79", "to": 28.2,"from": 21.8},
     {"month": "1960-69", "to": 6.9,"from": 3.1},
      {"month": "1960-69", "to": 28.1,"from": 21.9},
     {"month": "1950-59", "to": 6.8,"from": 3.2},
      {"month": "1950-59", "to": 28.2,"from": 21.8},
     {"month": "1940-49", "to": 8,"from": 2},
      {"month": "1940-49", "to": 27,"from": 23},
     {"month": "1930-39", "to": 6.6,"from": 3.4},
      {"month": "1930-39", "to": 15.2,"from": 14.8},
      {"month": "1930-39", "to": 28.2,"from": 21.8},
     {"month": "1920-29", "to": 8.6,"from": 1.4},
      {"month": "1920-29", "to": 15.4,"from": 14.6},
      {"month": "1920-29", "to": 26.1,"from": 23.9},
     {"month": "1910-19", "to": 8.2,"from": 1.8},
      {"month": "1910-19", "to": 26.7,"from": 23.3},
     {"month": "1900-09", "to": 9.1,"from": 0.9},
      {"month": "1900-09", "to": 15.3,"from": 14.7},
      {"month": "1900-09", "to": 25.6,"from": 24.4},
     {"month": "1890-99", "to": 8.6,"from": 1.4},
      {"month": "1890-99", "to": 15.3,"from": 14.7},
      {"month": "1890-99", "to": 26.1,"from": 23.9},
     {"month": "1880-89", "to": 9.9,"from": 0.1},
      {"month": "1880-89", "to": 15.1,"from": 14.9},
     {"month": "1870-79", "to": 9.8,"from": 0.2},
      {"month": "1870-79", "to": 25.2,"from": 24.8},
     {"month": "1860-69", "to": 25.4,"from": 24.6},
      {"month": "1860-69", "to": 9,"from": 1},
      {"month": "1860-69", "to": 15.5,"from": 14.5},
     {"month": "1850-59", "to": 15.3,"from": 14.7},
      {"month": "1850-59", "to": 9.7,"from": 0.3},
     {"month": "1840-49", "to": 16.4,"from": 13.6},
      {"month": "1840-49", "to": 8.6,"from": 1.4},
     {"month": "1830-39", "to": 7.2,"from": 2.8},
      {"month": "1830-39", "to": 17.7,"from": 12.3},
     {"month": "1820-29", "to": 20,"from": 10},
     {"month": "1810-19", "to": 10,"from": 0},
     {"month": "1800-09", "to": 20,"from": 10},
     {"month": "1790-99", "to": 10,"from": 0}
    ]

    var margin = {top: 50, right: 50, bottom: 50, left: 100},
        width = 900 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var y = d3.scale.ordinal()
        .rangeRoundBands([0, height], .08);

    var x = d3.scale.linear()
        .range([0,width]);

    y.domain(data.map(function(d) { return d.month; }));
    x.domain([d3.min(data,function(d){return d.from;}), d3.max(data,function(d){return d.to;})]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(15);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .append("text")
          .attr("x", width-75)
          .attr("dx", ".71em")
          .attr("dy", "-.71em")
          .text("");

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);

      svg.selectAll(".bar")
          .data(data)
          .enter().append("rect")
          .attr("class", "bar")
          .attr("y", function(d) { return y(d.month); })
          .attr("height", y.rangeBand())
          .attr("x", function(d) { return x(d.from); })
          .attr("width", function(d) { return x(d.to)-x(d.from) });

        // add legend
        var legend = svg.append("g")
          .attr("class", "legend")

       


		var tooltip = d3.select("body")
		.append('div')
		.attr('class', 'tooltip');

		tooltip.append('div')
		.attr('class', 'month');
		tooltip.append('div')
		.attr('class', 'tempRange');

		svg.selectAll(".bar")
		.on('mouseover', function(d) {

			tooltip.select('.month').html("<b>" + d.month + "</b>");
			tooltip.select('.tempRange').html(d.from + "&#8451; to " + d.to + "&#8451;");

			tooltip.style('display', 'block');
			tooltip.style('opacity',2);

		})
		.on('mousemove', function(d) {
			tooltip.style('top', (d3.event.layerY + 10) + 'px')
			.style('left', (d3.event.layerX - 25) + 'px');
		})
		.on('mouseout', function() {
			tooltip.style('display', 'none');
			tooltip.style('opacity',0);
		});