D3OG

All examples By author By category About

fotisz

Full window Github gist

Recessions and Recoveries

forked from CSleeman's block: Recessions and Recoveries

<!DOCTYPE html>

<head>

body {
  font-family: Arial, Helvetica, sans-serif;  
  font-size: 10px;
  color: #718A94;
  background-color: #377590;
}

#container {
    position:relative;
    width: 1000px;
    margin: 20px auto;  
    background-color: #133C4E;
}

#heading {
   font-size: 30px;
   padding: 40px 70px 0px 70px;
   position:relative;
   margin: 0px;  
   background-color: #133C4E;
   color: #EC5F4B;
}

#subheading {
   font-size: 20px;
   padding: 10px 70px;
   position:relative;
   margin: 40px 0px 0px 0px;  
   color: #EC5F4B;
}

#description {
   font-size: 14px;
   padding: 0px 90px 0px 70px;
   position:relative;
   margin: 0px; 
}

#notes {
   font-size: 10px;
   padding: 50px 90px 30px 70px;
   color: #718A94;
   position:relative;
   margin: 0px;  
   text-align: justify;
}

.axis path,
.axis line {
  fill: #7F7F7F;
  shape-rendering: crispEdges;
}

.xaxis path {
  display: none;
}

.yaxis path {
  display: none;
}

label {
  position: absolute;
  top: 10px;
  right: 10px;
}

.line {
    fill: none;
    stroke: #000;
    stroke-width: 1.0px;
}

.shading_uk, 
.shading {
  cursor: pointer;
}

.yaxis,
.xaxis {
    pointer-events: none;
}

.uk_table_heading,
.table_heading {
    font-size: 12px;
}

.HeadingTextUKGDP,
.HeadingTextUKInflation,
.HeadingTextUKProductivity,
.HeadingTextCountry,
.HeadingTextYears,
.HeadingTextDepth,
.HeadingTextInflation,
.HeadingTextProductivity {
   font-size: 14px;
   fill: #65ABBD;
   pointer-events: none;
}

.uk_heading_rectangle,
.HeadingRectCountry,
.HeadingRectYears,
.HeadingRectDepth,
.HeadingRectInflation,
.HeadingRectProductivity {
   fill:  #133C4E;
   cursor: pointer;
   stroke: #65ABBD;
   stroke-width: 1px;
}

.uk_gdp, 
.uk_inflation,
.uk_productivity,
.uk_gdp_zero,
.uk_inflation_zero,
.uk_productivity_zero {
   pointer-events: none;
}

.Question_mark,
.Question_mark_uk {
    pointer-events: none;
    fill: #65ABBD;
    font-size: 12px;
}

.Question_mark_circle,
.Question_mark_circle_uk {
    cursor: pointer;
    fill: #23495A;
}

.axis_gdp, 
.axis_inflation,
.axis_productivity {
   opacity: 0.7;
   pointer-events: none;
   font-size: 12px;
}

.text_country,
.text_start_date,
.text_end_date {
    fill: #718A94;
    font-size: 12px;
    pointer-events: none;
}

.gdp, 
.inflation_dots,
.inflation_bars,
.productivity {
   pointer-events: none;
}

.text_gdp,
.text_inflation,
.text_productivity,
.text_start_qtr,
.text_end_qtr {
   pointer-events: none;
   font-size: 12px;
}

.lines_start_end {
   stroke: #65ABBD;
   pointer-events: none;

}

a {
color: #718A94;
}

#tooltip_info, #tooltip_heading {
        position: absolute;
        padding: 10px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        background-color: #133C4E;;
        pointer-events: none;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    }

#tooltip_heading {
	width: 200px;
}

#tooltip_info.hidden, #tooltip_heading.hidden {
        display: none;
    }

#tooltip_info p, #tooltip_heading p {
        margin: 0px;
        font-size: 12px;
        line-height: 15px;
        color: #718A94;
        text-align: left;
    }

</style>
</head>

<body>

<div id="heading">Recessions & Recoveries</div>  
    <div id="description" style="margin-top: 0px;">
    <p>How does the UK's most recent recession, and subsequent recovery, compare 
       to recessions in other countries and to previous recessions in the UK?</p>

</div>

<div id="description">
    <p style="margin-top: 0px; margin-bottom: 25px"> The table below shows every recession in G7-member countries 
        since 1970. UK recessions are highlighted in white. Hover over a row to see further details. To 'rank'
        the recessions by a characteristic, such as inflation, click on the 'Inflation' header at the top of the table. 
        To track a particular recession, 
        first click to highlight the row and then sort.</p>

</div>

<div id="description">
    <p style="margin-top: 0px; margin-bottom: 15px"> The graphs below show growth in GDP, prices and productivity in the UK from 1860 onwards. 
        Hover over a column 
        to highlight a year and see further details. 
        To discover how one particular year compares to others, on say GDP growth, 
        click to highlight that year 
        and then select the 'GDP' header on the left of the graph to sort the data.
	Lighter shades correspond to later years. The growth rates for 2009,
        which capture the most recent recession, are highlighted in white.
        </p>
    </div>

<div id="notes">
       <p>Notes: * The recovery in Italy from the 2008 recession is still ongoing. 
          For this visualisation a recession is defined as two consecutive falls in quarterly GDP.
          A second recession may occur before the recovery from the first is complete.  
          Two recessions in France and Japan (which both began in 2014) were excluded as 
          productivity data for 2014 was not available. 
           All data for the top panel come from <a href="https://stats.oecd.org/">OECD statistics</a>.
          'Depth': Based on quarterly estimates of the expenditure measure of Gross Domestic Product.                                
	  'Inflation': Percentage change on the same quarter of the previous year in the 
                       Consumer Prices Index - all items. The inflation value that appears when hovering 
                       is the average level of inflation.
 	  'Productivity': Based on GDP per hour worked on an annual basis in USD, 
                          constant prices, 2005 PPPs. As the productivity series is only available at an annual frequency, 
                          the growth rate is necessarily zero for recessions that 
 			  are fully reversed within one calendar year, or
			  if productivity in the last year of the recovery is also the 
			  lowest level since the start of the recession. 
	  All data for the lower panel come from the
          <a href="https://www.bankofengland.co.uk/research/Pages/onebank/datasets.aspx#4">
           Bank of England's 'Three Centuries of Macroeconomic Data'</a>.  
       </p>
    </div>

</div>

