var data=[
     {"month": "2010-19", "to": 5.5,"from": 4.5},
      {"month": "2010-19", "to": 55.5,"from": 54.5},
      {"month": "2010-19", "to": 49.1,"from": 40.9},
     {"month": "2000-09", "to": 7.5,"from": 2.5},
      {"month": "2000-09", "to": 47.5,"from": 42.5},
     {"month": "1990-99", "to": 7,"from": 3},
      {"month": "1990-99", "to": 25.2,"from": 24.8},
      {"month": "1990-99", "to": 35.2,"from": 34.8},
      {"month": "1990-99", "to": 47.6,"from": 42.4},
     {"month": "1980-89", "to": 6.7,"from": 3.3},
      {"month": "1980-89", "to": 48.3,"from": 41.7},
     {"month": "1970-79", "to": 7.4,"from": 2.6},
      {"month": "1970-79", "to": 35.3,"from": 34.7},
      {"month": "1970-79", "to": 47.4,"from": 42.6},
     {"month": "1960-69", "to": 7.1,"from": 2.9},
      {"month": "1960-69", "to": 25.2,"from": 24.8},
      {"month": "1960-69", "to": 35.7,"from": 34.3},
      {"month": "1960-69", "to": 55.2,"from": 54.8},
      {"month": "1960-69", "to": 46.7,"from": 43.3},
     {"month": "1950-59", "to": 6,"from": 4},
      {"month": "1950-59", "to": 15.3,"from": 14.7},
      {"month": "1950-59", "to": 25.3,"from": 24.7},
      {"month": "1950-59", "to": 35.7,"from": 34.3},
      {"month": "1950-59", "to": 55.7,"from": 54.3},
      {"month": "1950-59", "to": 47,"from": 43},
     {"month": "1940-49", "to": 6,"from": 4},
      {"month": "1940-49", "to": 16,"from": 14},
      {"month": "1940-49", "to": 36,"from": 34},
      {"month": "1940-49", "to": 55.5,"from": 54.5},
      {"month": "1940-49", "to": 46.5,"from": 43.5},
     {"month": "1930-39", "to": 6.4,"from": 3.6},
      {"month": "1930-39", "to": 15.7,"from": 14.3},
      {"month": "1930-39", "to": 25.5,"from": 24.5},
      {"month": "1930-39", "to": 35.2,"from": 34.8},
      {"month": "1930-39", "to": 55.2,"from": 54.8},
      {"month": "1930-39", "to": 47,"from": 43},
     {"month": "1920-29", "to": 16.3,"from": 13.7},
      {"month": "1920-29", "to": 36,"from": 34},
      {"month": "1920-29", "to": 56,"from": 54},
      {"month": "1920-29", "to": 46.7,"from": 43.3},
     {"month": "1910-19", "to": 5.7,"from": 4.3},
      {"month": "1910-19", "to": 17.1,"from": 12.9},
      {"month": "1910-19", "to": 35.2,"from": 34.8},
      {"month": "1910-19", "to": 56,"from": 54},
      {"month": "1910-19", "to": 46,"from": 44},
     {"month": "1900-09", "to": 17.6,"from": 12.4},
      {"month": "1900-09", "to": 26.5,"from": 23.5},
      {"month": "1900-09", "to": 35.3,"from": 34.7},
      {"month": "1900-09", "to": 55.3,"from": 54.7},
      {"month": "1900-09", "to": 45.3,"from": 44.7},
     {"month": "1890-99", "to": 16.7,"from": 13.3},
      {"month": "1890-99", "to": 25.8,"from": 24.2},
      {"month": "1890-99", "to": 36.4,"from": 33.6},
      {"month": "1890-99", "to": 55.8,"from": 54.2},
      {"month": "1890-99", "to": 45.3,"from": 44.7},
     {"month": "1880-89", "to": 15.7,"from": 14.3},
      {"month": "1880-89", "to": 38.6,"from": 31.4},
      {"month": "1880-89", "to": 55.7,"from": 54.3},
     {"month": "1870-79", "to": 16.3,"from": 13.7},
      {"month": "1870-79", "to": 25.5,"from": 24.5},
      {"month": "1870-79", "to": 38.2,"from": 31.8},
     {"month": "1860-69", "to": 5.1,"from": 4.9},
      {"month": "1860-69", "to": 16.4,"from": 13.6},
      {"month": "1860-69", "to": 26,"from": 24},
      {"month": "1860-69", "to": 37.4,"from": 32.6},
      {"month": "1860-69", "to": 55.1,"from": 54.9},
     {"month": "1850-59", "to": 27.5,"from": 22.5},
      {"month": "1850-59", "to": 15.9,"from": 14.1},
      {"month": "1850-59", "to": 36.6,"from": 33.4},
     {"month": "1840-49", "to": 5.9,"from": 4.1},
      {"month": "1840-49", "to": 15.5,"from": 14.5},
      {"month": "1840-49", "to": 28.6,"from": 21.4},
     {"month": "1830-39", "to": 5.2,"from": 4.8},
      {"month": "1830-39", "to": 15.2,"from": 14.8},
      {"month": "1830-39", "to": 28.9,"from": 21.1},
      {"month": "1830-39", "to": 35.7,"from": 34.3},
     {"month": "1820-29", "to": 30,"from": 20},
     {"month": "1810-19", "to": 7.1,"from": 2.9},
      {"month": "1810-19", "to": 15.7,"from": 14.3},
      {"month": "1810-19", "to": 26.4,"from": 23.6},
      {"month": "1810-19", "to": 35.7,"from": 34.3},
     {"month": "1800-09", "to": 30,"from": 20},
     {"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([0,60]);

    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);
		});