var margin = {top: 15, top2: -20, right: 140, bottom: 30, left: 70},
    width = 920 - margin.left - margin.right,
    width2 = 1035 - margin.left - margin.right,
    height2 = 500 - margin.top2 - margin.bottom,
    height = 700 - margin.top - margin.bottom;

var color_gdp = "#5E87F7";
var color_infl = "#E4D553";
var color_prod = "#7AE453";
var color_edge = "#65ABBD";
var color_back = "#133C4E";

var color_gdp_uk=["#4666be","#6b8add","#91aefd"];     
var color_inflation_uk=["#cfba02","#ddcd40","#ece073"];     
var color_productivity_uk=["#368d16","#60ba3f","#8be869"];

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

var xAxis = d3.svg.axis()
    .tickFormat(d3.format("d"))
    .scale(x)
    .orient("top")
    .tickValues([0,10,20,30,40,50])
    .tickFormat( function(d) { return d});

var x_uk = d3.scale.linear()
    .range([0, width2]);

var xAxis_uk = d3.svg.axis()
    .tickFormat(d3.format("d"))
    .scale(x_uk)
    .orient("top")
    .tickPadding(-155)
    .tickValues([1860,1900,1950,2000])
    .tickFormat( function(d) { return d});

var xAxis2_uk = d3.svg.axis()
    .tickFormat(d3.format("d"))
    .scale(x_uk)
    .orient("top")
    .tickPadding(-330)
    .tickValues([1860,1900,1950,2000])
    .tickFormat( function(d) { return d});
  
var xAxis3_uk = d3.svg.axis()
    .tickFormat(d3.format("d"))
    .scale(x_uk)
    .orient("top")
    .tickPadding(-470)
    .tickValues([1860,1900,1950,2000])
    .tickFormat( function(d) { return d});

var y = d3.scale.linear()
    .range([height,0]);

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

var y_uk = d3.scale.linear()
    .range([height2,0]);
   
var yAxis_uk = d3.svg.axis()
    .scale(y_uk)
    .orient("right")
    .tickPadding(5)
    .tickValues([-10,0,10])
    .tickFormat( function(d) { return (d+"%")});

var y2_uk = d3.scale.linear()
    .range([height2,0]);

var y2Axis_uk = d3.svg.axis()
    .scale(y2_uk)
    .orient("right")
    .tickPadding(5)
    .tickValues([-15,0,20])
    .tickFormat( function(d) { return (d+"%")});

var y3_uk = d3.scale.linear()
    .range([height2,0]);

var y3Axis_uk = d3.svg.axis()
    .scale(y3_uk)
    .orient("right")
    .tickPadding(5)
    .tickValues([-10,0,10])
    .tickFormat( function(d) { return (d+"%")});

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

var svg_uk = d3.select("#chart_uk").append("svg")
    .attr("width", width2 + margin.left + margin.right)
    .attr("height", height2 + margin.top2 + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top2 + ")");

d3.csv("data_uk.csv", function(error, data) {

data.forEach(function(d) {
    d.uk_gdp = +d.uk_gdp;
    d.uk_date = +d.uk_date;
    d.uk_inflation = +d.uk_inflation;
    d.uk_productivity = +d.uk_productivity;
  });

var ymin = -60;
  var ymax = 20;
  y_uk.domain([ymin,ymax]);

var y2min = -55;
  var y2max = 85;

y2_uk.domain([y2min,y2max]);

var y3max = 90;
  var y3min = -10;
  y3_uk.domain([y3min,y3max]);

var x_uk_dom = 1828;  
  x_uk.domain([x_uk_dom, 2014]);
  
  svg_uk.append("g")
      .attr("class", "yaxis")
      .style("fill", color_gdp)
      .style("opacity", 0.7)
      .style("font-size", "12px")
      .attr("transform", "translate(" + width2 + ",0)")
      .call(yAxis_uk);

svg_uk.append("g")
      	.attr("class", "yaxis")
      .style("fill", color_infl)
      .style("opacity", 0.7)
      .style("font-size", "12px")
      .attr("transform", "translate(" + width2 + ",0)")
      	.call(y2Axis_uk);

svg_uk.append("g")
      	.attr("class", "yaxis")
        .style("fill", color_prod)
        .style("opacity", 0.7)
      .style("font-size", "12px")
      .attr("transform", "translate(" + width2 + ",0)")
      	.call(y3Axis_uk);

// UK Headings

svg_uk.append("rect")
   .attr("class", "uk_heading_rectangle")
   .attr("x", x_uk(x_uk_dom))
   .attr("y", y_uk(3))
   .attr("width", x_uk(x_uk_dom+27))
   .attr("height", y_uk(15.5))
   .on("click", function() {var toggle_uk=1; sort_uk(toggle_uk);})
   .on("mouseover", function(d){
          d3.select(this)
            .style("fill",color_edge);

d3.select(".HeadingTextUKGDP")
            .style("fill", "#FFFFFF");
   })
   .on("mouseout", function(d){
          d3.select(this)
            .style("fill",color_back);

d3.select(".HeadingTextUKGDP")
            .style("fill",color_edge);

});

svg_uk.append("text")
   .attr("class", "HeadingTextUKGDP")
   .attr("x", x_uk(x_uk_dom+2.5))
   .attr("y", y_uk(0))
   .text("GDP");

svg_uk.append("rect")
   .attr("class", "uk_heading_rectangle")
   .attr("x", x_uk(x_uk_dom))
   .attr("y", y2_uk(6))
   .attr("width", x_uk(x_uk_dom+27))
   .attr("height", y_uk(15.5))
   .on("click", function() {var toggle_uk=2; sort_uk(toggle_uk);})
   .on("mouseover", function(d){
          d3.select(this)
            .style("fill",color_edge);

d3.select(".HeadingTextUKInflation")
            .style("fill", "#FFFFFF");
   })
   .on("mouseout", function(d){
          d3.select(this)
            .style("fill",color_back);

d3.select(".HeadingTextUKInflation")
            .style("fill",color_edge);

});

svg_uk.append("text")
   .attr("class", "HeadingTextUKInflation")
   .attr("x", x_uk(x_uk_dom+2.5))
   .attr("y", y2_uk(0.5))
   .text("Inflation");

svg_uk.append("rect")
   .attr("class", "uk_heading_rectangle")
   .attr("x", x_uk(x_uk_dom))
   .attr("y", y3_uk(4))
   .attr("width", x_uk(x_uk_dom+27))
   .attr("height", y_uk(15.5))
   .on("click", function() {var toggle_uk=3; sort_uk(toggle_uk);})
   .on("mouseover", function(d){
          d3.select(this)
            .style("fill",color_edge);

d3.select(".HeadingTextUKProductivity")
            .style("fill", "#FFFFFF");
   })
   .on("mouseout", function(d){
          d3.select(this)
            .style("fill",color_back);

d3.select(".HeadingTextUKProductivity")
            .style("fill",color_edge);

});

svg_uk.append("text")
   .attr("class", "HeadingTextUKProductivity")
   .attr("x", x_uk(x_uk_dom+2.5))
   .attr("y", y3_uk(0))
   .text("Productivity");

// Info circles for Headings
info_circle = svg_uk.append("g");

info_circle.append("path")
           .attr("class", "Question_mark_circle_uk")
   	   .attr("d", function(d) { return "M " + x_uk(x_uk_dom+22) + "," + y_uk(-1.4) 
                                + " L " + x_uk(x_uk_dom+26.75) + "," + y_uk(-1.4)  
                                + " "   + x_uk(x_uk_dom+26.75) + "," + y_uk(3)  + "Z" })
           .on("mouseover", function(d,i){

//Update the tooltip position and value
            d3.select("#tooltip_heading")
              .style("left", (d3.event.pageX+5) + "px")
              .style("top", (d3.event.pageY+5) + "px");
  
             d3.select("#tooltip_heading #line1")
              .text("Annual growth in UK real GDP");

d3.select("#tooltip_heading").classed("hidden", false);
            })
            .on("mouseout", function(){
               d3.select("#tooltip_heading").classed("hidden", true);
            });

info_circle.append("text")
           .attr("class", "Question_mark_uk")
           .attr("x", x_uk(x_uk_dom+24.75))
           .attr("y", y_uk(-0.25))
           .text("?");

info_circle.append("path")
           .attr("class", "Question_mark_circle_uk")
   	   .attr("d", function(d) { return "M " + x_uk(x_uk_dom+22) + "," + y2_uk(-1.7) 
                                + " L " + x_uk(x_uk_dom+26.75) + "," + y2_uk(-1.7)  
                                + " "   + x_uk(x_uk_dom+26.75) + "," + y2_uk(5.6)  + "Z" })
           .on("mouseover", function(d,i){

d3.select("#tooltip_heading").classed("hidden", false);
            })
            .on("mouseout", function(){
               d3.select("#tooltip_heading").classed("hidden", true);
            });

info_circle.append("text")
           .attr("class", "Question_mark_uk")
           .attr("x", x_uk(x_uk_dom+24.75))
           .attr("y", y2_uk(0))
           .text("?");

info_circle.append("path")
           .attr("class", "Question_mark_circle_uk")
   	   .attr("d", function(d) { return "M " + x_uk(x_uk_dom+22) + "," + y3_uk(-1.4) 
                                + " L " + x_uk(x_uk_dom+26.75) + "," + y3_uk(-1.4)  
                                + " "   + x_uk(x_uk_dom+26.75) + "," + y3_uk(3.7)  + "Z" })
           .on("mouseover", function(d,i){

d3.select("#tooltip_heading").classed("hidden", false);
            })
            .on("mouseout", function(){
               d3.select("#tooltip_heading").classed("hidden", true);
            });

info_circle.append("text")
           .attr("class", "Question_mark_uk")
           .attr("x", x_uk(x_uk_dom+24.75))
           .attr("y", y3_uk(-0.25))
           .text("?");

var bar = svg_uk.selectAll(".bar")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + 0 + ")"; });

// Vertical shading
    thisclicked_uk = -1;
    lastclicked_uk = -1;
    clickedoff_uk=-1;
    bar.append("rect")
         .attr("class","shading_uk")
         .attr("x", function(d) {return x_uk(d.uk_date); }) 
         .attr("y", function(d) {return y_uk(12) })
         .attr("height", function(d) {return y3_uk(-5) })
         .attr("width", function(d) { return x_uk(x_uk_dom+1); })
         .style("fill", color_back)
         .on("mouseover", function(d,i){

d3.select(this)
 	           .style("fill","#23495A");

//Update the tooltip position and value
          var matrix = this.getScreenCTM()
        	   .translate(+ this.getAttribute("x"), + y3_uk(y3min+3));
    
            d3.select("#tooltip_info")
               .transition()
	       .duration(100)
               .style("left", (window.pageXOffset + matrix.e - 25) + "px")
               .style("top", (window.pageYOffset + matrix.f + 10) + "px");

d3.select("#tooltip_info #line1")
 	       .text(+ d.uk_date);
  
             d3.select("#tooltip_info #line2")
 	       .text("GDP growth: " + d.uk_gdp.toFixed(1) + "%");

d3.select("#tooltip_info #line3")
 	       .text("Inflation: " + d.uk_inflation.toFixed(1) + "%");

d3.select("#tooltip_info #line4")
 	       .text("Productivity growth: " + d.uk_productivity.toFixed(1) + "%");

d3.select("#tooltip_info").classed("hidden", false);
          })
          .on("mouseout", function(d){

if (d.uk_date!==thisclicked_uk) {
                 d3.select(this)
                   .style("fill", color_back)

}

if (clickedoff_uk==1) {
                   d3.select(this)
                     .style("fill", color_back)
		}

d3.select("#tooltip_info").classed("hidden", true);
          })
         .on("click", function(d) {

clickedoff_uk=1;
             thisclicked_uk=d.uk_date;
           
             bar.selectAll(".shading_uk")
                .style("fill", color_back)
	   
             if (d.uk_date!==lastclicked_uk) {
                 d3.select(this)
 	           .style("fill","#23495A");
                 clickedoff_uk=0;
	     }

lastclicked_uk = d.uk_date;

});

// Draw x axes
  svg_uk.append("g")
      .attr("class", "xaxis")
      .style("fill", color_gdp)
     .style("font-size", "12px")
      .style("opacity", 0.7)
      .call(xAxis_uk);
  
  svg_uk.append("g")
      .style("fill", color_infl)
      .style("opacity", 0.7)
     .style("font-size", "12px")
      .attr("class", "xaxis")
      .call(xAxis2_uk);

svg_uk.append("g")
      .style("fill", color_prod)
      .style("opacity", 0.7)
     .style("font-size", "12px")
      .attr("class", "xaxis")
      .call(xAxis3_uk);

// UK GDP bars
      bar.append("line")
         .attr("class","uk_gdp_zero")
	 .attr("x1", x_uk(1860))
	 .attr("x2", x_uk(2015))
	 .attr("y1", y_uk(0))
	 .attr("y2", y_uk(0))
	 .style("stroke-width", 0.25)
	 .style("stroke", "#23495A");

bar.append("rect")
         .attr("class","uk_gdp")
         .attr("x", function(d) {return x_uk(d.uk_date); }) 
         .attr("y", function(d) {return (d.uk_gdp>0) ? y_uk(d.uk_gdp) : y_uk(0); })
         .attr("height", function(d) {return (d.uk_gdp>0) ? y_uk(ymax-d.uk_gdp) : y_uk(ymax+d.uk_gdp); })
         .attr("width", function(d) { return x_uk(x_uk_dom+1); })
         .style("fill", function(d) { return (d.uk_date==2009) ? "#FFFFFF" : (d.uk_date < 1912) ? color_gdp_uk[0] : (d.uk_date < 1964) ? color_gdp_uk[1] : color_gdp_uk[2] });

// UK Productivity bars
      bar.append("rect")
         .attr("class","uk_productivity")
         .attr("x", function(d) {return x_uk(d.uk_date); }) 
         .attr("y", function(d) {return (d.uk_productivity>0) ? y3_uk(d.uk_productivity) : y3_uk(0); })
         .attr("height", function(d) {return (d.uk_productivity>0) ? y3_uk(y3max-d.uk_productivity) : y3_uk(y3max+d.uk_productivity); })
         .attr("width", function(d) { return x_uk(x_uk_dom+1); })
         .style("fill", function(d) { return (d.uk_date==2009) ? "#FFFFFF" : (d.uk_date < 1912) ? color_productivity_uk[0] : (d.uk_date < 1964) ? color_productivity_uk[1] : color_productivity_uk[2] });

bar.append("line")
         .attr("class","uk_productivity_zero")
	 .attr("x1", x_uk(1860))
	 .attr("x2", x_uk(2014))
	 .attr("y1", y3_uk(0))
	 .attr("y2", y3_uk(0))
	 .style("stroke-width", 0.25)
	 .style("stroke", "#23495A");

// UK Inflation
      svg_uk.append("line")
         .attr("class","uk_inflation_zero")
	 .attr("x1", x_uk(1860))
	 .attr("x2", x_uk(2012))
	 .attr("y1", y2_uk(0))
	 .attr("y2", y2_uk(0))
	 .style("stroke-width", 1)
	 .style("stroke", "#23495A");

bar.append("circle")
         .attr("class","uk_inflation")
         .attr("cx", function(d) {return x_uk(d.uk_date+0.5); }) 
         .attr("cy", function(d) {return y2_uk(d.uk_inflation); })
         .attr("r", 2.5)
         .style("fill", function(d) { return (d.uk_date==2009) ? "#FFFFFF" : (d.uk_date < 1912) ? color_inflation_uk[0] : (d.uk_date < 1964) ? color_inflation_uk[1] : color_inflation_uk[2] });

//Sort 
        var sortOrder_uk = false;

var sort_uk = function(toggle_uk) {

if (toggle_uk==1) {
            sortOrder_uk = !sortOrder_uk
            svg_uk.selectAll(".shading_uk, .uk_gdp, .uk_inflation, .uk_productivity")
                  .sort(function(a, b){ 
                      if (sortOrder_uk) {
                          return d3.ascending(a.uk_gdp, b.uk_gdp);
                      } else {
                          return d3.ascending(a.uk_date, b.uk_date);
                      }
                   });
	 }
         if (toggle_uk==2) {
            sortOrder_uk = !sortOrder_uk
            svg_uk.selectAll(".shading_uk, .uk_gdp, .uk_inflation, .uk_productivity")
                  .sort(function(a, b){ 
                      if (sortOrder_uk) {
                          return d3.ascending(a.uk_inflation, b.uk_inflation);
                      } else {
                          return d3.ascending(a.uk_date, b.uk_date);
                      }
                   });
	 }
         if (toggle_uk==3) {
            sortOrder_uk = !sortOrder_uk
            svg_uk.selectAll(".shading_uk, .uk_gdp, .uk_inflation, .uk_productivity")
                  .sort(function(a, b){ 
                      if (sortOrder_uk) {
                          return d3.ascending(a.uk_productivity, b.uk_productivity);
                      } else {
                          return d3.ascending(a.uk_date, b.uk_date);
                      }
                   });
	 }

if (sortOrder_uk) {
	   svg_uk.selectAll(".xaxis")
		 .style("opacity",0);
	 } else {
	   svg_uk.selectAll(".xaxis")
		 .style("opacity",1);
	 }

svg_uk.selectAll(".shading_uk")
               .transition()
	       .duration(500)
               .delay(function(d, i) {
                   return i * 20;
               })
               .attr("x", function(d, i) {
                    return x_uk(i+1860);
               });
         
         svg_uk.selectAll(".uk_gdp")
               .transition()
	       .duration(500)
               .delay(function(d, i) {
                   return i * 20;
               })
               .attr("x", function(d, i) {
                    return x_uk(i+1860);
               });

svg_uk.selectAll(".uk_inflation")
               .transition()
               .duration(500)
               .delay(function(d, i) {
                   return i * 20;
               })
               .attr("cx", function(d, i) {
                    return x_uk(i+1860+0.5);
               });

svg_uk.selectAll(".uk_productivity")
               .transition()
	       .duration(500)
               .delay(function(d, i) {
                   return i * 20;
               })
               .attr("x", function(d, i) {
                    return x_uk(i+1860);
               });

d3.selection.prototype.moveToFront = function() {
  		return this.each(function(){
    		this.parentNode.appendChild(this);
  		});
	};

var sel = d3.selectAll(".xaxis, .uk_gdp, .uk_inflation, .uk_productivity");
  	sel.moveToFront();

}

});

d3.csv("data.csv", function(error, data) {

data.forEach(function(d) {
    d.duration = +d.duration;
    d.duration_sort = d.duration+Math.random()/100;

d.depth = +d.depth;
    d.depth_sort = d.depth+Math.random()/100;

d.productivity = +d.productivity;
    d.productivity_sort = d.productivity+Math.random()/100;

d.start_num = +d.start_num;
    d.start_num_sort = d.start_num+Math.random()/100;

d.infl_med = +d.infl_med; 
    d.infl_med_sort = +d.infl_med+Math.random()/100;

d.id = +d.id;
    d.country_order = +d.country_order;

d.infl_min = +d.infl_min; 
     d.infl_max = +d.infl_max; 
       
  });

// Headings
   var length = data.length;
   var columnTwo = 10;
   var columnThree = 20;
   var columnFour = 30;
   var columnFive = 40;
   var columnSix = 50;

// Domains
   var adj_headings = 8.25;
   y.domain([0,length+adj_headings]);
   x.domain([0, columnSix]);

var innerwidth = 40; 
   var lineadj = 1.5;
   var adjust_headings = 0;
   var adjust = -0.8;
   var multiple = 1.1;

// Headings
svg.append("rect")
   .attr("class", "HeadingRectCountry")
   .attr("x", x(0))
   .attr("y", y(length+adj_headings))
   .attr("width",x(7))
   .attr("height",y(length+adj_headings-2))
   .on("mouseover", function(d){
          d3.select(this)
            .style("fill", color_edge);

d3.select(".HeadingTextCountry")
            .style("fill", "#FFFFFF");
   })
   .on("mouseout", function(d){
          d3.select(this)
            .style("fill",color_back);

d3.select(".HeadingTextCountry")
            .style("fill", color_edge);

})   
   .on("click", function() {var toggle=1; sort_countries(toggle); });

svg.append("text")
   .attr("class", "HeadingTextCountry")
   .attr("x", x(1))
   .attr("y", y(length+adj_headings-1.4))
   .text("Country");

svg.append("rect")
   .attr("class", "HeadingRectYears")
   .attr("x", x(columnTwo))
   .attr("y", y(length+adj_headings))
   .attr("width",x(7))
   .attr("height",y(length+adj_headings-2))
   .on("mouseover", function(d){
          d3.select(this)
            .style("fill", color_edge);

d3.select(".HeadingTextYears")
            .style("fill", "#FFFFFF");
   })
   .on("mouseout", function(d){
          d3.select(this)
            .style("fill",color_back);

d3.select(".HeadingTextYears")
            .style("fill", color_edge);

})
   .on("click", function() {var toggle=2; sort_countries(toggle); });

svg.append("text")
   .attr("class", "HeadingTextYears")
   .attr("x", x(columnTwo+1))
   .attr("y", y(length+adj_headings-1.4))
   .text("Duration");

svg.append("rect")
   .attr("class", "HeadingRectDepth")
   .attr("x", x(columnThree))
   .attr("y", y(length+adj_headings))
   .attr("width",x(7))
   .attr("height",y(length+adj_headings-2))
   .on("mouseover", function(d){
          d3.select(this)
            .style("fill", color_edge);

d3.select(".HeadingTextDepth")
            .style("fill", "#FFFFFF");
   })
   .on("mouseout", function(d){
          d3.select(this)
            .style("fill",color_back);

d3.select(".HeadingTextDepth")
            .style("fill", color_edge);

})
   .on("click", function() {var toggle=3; sort_countries(toggle); });

svg.append("text")
   .attr("class", "HeadingTextDepth")
   .attr("x", x(columnThree+1))
   .attr("y", y(length+adj_headings-1.4))
   .text("Depth");

svg.append("rect")
   .attr("class", "HeadingRectInflation")
   .attr("x", x(columnFour))
   .attr("y", y(length+adj_headings))
   .attr("width",x(7))
   .attr("height",y(length+adj_headings-2))
   .on("mouseover", function(d){
          d3.select(this)
            .style("fill", color_edge);

d3.select(".HeadingTextInflation")
            .style("fill", "#FFFFFF");
   })
   .on("mouseout", function(d){
          d3.select(this)
            .style("fill",color_back);

d3.select(".HeadingTextInflation")
            .style("fill", color_edge);

})
   .on("click", function() {var toggle=4; sort_countries(toggle); });

svg.append("text")
   .attr("class", "HeadingTextInflation")
   .attr("x", x(columnFour+1))
   .attr("y", y(length+adj_headings-1.4))
   .text("Inflation");

svg.append("rect")
   .attr("class", "HeadingRectProductivity")
   .attr("x", x(columnFive))
   .attr("y", y(length+adj_headings))
   .attr("width",x(7))
   .attr("height",y(length+adj_headings-2))
   .on("mouseover", function(d){
   
          d3.select(this)
            .style("fill", color_edge);

d3.select(".HeadingTextProductivity")
            .style("fill", "#FFFFFF");
   })
   .on("mouseout", function(d){
          d3.select(this)
            .style("fill",color_back);

d3.select(".HeadingTextProductivity")
            .style("fill", color_edge);

})
   .on("click", function() {var toggle=5; sort_countries(toggle); });

svg.append("text")
   .attr("class", "HeadingTextProductivity")
   .attr("x", x(columnFive+1))
   .attr("y", y(length+adj_headings-1.4))
   .text("Productivity");

// Info circles for Headings
info_circle = svg.append("g");

info_circle.append("path")
           .attr("class", "Question_mark_circle")
   	   .attr("d", function(d) { return "M " + x(columnTwo+5.4) + "," + y(length+adj_headings-1.9) 
                                + " L " + x(columnTwo+6.9) + "," + y(length+adj_headings-1.9)  
                                + " "   + x(columnTwo+6.9) + "," + y(length+adj_headings)  + "Z" })
           .on("mouseover", function(d,i){

//Update the tooltip position and value
            d3.select("#tooltip_heading")
              .style("left", (d3.event.pageX) + "px")
              .style("top", (d3.event.pageY+10) + "px");
  
             d3.select("#tooltip_heading #line1")
              .text("Duration of the recession and recovery. The first quarter GDP fell to the first quarter GDP passed its pre-recession peak");

d3.select("#tooltip_heading").classed("hidden", false);
            })
            .on("mouseout", function(){
               d3.select("#tooltip_heading").classed("hidden", true);
            });

info_circle.append("text")
           .attr("class", "Question_mark")
           .attr("x", x(columnTwo+6.4))
           .attr("y", y(length+adj_headings-1.5))
           .text("?");

info_circle.append("path")
           .attr("class", "Question_mark_circle")
   	   .attr("d", function(d) { return "M " + x(columnThree+5.4) + "," + y(length+adj_headings-1.9) 
                                + " L " + x(columnThree+6.9) + "," + y(length+adj_headings-1.9)  
                                + " "   + x(columnThree+6.9) + "," + y(length+adj_headings)  + "Z" })
           .on("mouseover", function(d,i){

//Update the tooltip position and value
            d3.select("#tooltip_heading")
              .style("left", (d3.event.pageX+10) + "px")
              .style("top", (d3.event.pageY+10) + "px");
  
             d3.select("#tooltip_heading #line1")
              .text("The percentage point fall in quarterly GDP, from its pre-recession peak to trough");

d3.select("#tooltip_heading").classed("hidden", false);
            })
            .on("mouseout", function(){
               d3.select("#tooltip_heading").classed("hidden", true);
            });

info_circle.append("text")
           .attr("class", "Question_mark")
           .attr("x", x(columnThree+6.4))
           .attr("y", y(length+adj_headings-1.5))
           .text("?");

info_circle.append("path")
           .attr("class", "Question_mark_circle")
   	   .attr("d", function(d) { return "M " + x(columnFour+5.4) + "," + y(length+adj_headings-1.9) 
                                + " L " + x(columnFour+6.9) + "," + y(length+adj_headings-1.9)  
                                + " "   + x(columnFour+6.9) + "," + y(length+adj_headings)  + "Z" })
           .on("mouseover", function(d,i){

//Update the tooltip position and value
            d3.select("#tooltip_heading")
              .style("left", (d3.event.pageX+10) + "px")
              .style("top", (d3.event.pageY+10) + "px");
  
             d3.select("#tooltip_heading #line1")
              .text("The lowest, average (dot), and highest levels of inflation during the recession and recovery");

d3.select("#tooltip_heading").classed("hidden", false);
            })
            .on("mouseout", function(){
               d3.select("#tooltip_heading").classed("hidden", true);
            });

info_circle.append("text")
           .attr("class", "Question_mark")
           .attr("x", x(columnFour+6.4))
           .attr("y", y(length+adj_headings-1.5))
           .text("?");
   
info_circle.append("path")
           .attr("class", "Question_mark_circle")
   	   .attr("d", function(d) { return "M " + x(columnFive+5.4) + "," + y(length+adj_headings-1.9) 
                                + " L " + x(columnFive+6.9) + "," + y(length+adj_headings-1.9)  
                                + " "   + x(columnFive+6.9) + "," + y(length+adj_headings)  + "Z" })
           .on("mouseover", function(d,i){

//Update the tooltip position and value
            d3.select("#tooltip_heading")
              .style("left", (d3.event.pageX+10) + "px")
              .style("top", (d3.event.pageY+10) + "px");
  
             d3.select("#tooltip_heading #line1")
              .text("Growth in 'GDP per hour worked' from its trough during the recession and recovery to the last year of the recovery");

d3.select("#tooltip_heading").classed("hidden", false);
            })
            .on("mouseout", function(){
               d3.select("#tooltip_heading").classed("hidden", true);
            });

info_circle.append("text")
           .attr("class", "Question_mark")
           .attr("x", x(columnFive+6.4))
           .attr("y", y(length+adj_headings-1.5))
           .text("?");

// Shading
  var bar = svg.selectAll(".bar")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + 0 + ")"; });

// Background shading
     lastclicked=-1;
     thisclicked=-1;
     clickedoff=-1;
     bar.append("rect")
         .attr("class","shading")
         .attr("x", function(d) {return x(0); }) 
         .attr("y", function(d) {return y(d.id*multiple-adjust); }) 
         .attr("height", function(d) {return y(length+adj_headings-1.05); })
         .attr("width", function(d) {return x(columnSix-1); })
         .style("fill", color_back)
         .on("mouseover", function(d,i){

d3.select(this)
 	           .style("fill","#23495A");
        
        	 thisid = d.id_letter;
                 var selection_gdp = d3.selectAll('.text_gdp[id="'+thisid+'"]');
	         selection_gdp.style("opacity", 1);

var selection_inflation = d3.selectAll('.text_inflation[id="'+thisid+'"]');
                 selection_inflation.style("opacity", 1);

var selection_productivity = d3.selectAll('.text_productivity[id="'+thisid+'"]');
                 selection_productivity.style("opacity", 1);

var selection_textendq = d3.selectAll('.text_end_qtr[id="'+thisid+'"]');
                 selection_textendq.style("opacity", 1);

var selection_textstartq = d3.selectAll('.text_start_qtr[id="'+thisid+'"]');
                 selection_textstartq.style("opacity", 1);

var selection_linesse = d3.selectAll('.lines_start_end[id="'+thisid+'"]');
                 selection_linesse.attr("x1", x(columnTwo+2.7));

})
          .on("mouseout", function(d){

thisid = d.id_letter;
                 var selection_gdp = d3.selectAll('.text_gdp[id="'+thisid+'"]');
                 selection_gdp.style("opacity", 0);

var selection_inflation = d3.selectAll('.text_inflation[id="'+thisid+'"]');
                 selection_inflation.style("opacity", 0);

var selection_productivity = d3.selectAll('.text_productivity[id="'+thisid+'"]');
                 selection_productivity.style("opacity", 0);

var selection_textendq = d3.selectAll('.text_end_qtr[id="'+thisid+'"]');
                 selection_textendq.style("opacity", 0);

var selection_textstartq = d3.selectAll('.text_start_qtr[id="'+thisid+'"]');
                 selection_textstartq.style("opacity", 0);

var selection_linesse = d3.selectAll('.lines_start_end[id="'+thisid+'"]');
                 selection_linesse.attr("x1", x(columnTwo+1.8));

if (d.id!==thisclicked) {
                 d3.select(this)
                   .style("fill", color_back)
	       }

if (clickedoff==1) {
                   d3.select(this)
                     .style("fill", color_back)
		}
	
          })
         .on("click", function(d) {

clickedoff=1;
             thisclicked=d.id;
           
                bar.selectAll(".shading")
                   .style("fill", color_back)
	   
             if (d.id!==lastclicked) {
                 d3.select(this)
  	           .style("fill","#23495A");
		 clickedoff=0;
	     }

lastclicked = d.id;              
          });

// Country Labels
  bar.append("text")
      .attr("class", "text_country")
      .attr("x", x(0))
      .attr("y", function(d) {return y(d.id*multiple-adjust-0.8); }) 
      .text(function(d) { return d.country; })
      .style("fill", function(d) { return (d.country=="UK" && d.start=="2008") ? "#FFFFFF" : ((d.country=="UK") ? "#CFD8DB" :  "#718A94"); });
      
  // Start year of recession
     bar.append("text")
      .attr("class", "text_start_date")
      .attr("x", function(d) {return x(columnTwo); })
      .attr("y", function(d) {return y(d.id*multiple-adjust-0.8); }) 
      .text(function(d) { return d.start; })
      .style("fill", function(d) { return (d.country=="UK" && d.start=="2008") ? "#FFFFFF" : ((d.country=="UK") ? "#CFD8DB" :  "#718A94"); });

// Start quarter of recession
     bar.append("text")
      .attr("class", "text_start_qtr")
      .attr("x", function(d) {return x(columnTwo+1.7); })
      .attr("y", function(d) {return y(d.id*multiple-adjust-0.8); }) 
      .attr("id", function(d) {return d.id_letter})
      .text(function(d) { return d.startq; })
      .style("fill", function(d) { return (d.country=="UK" && d.start=="2008") ? "#FFFFFF" : ((d.country=="UK") ? "#CFD8DB" :  "#718A94"); })
      .style("opacity",0);

// End year of recession
     bar.append("text")
      .attr("class", "text_end_date")
      .attr("x", function(d) {return x(columnTwo+2.5+(0.15*d.duration)); })
      .attr("y", function(d) {return y(d.id*multiple-adjust-0.8); }) 
      .text(function(d) { return d.end; })
      .style("fill", function(d) { return (d.country=="UK" && d.start=="2008") ? "#FFFFFF" : ((d.country=="UK") ? "#CFD8DB" :  "#718A94"); });

// End quarter of recession
     bar.append("text")
      .attr("class", "text_end_qtr")
      .attr("x", function(d) {return x(columnTwo+4.2+(0.15*d.duration)); })
      .attr("y", function(d) {return y(d.id*multiple-adjust-0.8); }) 
      .attr("id", function(d) {return d.id_letter})
      .text(function(d) { return d.endq; })
      .style("fill", function(d) { return (d.country=="UK" && d.start=="2008") ? "#FFFFFF" : ((d.country=="UK") ? "#CFD8DB" :  "#718A94"); })
      .style("opacity",0);

// Lines between start & end
      bar.append("line")
         .attr("class","lines_start_end")
         .attr("id", function(d) {return d.id_letter})
         .attr("x1", x(columnTwo+1.8))
         .attr("x2", function(d) {return x(columnTwo+2.35+(0.15*d.duration)); })
         .attr("y1", function(d) {return y(d.id*multiple-adjust-0.5); }) 
         .attr("y2", function(d) {return y(d.id*multiple-adjust-0.5); }) 
	 .style("stroke-width", 1);

// GDP
        bar.append("rect")
         .attr("class","gdp")
          .attr("x", function(d) {return x(columnThree); }) 
          .attr("y", function(d) {return y(d.id*multiple-adjust); }) 
          .attr("height", function(d) {return y(length+adj_headings-1); })
          .attr("width", function(d) {return x(((columnFour-columnThree)/15)*d.depth); })
          .style("fill", color_gdp);

// GDP Text
  bar.append("text")
      .attr("class", "text_gdp")
      .attr("id", function(d) {return d.id_letter})
      .attr("x", function(d) {return x(columnThree+0.3)+x(((columnFour-columnThree)/15)*d.depth); }) 
      .attr("y", function(d) {return y(d.id*multiple-adjust-0.8); }) 
      .text(function(d) { return d.depth.toFixed(1)  + "%"; })
	.style("fill", color_gdp)
        .style("opacity",0);

// GDP x axis
     var axis_gdp = svg.selectAll('.axis_gdp')
                         .data([0,5,10])
  			 .enter()
			 .append("g");
         
         	axis_gdp.append("text")
			 .attr("class", "axis_gdp")
                         .attr("y", function(d) {return y(length-4+adj_headings)})
                         .attr("x", function(d) {return x((((columnFour-columnThree)/15)*d)+columnThree); }) 
                         .text(function(d) {return d+"%"})          
                         .style("fill", color_gdp);

axis_gdp.append("text")
			 .attr("class", "axis_gdp")
                         .attr("y", function(d) {return y(-1.5)})
                         .attr("x", function(d) {return x((((columnFour-columnThree)/15)*d)+columnThree); }) 
                         .text(function(d) {return d+"%"})
                         .style("fill", color_gdp);

// Inflation
	
      // Min & Max	
      bar.append("rect")
         .attr("class","inflation_bars")
         .attr("x", function(d) {return x((((columnFive-columnFour)/40)*(d.infl_min+4))+columnFour); })
         .attr("y", function(d) {return y(d.id*multiple-adjust-0.4); }) 
         .attr("height", function(d) {return y(length+adj_headings-0.2); })
         .attr("width", function(d) {return x((((columnFive-columnFour)/40)*(d.infl_max-d.infl_min))); })
         .style("fill", color_infl);
       
       // Average
       bar.append("circle")	
         .attr("class", "inflation_dots")
         .attr("cx", function(d) {return x((((columnFive-columnFour)/40)*(d.infl_med+4))+columnFour); })
         .attr("cy", function(d) {return y(d.id*multiple-adjust-0.5); }) 
         .attr("r", function(d) { return 3; })
         .style("fill", color_infl);

// Inflation Text
  bar.append("text")
      .attr("class", "text_inflation")
      .attr("id", function(d) {return d.id_letter})
      .attr("x", function(d) {return x((((columnFive-columnFour)/40)*(d.infl_max+4))+columnFour+0.3); })
      .attr("y", function(d) {return y(d.id*multiple-adjust-0.8); }) 
      .text(function(d) { return d.infl_med.toFixed(1)  + "%"; })
	.style("fill", color_infl)
        .style("opacity",0);

// Inflation x axis
       var axis_inflation = svg.selectAll('.axis_inflation')
                         .data([0,10,20])
  			 .enter()
			 .append("g");

axis_inflation.append("text")
			 .attr("class", "axis_inflation")
                         .attr("y", function(d) {return y(length-4+adj_headings)})
                         .attr("x", function(d) {return x((((columnFive-columnFour)/40)*(d+4))+columnFour); })
                         .text(function(d) {return d+"%"})
                         .style("fill", color_infl);

axis_inflation.append("text")
			 .attr("class", "axis_inflation")
                         .attr("y", function(d) {return y(-1.5)})
                         .attr("x", function(d) {return x((((columnFive-columnFour)/40)*(d+4))+columnFour); })
                         .text(function(d) {return d+"%"})
                         .style("fill", color_infl);

// Productivity
        bar.append("rect")
          .attr("class","productivity")
          .attr("x", function(d) {return x(columnFive); }) 
          .attr("y", function(d) {return y(d.id*multiple-adjust); }) 
          .attr("height", function(d) {return y(length+adj_headings-1); })
          .attr("width", function(d) {return x(((columnSix-columnFive)/22)*d.productivity); })
          .style("fill", color_prod);

// Productivity Text
  bar.append("text")
      .attr("class", "text_productivity")
      .attr("id", function(d) {return d.id_letter})
      .attr("x", function(d) {return x(((columnSix-columnFive)/22)*d.productivity) + x(columnFive+0.3); })
      .attr("y", function(d) {return y(d.id*multiple-adjust-0.8); }) 
      .text(function(d) { return d.productivity.toFixed(1) + "%"; })
	.style("fill", color_prod)
        .style("opacity",0);

// Productivity x axis
     var axis_productivity = svg.selectAll('axis_productivity')
                         .data([0,5,10,15])
  			 .enter()
			 .append("g");
     
	axis_productivity.append("text")
			 .attr("class", "axis_productivity")
                         .attr("y", function(d) {return y(length-4+adj_headings)})
                         .attr("x", function(d) {return x((((columnSix-columnFive)/22)*d)+columnFive); }) 
                         .text(function(d) {return d+"%"})
			 .style("fill", color_prod);

axis_productivity.append("text")
			 .attr("class", "axis_productivity")
                         .attr("y", function(d) {return y(-1.5)})
                         .attr("x", function(d) {return x((((columnSix-columnFive)/22)*d)+columnFive); }) 
                         .text(function(d) {return d+"%"})
			 .style("fill", color_prod);

//Sorting function 
        var sortOrder_coun = false;
        var sortOrder_start = false;
        var sortOrder_gdp = false;
        var sortOrder_infl = false;
        var sortOrder_prod = false;

var sort_countries = function(toggle) {

if (toggle==1) {
            sortOrder_coun = !sortOrder_coun
            svg.selectAll(".text_start_qtr, .text_end_qtr, .text_gdp, .text_inflation, .text_productivity, .shading, .lines_start_end, .productivity, .text_country, .text_start_date, .text_end_date, .gdp, .inflation_bars, .inflation_dots")
                  .sort(function(a, b){ 
                      if (sortOrder_coun) {
                          return d3.ascending(a.country_order, b.country_order);
                      } else {
                          return d3.descending(a.country_order, b.country_order);
                      }
                   });
	 }
         if (toggle==2) {
            sortOrder_start = !sortOrder_start
            svg.selectAll(".text_start_qtr, .text_end_qtr, .text_gdp, .text_inflation, .text_productivity, .shading, .lines_start_end, .productivity, .text_country, .text_start_date, .text_end_date, .gdp, .inflation_bars, .inflation_dots")
                  .sort(function(a, b){ 
                      if (sortOrder_start) {
                          return d3.ascending(a.duration_sort, b.duration_sort);
                      } else {
                          return d3.ascending(a.id, b.id);
                      }
                   });
   	    }
         if (toggle==3) {
            sortOrder_gdp = !sortOrder_gdp
            svg.selectAll(".text_start_qtr, .text_end_qtr, .text_gdp, .text_inflation, .text_productivity, .shading, .lines_start_end, .productivity, .text_country, .text_start_date, .text_end_date, .gdp, .inflation_bars, .inflation_dots")
                  .sort(function(a, b){ 
                      if (sortOrder_gdp) {
                          return d3.ascending(a.depth_sort, b.depth_sort);
                      } else {
                          return d3.descending(a.depth, b.depth);
                      }
                   });
   	    }
         if (toggle==4) {
            sortOrder_infl = !sortOrder_infl
            svg.selectAll(".text_start_qtr, .text_end_qtr, .text_gdp, .text_inflation, .text_productivity, .shading, .lines_start_end, .productivity, .text_country, .text_start_date, .text_end_date, .gdp, .inflation_bars, .inflation_dots")
                  .sort(function(a, b){ 
                      if (sortOrder_infl) {
                          return d3.ascending(a.infl_med_sort, b.infl_med_sort);
                      } else {
                          return d3.descending(a.infl_med_sort, b.infl_med_sort);
                      }
                   });
   	    }
         if (toggle==5) {
            sortOrder_prod = !sortOrder_prod
           svg.selectAll(".text_start_qtr, .text_end_qtr, .text_gdp, .text_inflation, .text_productivity, .shading, .lines_start_end, .productivity, .text_country, .text_start_date, .text_end_date, .gdp, .inflation_bars, .inflation_dots")
                   .sort(function(a, b){ 
                      if (sortOrder_prod) {
                          return d3.ascending(a.productivity_sort, b.productivity_sort);
                      } else {
                          return d3.descending(a.productivity_sort, b.productivity_sort);
                      }
                   });
         }

svg.selectAll(".lines_start_end")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
               .attr("y1", function(d,i) {return y(i*multiple-adjust-0.5); }) 
               .attr("y2", function(d,i) {return y(i*multiple-adjust-0.5); });

svg.selectAll(".inflation_bars")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust-0.4); });

svg.selectAll(".inflation_dots")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
               .attr("cy", function(d,i) {return y(i*multiple-adjust-0.5); });

svg.selectAll(".productivity")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust); });

svg.selectAll(".text_country")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust-0.8); });

svg.selectAll(".text_start_date")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust-0.8); });

svg.selectAll(".text_end_date")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust-0.8); });

svg.selectAll(".text_start_qtr")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust-0.8); });

svg.selectAll(".text_end_qtr")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust-0.8); });

svg.selectAll(".text_gdp")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust-0.8); });

svg.selectAll(".text_inflation")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust-0.8); });

svg.selectAll(".text_productivity")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust-0.8); });

svg.selectAll(".shading")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust); });

svg.selectAll(".gdp")
               .transition()
               .duration(2500)
               .delay(function(d, i) {
                   return i * 20;
               })
              .attr("y", function(d,i) {return y(i*multiple-adjust); });

d3.selection.prototype.moveToFront = function() {
  		return this.each(function(){
    		this.parentNode.appendChild(this);
  		});
	};

var sel = d3.selectAll(".text_start_qtr, .text_end_qtr, .text_gdp, .text_inflation, .text_productivity, .lines_start_end, .productivity, .text_country, .text_start_date, .text_end_date, .gdp, .inflation_bars, .inflation_dots");
  	sel.moveToFront();

};

});

</script>
</body>

</html>

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

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