BMPMS/balance.html

## balance.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */


</style>
<body>

<!-- load the d3.js library -->
<link rel="stylesheet" type="text/css" href="popups.css" media="screen" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="bank.js"></script>

<script>

    popup('GDP','green','greenyellow','assets','gold')

</script>
</body>

## bank.css

#year,#description, .select {
  font: sans-serif;
  font-size: 40px;
}
#year, .select{
  text-align: center;
  background-color: #d9d9d9;
}

#description {
  text-align: center;
  background-color: #f2f2f2;
}


.interest,.inflation,.assets,.deficit,.gdp{
  font-size: 18px;
  color: #d9d9d9;

}

.info,.last_info {
  font-size: 30px;
  font-weight: 500;
  color: red;
  text-anchor: start;
}

.title1,.title2,.title3,.title4,.title5,.lowhigh{
  fill: red;
}
text {
  font: sans-serif;
  font-size: 20px;
  text-anchor: middle;
}
.axis line,
.axis path{
  fill: none;
  stroke: #000;
}

## bank.js


function add_text(value, x,y,what){

//appends text to svg at required position with required class
svg.append("text")
  .attr("y", y)
  .attr("x",x)
  .attr("class",what)
  .attr("dy", ".71em")
  .html(value)
}


function remove_all(){

  //removes elements for each year before update.

  remove_list = ['circle','rect','line','.interest','.inflation','.balance_sheet',
  '.deficit','.GDP','.info','.last_info']

  for (r in remove_list) {
    svg.selectAll(remove_list[r]).remove()
  }

}
function openPopup (what) {

      //opens either inflation, interest, GDP, balance or deficit.html

      var left = (screen.width/2)-(800/2);
      var top = (screen.height/2)-(600/2);
      specs = 'toolbar=no, location=no, directories=no, status=no, menubar=no,'
      specs = specs + ' scrollbars=no, resizable=no, copyhistory=no, width=560, '
      specs = specs + 'height=350, top='+top+', left='+left
      url = what + '.html'
      title = ""
      window.open(url, title, specs);
  }

  function add_circle(cy,fill,radius,position,what,title,bef_aft){

    //appends a circle to the svg and updates the label with current values.

    //cy = y position, fill = fill colour, radius,
    //position = 1st,2nd,3rd,4th, 5th left to right
    //what = inflation, interest etc..
    //title = un-scaled value
    //befo_aft used to position average value circles

    cx = 60 + (barWidth/2) + (barWidth*(position-1))
    if (bef_aft != 0){
      cx = cx + bef_aft
    }

    svg.append("circle")
    .attr("cx", cx)
    .attr("cy", cy)
    .attr("fill",fill)
    .attr("r", radius);

    if (bef_aft==0){

        if (what=='GDP'){
          value = '&#163;' + formatNumber(title) + 'mn'
        } else {
          value = parseFloat(title).toFixed(1) + '%'
        }
        add_text(value,cx,height+55,what)
    }

  }

  function add_line(data1,data2,position,add1,add2){

    //appends a line  to the svg

    //data1 and 2 are y positions
    //add1 and 2 used to define 1 positions depending on left or right
    //position = 1st,2nd,3rd,4th, 5th left to right


    x1 = 60  + (barWidth/2) + (barWidth*(position-1)) + add1
    x2 = 60 + (barWidth/2) + (barWidth*(position-1)) + add2

    svg.append("line")
      .attr("x1", x1)
      .attr("y1", data1)
      .attr("x2", x2)
      .attr("y2", data2)
      .attr("stroke-width", 2)
      .attr("stroke", "black")

  }


  function add_rect(position,data,title,color,what){

    //appends a rectangle to the svg and updates the label with current values.

    //data = data to define the height of the rectangle
    //position = 1st,2nd,3rd,4th, 5th left to right
    //what = inflation, interest etc..
    //title = un-scaled value
    //color = fill colour

    cx = 60 + padding + (barWidth*(position-1))

    svg.append("rect")
      .attr("x",cx)
      .attr("y", height-data)
      .attr("width", rwidth)
      .style("fill",color)
      .attr("height", data)

      cx = cx + barWidth/2

      add_text(parseFloat(title).toFixed(1) + '%',cx,height+55,what)

  }


  function formatNumber (num) {

    //parses as integer and then adds thousand separators
    num = parseInt(num)
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

  }


function draw(d){

  //add initial text to svg/html

  d3.select("#description")
  .html("Bank of England Visualisation");


  add_text('In 2015 the Bank of England published three centuries of ',100,00,"info")
  add_text('macroeconomic data.',100,30,"info")

  var introint = 1;

  //starts the animation

  var intro_interval = setInterval(function() {
    run_intro(introint);
    introint++;

  },2000)


  function run_intro(introint){

    //animation function.

    //1. starts with the intro text and explanations.

    if (introint == 1){
      add_text('The following animation looks at the data in relation to ',100,75,'info')
      add_text('historical financial crashes.',100,105,'info')

    }
    if (introint == 2){
      add_text('It looks at three key indicators (Inflation, Interest and Gdp) ',100,150,'info')
    }
    if (introint == 3){
      add_text('Interest',60 + (barWidth/2),height+30,'title1')
      d3.select('.title1').on('click',function(){ openPopup('interest')})
      add_text('Inflation',60 + (barWidth/2) + (barWidth*1),height+30,'title2')
      d3.select('.title2').on('click',function(){ openPopup('inflation')})
      add_text('Gdp',60 + (barWidth/2) + (barWidth*2),height+30,'title3')
      d3.select('.title3').on('click',function(){ openPopup('gdp')})
    }
    if (introint == 4){
      add_text('and how they performed 5 years before and after each event.',100,180,'info')

    }
    if (introint == 5){
      add_text('It also shows Bank of England Assets (Quantitive Easing)',100,225,'info')
      add_text('and UK Government Deficit as a % of Gdp.',100,255,'info')
      d3.select('.title1').style('fill','black')
      d3.select('.title2').style('fill','black')
      d3.select('.title3').style('fill','black')

    }
    if (introint == 6){
      add_text('Bank Assets/Gdp',60 + padding/2 +  (barWidth/2) + (barWidth*3),height+30,'title4')
      add_text('Gov Deficit/Gdp' ,60 + padding/2  + (barWidth/2) + (barWidth*4),height+30,'title5')
      d3.select('.title4').on('click',function(){ openPopup('balance')})
      d3.select('.title5').on('click',function(){ openPopup('deficit')})
    }
    if (introint == 7){
      d3.select('.title4').style('fill','black')
      d3.select('.title5').style('fill','black')
      add_text('Values are scaled lowest to highest',100,300,'info')

    }
    if (introint == 8){
      add_text("lowest",20,height-10,"lowhigh")
      add_text("highest",20,-10,"lowhigh")
    }
    if (introint == 9){
      d3.selectAll('.lowhigh').style('fill','black')
      add_text('from 1720 to 2015',525,300,'info')
      svg.append("text")
      .attr("y", 20)
      .attr("x",-100)
      .attr("transform", "rotate(-90)")
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style("font-size","40")
      .style("fill","red")
      .attr("class","years")
      .text("1720 - 2015")
    }
    if (introint == 10){
      d3.select('.years').style('fill','black')
      add_text('You will have a chance to explore the data further at the end.',100,360,'last_info')
      d3.select('.last_info').style('fill','red')
    }

    //2. updates the screen for row (year) in the data.

    if (introint == 11){
          update(0,d,false)
      }
    if (introint > 11){
      update(introint-11,d,false);
    }
  }

  function update(my_index,d,finished){


      //defines the data for the current row
      mydata = d[my_index]

      //clears the screen.
      remove_all()

      //sets the year (uness animation is finished when it's replaced by option box)
      if (finished == false){
        d3.select("#year")
        .html(mydata.year);
      }

      //and the description
      d3.select("#description")
      .html(mydata.Description);

      function scale_shapes(data){
        //alters the shapes to fit the scale of the avg.
        return (data/100)*height
      }

      //scales the shapes
      interest = scale_shapes(100 - mydata.interest_scale)
      int_before = scale_shapes(100 - mydata.int_before_scale)
      int_after = scale_shapes(100 - mydata.int_after_scale)
      inflation = scale_shapes(100 - mydata.inflation_scale)
      inf_before = scale_shapes(100 - mydata.inf_before_scale)
      inf_after = scale_shapes(100 - mydata.inf_after_scale)
      GDP = scale_shapes(100 - mydata.GDP_scale)
      GDP_before = scale_shapes(100 - mydata.GDP_before_scale)
      GDP_after = scale_shapes(100 - mydata.GDP_after_scale)
      balance_sheet = scale_shapes(mydata.balance_sheet)
      deficit = scale_shapes(mydata.deficit_scale)

      if (my_index != (d.length - 1)){
        //draws 'after' lines and circles unless it's the last entry
        //can't be done below as larger circle needs to be drawn last.
        add_line(GDP,GDP_after,3,0,50)
        add_circle(GDP_after,'greenyellow',6,3,'GDP',mydata.GDP_after,50)
        add_line(inflation,inf_after,2,0,50)
        add_circle(inf_after,'skyblue',6,2,'INFLATION',mydata.inf_after,50)
        add_line(interest,int_after,1,0,50)
        add_circle(int_after,'pink',6,1,'INTEREST',mydata.int_after,50)
      }

      //draws interest circles (line and average before first)
      add_line(int_before,interest,1,-50,0)
      add_circle(int_before,'pink',6,1,'INTEREST',mydata.int_before,-50)
      add_circle(interest,'red',12,1,'INTEREST',mydata.interest,0)

      //draws inflation circles (line and average before first)
      add_line(inf_before,inflation,2,-50,0)
      add_circle(inf_before,'skyblue',6,2,'INFLATION',mydata.inf_before,-50)
      add_circle(inflation,'blue',12,2,'INFLATION',mydata.inflation,0)

      //draws GDP circles (line and average before first)
      add_line(GDP_before,GDP,3,-50,0)
      add_circle(GDP_before,'greenyellow',6,3,'GDP',mydata.GDP_before,-50)
      add_circle(GDP,'green',12,3,'GDP',mydata.GDP,0)

      //draws deficit and GDP rectangles

      add_rect(4,balance_sheet,mydata.balance_sheet,'gold','BALANCE_SHEET')
      add_rect(5,deficit,mydata.deficit_perc,'rebeccapurple','DEFICIT')

      if (my_index == (d.length-1) & finished==false){
        //if the last record, stops animation and calls after animation
        clearInterval(intro_interval);
        after_animation(d)
      }

  }

  function after_animation(d){

    //populate years array (1st blank)
    years = ['   ']
    d.forEach(function(d) {
      years.push(d.year)
    })

    //sets new labels
    d3.select("#year").html("");
    d3.select("#description").html("Bank of England Visualisation");


    //draws years option box (runs update function when changed)

    var select = d3.select('#year')
    .append('select')
     .attr('class','select')
     .on('change',function(){ update(d3.select(this).property('selectedIndex')-1,d,true)})
     var options = select
     .selectAll('option')
      .data(years).enter()
       .append('option')
         .text(function (d) { return d; });

    //clears the areas
    remove_all()

    //highlights the popup variables in blue
    blue_list = ['.title1','.title2','.title3','.title4','.title5']
    for (b in blue_list) {
      d3.select(blue_list[b]).style("fill","blue");
    }


    //add instruction text
    add_text('Choose specific years from the drop down box above.',100,00,"info")
    add_text("Click on the blue indicators for individual line graphs",100,60,"info")

  }


};

function popup(what,colour1,colour2,what2,colour3){

  //Function to draw graph for popup windows - adapted from bostock

  // Set the dimensions of the canvas / graph
  var margin = {top: 40, right: 20, bottom: 40, left: 80},
      width = 500 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom;

  // Adds the svg canvas
  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 + ")");

  // Get the data
  d3.csv("bank_final.csv", function(error, data) {

    // Set the ranges
    var x = d3.scale.ordinal().rangeRoundBands([0, width]);
    var y = d3.scale.linear().range([height, 0]);

      data.forEach(function(d) {
          d[what] = +d[what];
          //checks the number format
      });

      //sets the domains
      x.domain(data.map(function(d) { return d.year; }));
      y.domain([d3.min(data, function(d) { return d[what]; }), d3.max(data, function(d) { return d[what]; })]);

      // Define the axes
      var xAxis = d3.svg.axis().scale(x)
          .orient("bottom").ticks(0);

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

      // Define the line (must come first so circles appear above)
      var valueline = d3.svg.line()
          .x(function(d) { return x(d.year); })
          .y(function(d) { return y(d[what]); });


      // Add the valueline path.
      svg.append("path")
          .attr("class", "line")
          .style("stroke",colour1)
          .attr("d", valueline(data));


      if (what2 != ""){
        //defines line and adds path for 2nd variable if specified
        var valueline_balance = d3.svg.line()
            .x(function(d) { return x(d.year); })
            .y(function(d) { return y(d[what2]); });

        svg.append("path")
            .attr("class", "balanceline")
            .style("stroke",colour3)
            .attr("d", valueline_balance(data));
      }

      //draws circles, sets graph title
      data.forEach(function(d) {


        if (what2 ==""){
          //if just one line

          circle_data = d[what]
          colour = colour2

          //sets labels as percent or pound depending
          if (what=='inflation' || what=='interest'){
            tooltip_end = parseFloat(circle_data).toFixed(1) + '%'
            title = what.toUpperCase() + ' (%)'

          } else {
            tooltip_end = '&#163;' + formatNumber(circle_data) + ' mn'
            title = what.toUpperCase() + ' (&#163;mn)'
          }

        } else {

          //if two lines, 2nd line appends to 2nd data.
          circle_data = d[what2]
          title = what2.toUpperCase() + ' and GDP (&#163;mn)'
          tooltip_end = '&#163;' + formatNumber(circle_data) + ' mn'
          colour = colour3

        }
        //appends circles
        svg.append("circle")
        .attr("cx",  x(d.year))
        .attr("cy", y(circle_data))
        .attr("fill",colour)
        .attr("r", '5')
        .append("svg:title")
        .attr("class","tooltip")
        .html( d.year + " : " + d.Description + ' - ' + tooltip_end);
    });


      // Add the X Axis
      xAx = svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (height + 10) + ")")
          .call(xAxis);

      xAx.selectAll('text').remove()

      svg.append("text")
      .attr("y", height+30)
      .attr("x",width/2)
      .style("text-anchor", "middle")
      .style("font-size","20")
      .style("fill","#595959")
      .text("1720 - 2015")

      //adds the title

      svg.append("text")
      .attr("y", -20)
      .attr("x",width/2)
      .style("text-anchor", "middle")
      .style("font-size","20")
      .style("fill","black")
      .html(title)

      // Add the Y Axis
      svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(-10,0)")
          .call(yAxis);

  });
}

## bank_final.csv

          
            balance_sheet
            GDP
            GDP_before
            GDP_after
            deficit
            deficit_perc
            year
            assets
            Description
            interest
            inflation
            int_before
            int_after
            inf_before
            inf_after
            GDP_scale
            deficit_scale
            interest_scale
            inflation_scale
            GDP_before_scale
            GDP_after_scale
            int_before_scale
            int_after_scale
            inf_before_scale
            inf_after_scale

            
              0
              11.39158789722647
              14130.410202291756
              12920.513044950205
              13615.818320813481
              0.2610000000000003
              -0.01563746460529457
              1720
              10.380847
              South Sea Bubble
              5.0
              5.154639175257742
              4.409722222222222
              5.0
              -0.08779521258472789
              0.12374203101781005
              0.0
              12.62910844647834
              33.54037267080744
              48.400912530309256
              0.0
              0.0
              29.1407867494824
              33.54037267080744
              12.732454584082433
              29.144612064978233

            
              1
              15.06282609647725
              23926.068690424217
              22135.169212952595
              24451.81598148457
              0.8674999999999997
              0.4047118266016064
              1792
              29.626042
              Panic of 1792
              5.0
              -0.1300390117035164
              5.0
              5.0
              1.6385948143775362
              2.319134196621041
              0.5384885131311847
              9.003262010534192
              33.54037267080744
              25.794052098893573
              0.5062128746595675
              0.595509746213267
              33.54037267080744
              33.54037267080744
              21.438753637747894
              39.327430650470404

            
              2
              13.04185760684877
              33387.71920605352
              33648.52589613247
              37143.558696926666
              0.6000000000000014
              0.4196046370920379
              1819
              59.05447
              Panic of 1819
              5.0
              -2.29612034837686
              5.0
              4.569444444444445
              -2.6125399378943275
              -2.696856534005576
              1.0586158863037696
              8.87479969367651
              33.54037267080744
              16.527963090467892
              1.1387062935471732
              1.2930049580209442
              33.54037267080744
              30.33126293995859
              0.0
              16.06191825740477

            
              3
              12.74683775461586
              41585.09756877363
              38509.78842404669
              42260.77980174609
              3.600000000000001
              0.9620985170444321
              1825
              55.645776
              Panic of 1825
              4.083333333333333
              4.127579737335822
              4.416666666666667
              4.263888888888888
              -1.6262398530534625
              -0.5138473457019329
              1.5092434874459144
              4.195359184809991
              26.708074534161483
              44.00734521240603
              1.4057627776811614
              1.5742301056147454
              29.192546583850927
              28.053830227743262
              4.9739765413206385
              26.187301267893275

            
              4
              14.67498993809533
              51868.527143874366
              49532.536491255036
              54299.86435374347
              -0.7000000000000028
              -0.2788771313527995
              1837
              73.670386
              Panic of 1837
              5.0
              3.354978354978343
              4.236111111111112
              4.75
              -1.427367090135829
              0.8436582489554235
              2.0745458311825757
              14.899759610740125
              33.54037267080744
              40.702301650213734
              2.0113043067428578
              2.2358574343305406
              27.846790890269162
              31.67701863354037
              5.976905034041522
              32.48377686608704

            
              5
              10.52197383491714
              63214.7674565969
              59051.30112335698
              66122.83745271487
              -3.0
              0.4920846085408905
              1847
              59.870856
              Panic of 1847
              5.291666666666667
              11.00726895119418
              3.840277777777778
              3.2500000000000004
              1.5881866725278766
              -2.1217783554537086
              2.6982731776421502
              8.24960238359992
              35.71428571428571
              73.4373631561556
              2.534223569249491
              2.8856080092322713
              24.896480331262936
              20.49689440993788
              21.184542045449163
              18.729285325766284

            
              6
              8.612770334264916
              77087.76403466891
              73411.00054053614
              80923.03527099236
              -1.949999999999996
              -1.228298965219025
              1857
              61.529857
              Panic of 1857
              6.625
              -3.61328125
              4.763888888888889
              4.097222222222222
              2.869582005380375
              -0.3022430946055152
              3.4609017757144755
              23.08927686351692
              45.65217391304347
              10.893396213305977
              3.323082598679079
              3.6989767753273384
              31.78053830227742
              26.811594202898547
              27.64670343398278
              27.168778625147894

            
              7
              7.868210508335045
              96697.32964724988
              92742.67083107434
              108042.60143171373
              3.775000000000006
              -0.4874270488320049
              1869
              73.044064
              Black Friday
              3.125
              -6.159769008662181
              4.375
              3.618055555555556
              0.3124846377195449
              -0.41187028060118297
              4.538881968946015
              16.698668258444318
              19.565217391304344
              1.4210854715202004e-14
              4.385079944139008
              5.189376318361695
              28.881987577639748
              23.240165631469978
              14.751092335389146
              26.660298288685922

            
              8
              7.781951203464658
              111347.337363469
              104552.56606224431
              116615.08140773018
              2.150000000000006
              0.4500519951490277
              1873
              90.346661
              Panic of 1873
              4.75
              0.7838014369693127
              3.340277777777778
              3.4722222222222228
              -0.24382068490909603
              -1.3561009048674204
              5.344224548214626
              8.612167052194279
              31.67701863354037
              29.703289851667336
              5.03386389281836
              5.660490795754441
              21.169772256728777
              22.153209109730852
              11.945607810856103
              22.28070301618152

            
              9
              7.281826216293539
              129860.8762275323
              122840.18362696374
              132944.07033681465
              0.4000000000000092
              0.07190817454040346
              1882
              86.075781
              Paris Bourse
              4.166666666666667
              0.1474926253687414
              3.2500000000000004
              3.3055555555555554
              -1.1088296538932312
              -1.6124797026472162
              6.361953782832572
              11.873957788872875
              27.32919254658384
              26.98128030137424
              6.038505551642018
              6.557876745584593
              20.49689440993788
              20.910973084886137
              7.583310386484271
              21.091549284168963

            
              10
              7.324849664757648
              132521.5721179883
              127603.3175932552
              137102.96021143
              -0.1750000000000007
              0.05521732436732162
              1884
              89.54207
              Panic of 1884
              3.041666666666667
              -3.441860465116278
              3.2222222222222228
              3.1944444444444446
              -1.1663075194134083
              -1.5340046321943106
              6.508217985048432
              12.017929625816354
              18.944099378881972
              11.626702125569736
              6.300171282137484
              6.786435253192067
              20.28985507246378
              20.08281573498965
              7.293445710269964
              21.45553774073069

            
              11
              7.28504600236658
              147386.9701321962
              147233.4816797866
              161728.71989393383
              0.4000000000000057
              0.1552363968986331
              1893
              97.377102
              Panic of 1893
              3.041666666666667
              -1.909547738693462
              3.402777777777778
              2.597222222222222
              0.05580723097906074
              -0.39021569633117087
              7.325401034403626
              11.15518570010912
              18.944099378881972
              18.181648087840614
              7.378566570155769
              8.139783634953261
              21.635610766045545
              15.631469979296057
              13.456651201867203
              26.760738067337144

            
              12
              10.0924421513452
              166066.2391795081
              154426.21937823118
              176233.34219752086
              3.024999999999999
              0.2384285693390407
              1896
              146.035039
              Panic of 1896
              2.583333333333333
              -0.2134471718249813
              2.5902777777777772
              3.319444444444444
              -0.822980416126491
              1.0548359258061761
              8.352240815297407
              10.437587149923791
              15.527950310559007
              25.43724766009929
              7.773704094618736
              8.936908571430394
              15.579710144927517
              21.014492753623188
              9.024866992692566
              33.463275657404836

            
              13
              6.939422050235173
              184974.5293835638
              176233.34219752086
              189848.71586804697
              -83.0
              -3.958525345917329
              1901
              124.46528
              Panic of 1901
              3.75
              -0.3000000000000114
              3.319444444444444
              3.569444444444444
              1.0548359258061761
              0.11761409304326986
              9.391670384036487
              46.63964746924024
              24.22360248447204
              25.06699092217248
              8.971691966237856
              9.685163413581392
              21.014492753623188
              22.877846790890274
              18.494818964955257
              29.116189042579066

            
              14
              6.709963865198507
              202300.1119900108
              192736.31296912147
              204497.81830699218
              6.0
              -0.1034263311153944
              1907
              129.753493
              Panic of 1907
              5.125
              1.588877855014886
              3.7986111111111107
              3.8472222222222214
              0.4324270688790861
              1.3795634954157405
              10.344095096288342
              13.386357133248566
              34.47204968944098
              33.147255515325966
              9.87829294216182
              10.490228489161012
              24.585921325051757
              24.94824016563146
              15.355969946235916
              34.969449352860934

            
              15
              6.442613748949001
              213407.6609267377
              235141.8503424582
              210533.7500000001
              21.0
              -7.871555909063793
              1920
              336.390198
              Depression of 1920-21
              6.75
              15.39999999999998
              5.423611111111112
              4.743055555555555
              17.216666666666665
              -2.2666666666666724
              10.95470106205535
              80.39264341313395
              46.583850931677006
              92.22864130401211
              12.207867544172672
              10.821942860391431
              36.69772256728779
              31.62525879917183
              100.0
              18.05725441878046

            
              16
              12.0831073744674
              245205.2442078899
              230765.3798267586
              240977.87064287215
              -32.0
              -0.1350511353896156
              1929
              536.823656
              Wall Street Crash
              5.5
              -0.9000000000000057
              4.701388888888888
              3.3125
              -0.8000000000000066
              -2.1166666666666694
              12.70268292187383
              13.659146183364212
              37.26708074534161
              22.50030364643341
              11.967443411115141
              12.49504866250183
              31.314699792960653
              20.96273291925465
              9.140758750667374
              18.75299471145121

            
              17
              14.17945130018508
              285387.2648716344
              258291.64595074105
              321218.86991233565
              -79.0
              -0.7472064638850211
              1937
              683.158232
              Recession of 1937-38
              2.0
              3.40000000000002
              2.138888888888889
              2.0416666666666665
              0.01666666666666572
              7.0833333333333455
              14.911575421345958
              18.93947200405599
              11.180124223602476
              40.89489578923037
              13.479615981552627
              16.90482232684012
              12.215320910973077
              11.490683229813655
              13.259262748093207
              61.425065995256205

            
              18
              8.3482366406753
              703556.0
              651650.6666666666
              750821.6666666666
              -255.0
              1.350239645182059
              1971
              4668.0
              Brazilian markets crash
              5.916666666666667
              9.414929388029577
              6.861111111111111
              9.427083333333334
              5.228951257568973
              13.340289095081372
              37.899214352411825
              0.8473337318339181
              40.3726708074534
              66.62563366377138
              35.089038733682486
              40.514337618286376
              47.412008281573485
              66.53726708074532
              39.54515857260597
              90.44650754796552

            
              19
              7.800298698527843
              781583.0
              701694.5
              780767.3333333334
              -2740.0
              -2.123604295569305
              1973
              5484.0
              1973-74 Stock market crash
              10.10416666666667
              9.346330275229363
              7.440972222222224
              10.32986111111111
              6.944599571948982
              14.308401130945448
              42.18852713980535
              30.8119962995645
              71.58385093167702
              66.33217954718589
              37.83822788070882
              42.16005007737803
              51.73395445134576
              73.26604554865423
              48.197286459484644
              94.93687122243306

            
              20
              4.412367552544728
              848700.0
              832004.3333333334
              929493.8333333334
              -7359.0
              -3.065832899079382
              1982
              12701.0
              Souk-Al-Manakh crash
              11.83333333333333
              8.111031002162918
              12.111111111111112
              10.694444444444443
              11.477051983782204
              4.792888632427252
              45.87809365333902
              38.93946622837679
              84.47204968944095
              61.04780133733688
              44.996879720279004
              50.333555004538134
              86.54244306418218
              75.98343685300205
              71.05474365492631
              50.80136821822598

            
              21
              3.886197647472147
              1024346.0
              929493.8333333334
              1092880.3333333333
              -6594.0
              -2.017192415879
              1987
              17256.0
              Black Monday
              9.625
              3.204947989879088
              10.694444444444443
              11.59027777777778
              4.792888632427252
              5.161436268785292
              55.53373380167901
              29.894109335584112
              68.01242236024844
              40.06049993508915
              50.35252611059063
              59.31272390033977
              75.98343685300205
              82.66045548654245
              37.3460659218621
              52.51079115411163

            
              22
              3.144773784730718
              1111618.0
              1006498.3333333334
              1128558.0
              3801.0
              0.6478052741572097
              1989
              17350.0
              Friday 13th mini crash
              13.91666666666667
              5.237595169335734
              11.125
              10.17013888888889
              4.118018552637295
              4.748244410397857
              60.33126421527185
              6.906387984911023
              100.0
              48.75578268771971
              54.582816269661635
              61.27344767377339
              79.19254658385091
              72.07556935817804
              33.94265148754616
              50.59429632422071

            
              23
              2.971109602474165
              1107059.0
              1069746.3333333333
              1166108.3333333333
              -18374.0
              -0.645847476804707
              1991
              19694.0
              Japanese stock market crash
              11.54166666666667
              7.532649253731336
              11.826388888888891
              7.500000000000001
              5.005523385145449
              3.5559914610257124
              60.080646134380274
              18.065170251337744
              82.29813664596273
              58.57359288030509
              58.057384534904855
              63.33708686730315
              84.42028985507247
              52.17391304347826
              38.418397039080304
              45.064306884662585

            
              24
              3.014559301153545
              1282602.0
              1195365.5
              1389981.0
              -15444.0
              -3.341919587859783
              1997
              26917.0
              Asian financial crisis
              6.583333333333333
              1.824606271085031
              6.673611111111112
              5.697916666666667
              2.604650963917995
              1.3332659073607165
              69.73062415016228
              41.32093315948982
              45.341614906832284
              34.155657392088244
              64.95835168021065
              75.64037070748275
              46.01449275362319
              38.74223602484471
              26.31063867483381
              34.754708703105265

            
              25
              3.014559301153545
              1282602.0
              1195365.5
              1389981.0
              -15444.0
              -3.341919587859783
              1997
              26917.0
              October 27 mini crash
              6.583333333333333
              1.824606271085031
              6.673611111111112
              5.697916666666667
              2.604650963917995
              1.3332659073607165
              69.73062415016228
              41.32093315948982
              45.341614906832284
              34.155657392088244
              64.95835168021065
              75.64037070748275
              46.01449275362319
              38.74223602484471
              26.31063867483381
              34.754708703105265

            
              26
              3.480942211523611
              1323527.0
              1230779.5
              1433458.6666666667
              651.0
              -1.644982452029334
              1998
              32681.0
              Russian financial crisis
              7.208333333333333
              1.557397519295037
              6.305555555555556
              5.215277777777778
              2.1539591386259125
              1.2560969726820612
              71.98035982914622
              26.683502825525945
              49.999999999999986
              33.01258855344574
              66.90384182290802
              78.02975607405443
              43.2712215320911
              35.144927536231876
              24.03777000045922
              34.39677845511581

            
              27
              3.501831406940565
              1456837.0
              1348639.0
              1562396.1666666667
              7450.0
              1.448472193053144
              2001
              37850.0
              September 11 attacks
              5.083333333333333
              1.233511995184713
              6.024305555555556
              4.409722222222221
              1.5234984854474878
              1.5971994811834425
              79.30869857967402
              0.0
              34.161490683229815
              31.627067130895654
              73.37852684784849
              85.11572455677745
              41.17494824016563
              29.140786749482388
              20.858315240865323
              35.97890351575229

            
              28
              5.289136629560525
              1712996.0
              1605089.3333333333
              1682560.8333333333
              -40687.0
              -2.50232886612386
              2007
              76991.0
              Financial crisis 2007-2008
              5.520833333333333
              2.322841623486951
              4.482638888888888
              2.045138888888889
              1.7787544192338158
              3.1133640961104283
              93.39031230704965
              34.078796465700165
              37.4223602484472
              36.28701462431057
              87.46678560403127
              91.7195678198849
              29.68426501035195
              11.516563146997925
              22.145587792292645
              43.01128226859435

            
              29
              16.27421338779131
              1659772.0
              1667238.0
              1736217.6666666667
              -144150.0
              -10.14466333083025
              2010
              247280.0
              2010 Flash Crash
              0.5
              3.298171575771704
              3.4270833333333335
              0.5
              2.628984235520638
              2.4426727620639355
              90.46447402291426
              100.0
              0.0
              40.4592929212714
              90.88096130804057
              94.66836572493753
              21.816770186335404
              0.0
              26.433352972424743
              39.90043570165282

            
              30
              22.3092708836311
              1833233.0
              1736217.6666666667
              1833233.0
              -79242.0
              -5.504312804530091
              2015
              406582.0
              2015-2016 stock market crash
              0.5
              0.04009937308256895
              0.5
              0.5
              2.4426727620639355
              0.04009937308256895
              100.0
              59.97329180927436
              0.0
              26.521872144468972
              94.67040225079064
              100.0
              0.0
              0.0
              25.493771892998964
              28.75665494956742

## deficit.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */


</style>
<body>

<!-- load the d3.js library -->
<link rel="stylesheet" type="text/css" href="popups.css" media="screen" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="bank.js"></script>

<script>

    popup('GDP','green','greenyellow','deficit','rebeccapurple')

</script>
</body>

## gdp.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */


</style>
<body>

<!-- load the d3.js library -->
<link rel="stylesheet" type="text/css" href="popups.css" media="screen" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="bank.js"></script>

<script>

    popup('GDP','green','greenyellow','','')

</script>
</body>

## index.html
<html>

<head>
</head>
  <body>
    <table align='center'>
  <tbody>
  <tr>
  <td id='year' width='100'></td>
  <td id='description'></td>
  </tr>
  <tr>
  <td colspan="2"><div id='vis'></div></td>
  </tr>
  </tbody>
  </table>
</body>
<link rel="stylesheet" type="text/css" href="bank.css" media="screen" />
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="bank.js" charset="utf-8"></script>
<script>

// draw svg and axes and call draw function in bank.js

//set margins

  var margin = {top: 20, right: 20, bottom: 70, left: 40},
     width = 900 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;

//draw svg in VIS table cell

 var svg = d3.select("#vis").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 + ")");


//x-axis = range, axis, append to svg.
var x = d3.scale
          .ordinal()
          .rangeRoundBands([0, width-60], 0.1,0)
          .domain(['Interest','Inflation','GDP','Bank Assets/GDP','Gov Deficit/GDP']);

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

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(60," + (height + 20) + ")")
.call(xAxis)
.selectAll('text').remove()


// y-axis = range, axis, append to svg.
var y = d3.scale.linear()
    .range([height, 0])
    .domain(['','']);

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


  svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(60,0)")
  .call(yAxis);


  //calculation to take account of the outerPadding and barPadding used by rangeRoundBands
  var padding = ((width-60-(x.rangeBand()*5))/5)
  // svgwidth - 60 (axis offset) - columnwidths(rangebands*5)/number of pads (4 bar pads, 1 outer (half left,half right))
  var barWidth = x.rangeBand() + padding
  rwidth = x.rangeBand()


  //get the data and call draw function
  d3.csv("bank_final.csv", function(d) {

        return d;
    }, draw);

  </script>

</html>

## inflation.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */


</style>
<body>

<!-- load the d3.js library -->
<link rel="stylesheet" type="text/css" href="popups.css" media="screen" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="bank.js"></script>

<script>

    popup('inflation','red','orange','','')

</script>
</body>

## interest.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */


</style>
<body>

<!-- load the d3.js library -->
<link rel="stylesheet" type="text/css" href="popups.css" media="screen" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="bank.js"></script>

<script>

    popup('interest','blue','skyblue','','')

</script>
</body>

## popups.css
body { font: 12px san-serif;}

path {
    stroke-width: 2;
    fill: none;
}

.axis path {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.axis.tick line{
      visibility:hidden;
    }

.tooltip {
  font-size: 40px
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */


	</style>
	<body>

	<!-- load the d3.js library -->
	<link rel="stylesheet" type="text/css" href="popups.css" media="screen" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="bank.js"></script>

	<script>

	popup('GDP','green','greenyellow','assets','gold')

	</script>
	</body>

	#year,#description, .select {
	font: sans-serif;
	font-size: 40px;
	}
	#year, .select{
	text-align: center;
	background-color: #d9d9d9;
	}

	#description {
	text-align: center;
	background-color: #f2f2f2;
	}


	.interest,.inflation,.assets,.deficit,.gdp{
	font-size: 18px;
	color: #d9d9d9;

	}

	.info,.last_info {
	font-size: 30px;
	font-weight: 500;
	color: red;
	text-anchor: start;
	}

	.title1,.title2,.title3,.title4,.title5,.lowhigh{
	fill: red;
	}
	text {
	font: sans-serif;
	font-size: 20px;
	text-anchor: middle;
	}
	.axis line,
	.axis path{
	fill: none;
	stroke: #000;
	}




	function add_text(value, x,y,what){

	//appends text to svg at required position with required class
	svg.append("text")
	.attr("y", y)
	.attr("x",x)
	.attr("class",what)
	.attr("dy", ".71em")
	.html(value)
	}


	function remove_all(){

	//removes elements for each year before update.

	remove_list = ['circle','rect','line','.interest','.inflation','.balance_sheet',
	'.deficit','.GDP','.info','.last_info']

	for (r in remove_list) {
	svg.selectAll(remove_list[r]).remove()
	}

	}
	function openPopup (what) {

	//opens either inflation, interest, GDP, balance or deficit.html

	var left = (screen.width/2)-(800/2);
	var top = (screen.height/2)-(600/2);
	specs = 'toolbar=no, location=no, directories=no, status=no, menubar=no,'
	specs = specs + ' scrollbars=no, resizable=no, copyhistory=no, width=560, '
	specs = specs + 'height=350, top='+top+', left='+left
	url = what + '.html'
	title = ""
	window.open(url, title, specs);
	}

	function add_circle(cy,fill,radius,position,what,title,bef_aft){

	//appends a circle to the svg and updates the label with current values.

	//cy = y position, fill = fill colour, radius,
	//position = 1st,2nd,3rd,4th, 5th left to right
	//what = inflation, interest etc..
	//title = un-scaled value
	//befo_aft used to position average value circles

	cx = 60 + (barWidth/2) + (barWidth*(position-1))
	if (bef_aft != 0){
	cx = cx + bef_aft
	}

	svg.append("circle")
	.attr("cx", cx)
	.attr("cy", cy)
	.attr("fill",fill)
	.attr("r", radius);

	if (bef_aft==0){

	if (what=='GDP'){
	value = '£' + formatNumber(title) + 'mn'
	} else {
	value = parseFloat(title).toFixed(1) + '%'
	}
	add_text(value,cx,height+55,what)
	}

	}

	function add_line(data1,data2,position,add1,add2){

	//appends a line to the svg

	//data1 and 2 are y positions
	//add1 and 2 used to define 1 positions depending on left or right
	//position = 1st,2nd,3rd,4th, 5th left to right


	x1 = 60 + (barWidth/2) + (barWidth*(position-1)) + add1
	x2 = 60 + (barWidth/2) + (barWidth*(position-1)) + add2

	svg.append("line")
	.attr("x1", x1)
	.attr("y1", data1)
	.attr("x2", x2)
	.attr("y2", data2)
	.attr("stroke-width", 2)
	.attr("stroke", "black")

	}


	function add_rect(position,data,title,color,what){

	//appends a rectangle to the svg and updates the label with current values.

	//data = data to define the height of the rectangle
	//position = 1st,2nd,3rd,4th, 5th left to right
	//what = inflation, interest etc..
	//title = un-scaled value
	//color = fill colour

	cx = 60 + padding + (barWidth*(position-1))

	svg.append("rect")
	.attr("x",cx)
	.attr("y", height-data)
	.attr("width", rwidth)
	.style("fill",color)
	.attr("height", data)

	cx = cx + barWidth/2

	add_text(parseFloat(title).toFixed(1) + '%',cx,height+55,what)

	}



	function formatNumber (num) {

	//parses as integer and then adds thousand separators
	num = parseInt(num)
	return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

	}


	function draw(d){

	//add initial text to svg/html

	d3.select("#description")
	.html("Bank of England Visualisation");


	add_text('In 2015 the Bank of England published three centuries of ',100,00,"info")
	add_text('macroeconomic data.',100,30,"info")

	var introint = 1;

	//starts the animation

	var intro_interval = setInterval(function() {
	run_intro(introint);
	introint++;

	},2000)



	function run_intro(introint){

	//animation function.

	//1. starts with the intro text and explanations.

	if (introint == 1){
	add_text('The following animation looks at the data in relation to ',100,75,'info')
	add_text('historical financial crashes.',100,105,'info')

	}
	if (introint == 2){
	add_text('It looks at three key indicators (Inflation, Interest and Gdp) ',100,150,'info')
	}
	if (introint == 3){
	add_text('Interest',60 + (barWidth/2),height+30,'title1')
	d3.select('.title1').on('click',function(){ openPopup('interest')})
	add_text('Inflation',60 + (barWidth/2) + (barWidth*1),height+30,'title2')
	d3.select('.title2').on('click',function(){ openPopup('inflation')})
	add_text('Gdp',60 + (barWidth/2) + (barWidth*2),height+30,'title3')
	d3.select('.title3').on('click',function(){ openPopup('gdp')})
	}
	if (introint == 4){
	add_text('and how they performed 5 years before and after each event.',100,180,'info')

	}
	if (introint == 5){
	add_text('It also shows Bank of England Assets (Quantitive Easing)',100,225,'info')
	add_text('and UK Government Deficit as a % of Gdp.',100,255,'info')
	d3.select('.title1').style('fill','black')
	d3.select('.title2').style('fill','black')
	d3.select('.title3').style('fill','black')

	}
	if (introint == 6){
	add_text('Bank Assets/Gdp',60 + padding/2 + (barWidth/2) + (barWidth*3),height+30,'title4')
	add_text('Gov Deficit/Gdp' ,60 + padding/2 + (barWidth/2) + (barWidth*4),height+30,'title5')
	d3.select('.title4').on('click',function(){ openPopup('balance')})
	d3.select('.title5').on('click',function(){ openPopup('deficit')})
	}
	if (introint == 7){
	d3.select('.title4').style('fill','black')
	d3.select('.title5').style('fill','black')
	add_text('Values are scaled lowest to highest',100,300,'info')

	}
	if (introint == 8){
	add_text("lowest",20,height-10,"lowhigh")
	add_text("highest",20,-10,"lowhigh")
	}
	if (introint == 9){
	d3.selectAll('.lowhigh').style('fill','black')
	add_text('from 1720 to 2015',525,300,'info')
	svg.append("text")
	.attr("y", 20)
	.attr("x",-100)
	.attr("transform", "rotate(-90)")
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.style("font-size","40")
	.style("fill","red")
	.attr("class","years")
	.text("1720 - 2015")
	}
	if (introint == 10){
	d3.select('.years').style('fill','black')
	add_text('You will have a chance to explore the data further at the end.',100,360,'last_info')
	d3.select('.last_info').style('fill','red')
	}

	//2. updates the screen for row (year) in the data.

	if (introint == 11){
	update(0,d,false)
	}
	if (introint > 11){
	update(introint-11,d,false);
	}
	}

	function update(my_index,d,finished){


	//defines the data for the current row
	mydata = d[my_index]

	//clears the screen.
	remove_all()

	//sets the year (uness animation is finished when it's replaced by option box)
	if (finished == false){
	d3.select("#year")
	.html(mydata.year);
	}

	//and the description
	d3.select("#description")
	.html(mydata.Description);

	function scale_shapes(data){
	//alters the shapes to fit the scale of the avg.
	return (data/100)*height
	}

	//scales the shapes
	interest = scale_shapes(100 - mydata.interest_scale)
	int_before = scale_shapes(100 - mydata.int_before_scale)
	int_after = scale_shapes(100 - mydata.int_after_scale)
	inflation = scale_shapes(100 - mydata.inflation_scale)
	inf_before = scale_shapes(100 - mydata.inf_before_scale)
	inf_after = scale_shapes(100 - mydata.inf_after_scale)
	GDP = scale_shapes(100 - mydata.GDP_scale)
	GDP_before = scale_shapes(100 - mydata.GDP_before_scale)
	GDP_after = scale_shapes(100 - mydata.GDP_after_scale)
	balance_sheet = scale_shapes(mydata.balance_sheet)
	deficit = scale_shapes(mydata.deficit_scale)

	if (my_index != (d.length - 1)){
	//draws 'after' lines and circles unless it's the last entry
	//can't be done below as larger circle needs to be drawn last.
	add_line(GDP,GDP_after,3,0,50)
	add_circle(GDP_after,'greenyellow',6,3,'GDP',mydata.GDP_after,50)
	add_line(inflation,inf_after,2,0,50)
	add_circle(inf_after,'skyblue',6,2,'INFLATION',mydata.inf_after,50)
	add_line(interest,int_after,1,0,50)
	add_circle(int_after,'pink',6,1,'INTEREST',mydata.int_after,50)
	}

	//draws interest circles (line and average before first)
	add_line(int_before,interest,1,-50,0)
	add_circle(int_before,'pink',6,1,'INTEREST',mydata.int_before,-50)
	add_circle(interest,'red',12,1,'INTEREST',mydata.interest,0)

	//draws inflation circles (line and average before first)
	add_line(inf_before,inflation,2,-50,0)
	add_circle(inf_before,'skyblue',6,2,'INFLATION',mydata.inf_before,-50)
	add_circle(inflation,'blue',12,2,'INFLATION',mydata.inflation,0)

	//draws GDP circles (line and average before first)
	add_line(GDP_before,GDP,3,-50,0)
	add_circle(GDP_before,'greenyellow',6,3,'GDP',mydata.GDP_before,-50)
	add_circle(GDP,'green',12,3,'GDP',mydata.GDP,0)

	//draws deficit and GDP rectangles

	add_rect(4,balance_sheet,mydata.balance_sheet,'gold','BALANCE_SHEET')
	add_rect(5,deficit,mydata.deficit_perc,'rebeccapurple','DEFICIT')

	if (my_index == (d.length-1) & finished==false){
	//if the last record, stops animation and calls after animation
	clearInterval(intro_interval);
	after_animation(d)
	}

	}

	function after_animation(d){

	//populate years array (1st blank)
	years = [' ']
	d.forEach(function(d) {
	years.push(d.year)
	})

	//sets new labels
	d3.select("#year").html("");
	d3.select("#description").html("Bank of England Visualisation");


	//draws years option box (runs update function when changed)

	var select = d3.select('#year')
	.append('select')
	.attr('class','select')
	.on('change',function(){ update(d3.select(this).property('selectedIndex')-1,d,true)})
	var options = select
	.selectAll('option')
	.data(years).enter()
	.append('option')
	.text(function (d) { return d; });

	//clears the areas
	remove_all()

	//highlights the popup variables in blue
	blue_list = ['.title1','.title2','.title3','.title4','.title5']
	for (b in blue_list) {
	d3.select(blue_list[b]).style("fill","blue");
	}


	//add instruction text
	add_text('Choose specific years from the drop down box above.',100,00,"info")
	add_text("Click on the blue indicators for individual line graphs",100,60,"info")

	}


	};

	function popup(what,colour1,colour2,what2,colour3){

	//Function to draw graph for popup windows - adapted from bostock

	// Set the dimensions of the canvas / graph
	var margin = {top: 40, right: 20, bottom: 40, left: 80},
	width = 500 - margin.left - margin.right,
	height = 300 - margin.top - margin.bottom;

	// Adds the svg canvas
	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 + ")");

	// Get the data
	d3.csv("bank_final.csv", function(error, data) {

	// Set the ranges
	var x = d3.scale.ordinal().rangeRoundBands([0, width]);
	var y = d3.scale.linear().range([height, 0]);

	data.forEach(function(d) {
	d[what] = +d[what];
	//checks the number format
	});

	//sets the domains
	x.domain(data.map(function(d) { return d.year; }));
	y.domain([d3.min(data, function(d) { return d[what]; }), d3.max(data, function(d) { return d[what]; })]);

	// Define the axes
	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(0);

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

	// Define the line (must come first so circles appear above)
	var valueline = d3.svg.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d[what]); });


	// Add the valueline path.
	svg.append("path")
	.attr("class", "line")
	.style("stroke",colour1)
	.attr("d", valueline(data));



	if (what2 != ""){
	//defines line and adds path for 2nd variable if specified
	var valueline_balance = d3.svg.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d[what2]); });

	svg.append("path")
	.attr("class", "balanceline")
	.style("stroke",colour3)
	.attr("d", valueline_balance(data));
	}

	//draws circles, sets graph title
	data.forEach(function(d) {


	if (what2 ==""){
	//if just one line

	circle_data = d[what]
	colour = colour2

	//sets labels as percent or pound depending
	if (what=='inflation' \|\| what=='interest'){
	tooltip_end = parseFloat(circle_data).toFixed(1) + '%'
	title = what.toUpperCase() + ' (%)'

	} else {
	tooltip_end = '£' + formatNumber(circle_data) + ' mn'
	title = what.toUpperCase() + ' (£mn)'
	}

	} else {

	//if two lines, 2nd line appends to 2nd data.
	circle_data = d[what2]
	title = what2.toUpperCase() + ' and GDP (£mn)'
	tooltip_end = '£' + formatNumber(circle_data) + ' mn'
	colour = colour3

	}
	//appends circles
	svg.append("circle")
	.attr("cx", x(d.year))
	.attr("cy", y(circle_data))
	.attr("fill",colour)
	.attr("r", '5')
	.append("svg:title")
	.attr("class","tooltip")
	.html( d.year + " : " + d.Description + ' - ' + tooltip_end);
	});


	// Add the X Axis
	xAx = svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (height + 10) + ")")
	.call(xAxis);

	xAx.selectAll('text').remove()

	svg.append("text")
	.attr("y", height+30)
	.attr("x",width/2)
	.style("text-anchor", "middle")
	.style("font-size","20")
	.style("fill","#595959")
	.text("1720 - 2015")

	//adds the title

	svg.append("text")
	.attr("y", -20)
	.attr("x",width/2)
	.style("text-anchor", "middle")
	.style("font-size","20")
	.style("fill","black")
	.html(title)

	// Add the Y Axis
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(-10,0)")
	.call(yAxis);

	});
	}
	balance_sheet	GDP	GDP_before	GDP_after	deficit	deficit_perc	year	assets	Description	interest	inflation	int_before	int_after	inf_before	inf_after	GDP_scale	deficit_scale	interest_scale	inflation_scale	GDP_before_scale	GDP_after_scale	int_before_scale	int_after_scale	inf_before_scale	inf_after_scale
0	11.39158789722647	14130.410202291756	12920.513044950205	13615.818320813481	0.2610000000000003	-0.01563746460529457	1720	10.380847	South Sea Bubble	5.0	5.154639175257742	4.409722222222222	5.0	-0.08779521258472789	0.12374203101781005	0.0	12.62910844647834	33.54037267080744	48.400912530309256	0.0	0.0	29.1407867494824	33.54037267080744	12.732454584082433	29.144612064978233
1	15.06282609647725	23926.068690424217	22135.169212952595	24451.81598148457	0.8674999999999997	0.4047118266016064	1792	29.626042	Panic of 1792	5.0	-0.1300390117035164	5.0	5.0	1.6385948143775362	2.319134196621041	0.5384885131311847	9.003262010534192	33.54037267080744	25.794052098893573	0.5062128746595675	0.595509746213267	33.54037267080744	33.54037267080744	21.438753637747894	39.327430650470404
2	13.04185760684877	33387.71920605352	33648.52589613247	37143.558696926666	0.6000000000000014	0.4196046370920379	1819	59.05447	Panic of 1819	5.0	-2.29612034837686	5.0	4.569444444444445	-2.6125399378943275	-2.696856534005576	1.0586158863037696	8.87479969367651	33.54037267080744	16.527963090467892	1.1387062935471732	1.2930049580209442	33.54037267080744	30.33126293995859	0.0	16.06191825740477
3	12.74683775461586	41585.09756877363	38509.78842404669	42260.77980174609	3.600000000000001	0.9620985170444321	1825	55.645776	Panic of 1825	4.083333333333333	4.127579737335822	4.416666666666667	4.263888888888888	-1.6262398530534625	-0.5138473457019329	1.5092434874459144	4.195359184809991	26.708074534161483	44.00734521240603	1.4057627776811614	1.5742301056147454	29.192546583850927	28.053830227743262	4.9739765413206385	26.187301267893275
4	14.67498993809533	51868.527143874366	49532.536491255036	54299.86435374347	-0.7000000000000028	-0.2788771313527995	1837	73.670386	Panic of 1837	5.0	3.354978354978343	4.236111111111112	4.75	-1.427367090135829	0.8436582489554235	2.0745458311825757	14.899759610740125	33.54037267080744	40.702301650213734	2.0113043067428578	2.2358574343305406	27.846790890269162	31.67701863354037	5.976905034041522	32.48377686608704
5	10.52197383491714	63214.7674565969	59051.30112335698	66122.83745271487	-3.0	0.4920846085408905	1847	59.870856	Panic of 1847	5.291666666666667	11.00726895119418	3.840277777777778	3.2500000000000004	1.5881866725278766	-2.1217783554537086	2.6982731776421502	8.24960238359992	35.71428571428571	73.4373631561556	2.534223569249491	2.8856080092322713	24.896480331262936	20.49689440993788	21.184542045449163	18.729285325766284
6	8.612770334264916	77087.76403466891	73411.00054053614	80923.03527099236	-1.949999999999996	-1.228298965219025	1857	61.529857	Panic of 1857	6.625	-3.61328125	4.763888888888889	4.097222222222222	2.869582005380375	-0.3022430946055152	3.4609017757144755	23.08927686351692	45.65217391304347	10.893396213305977	3.323082598679079	3.6989767753273384	31.78053830227742	26.811594202898547	27.64670343398278	27.168778625147894
7	7.868210508335045	96697.32964724988	92742.67083107434	108042.60143171373	3.775000000000006	-0.4874270488320049	1869	73.044064	Black Friday	3.125	-6.159769008662181	4.375	3.618055555555556	0.3124846377195449	-0.41187028060118297	4.538881968946015	16.698668258444318	19.565217391304344	1.4210854715202004e-14	4.385079944139008	5.189376318361695	28.881987577639748	23.240165631469978	14.751092335389146	26.660298288685922
8	7.781951203464658	111347.337363469	104552.56606224431	116615.08140773018	2.150000000000006	0.4500519951490277	1873	90.346661	Panic of 1873	4.75	0.7838014369693127	3.340277777777778	3.4722222222222228	-0.24382068490909603	-1.3561009048674204	5.344224548214626	8.612167052194279	31.67701863354037	29.703289851667336	5.03386389281836	5.660490795754441	21.169772256728777	22.153209109730852	11.945607810856103	22.28070301618152
9	7.281826216293539	129860.8762275323	122840.18362696374	132944.07033681465	0.4000000000000092	0.07190817454040346	1882	86.075781	Paris Bourse	4.166666666666667	0.1474926253687414	3.2500000000000004	3.3055555555555554	-1.1088296538932312	-1.6124797026472162	6.361953782832572	11.873957788872875	27.32919254658384	26.98128030137424	6.038505551642018	6.557876745584593	20.49689440993788	20.910973084886137	7.583310386484271	21.091549284168963
10	7.324849664757648	132521.5721179883	127603.3175932552	137102.96021143	-0.1750000000000007	0.05521732436732162	1884	89.54207	Panic of 1884	3.041666666666667	-3.441860465116278	3.2222222222222228	3.1944444444444446	-1.1663075194134083	-1.5340046321943106	6.508217985048432	12.017929625816354	18.944099378881972	11.626702125569736	6.300171282137484	6.786435253192067	20.28985507246378	20.08281573498965	7.293445710269964	21.45553774073069
11	7.28504600236658	147386.9701321962	147233.4816797866	161728.71989393383	0.4000000000000057	0.1552363968986331	1893	97.377102	Panic of 1893	3.041666666666667	-1.909547738693462	3.402777777777778	2.597222222222222	0.05580723097906074	-0.39021569633117087	7.325401034403626	11.15518570010912	18.944099378881972	18.181648087840614	7.378566570155769	8.139783634953261	21.635610766045545	15.631469979296057	13.456651201867203	26.760738067337144
12	10.0924421513452	166066.2391795081	154426.21937823118	176233.34219752086	3.024999999999999	0.2384285693390407	1896	146.035039	Panic of 1896	2.583333333333333	-0.2134471718249813	2.5902777777777772	3.319444444444444	-0.822980416126491	1.0548359258061761	8.352240815297407	10.437587149923791	15.527950310559007	25.43724766009929	7.773704094618736	8.936908571430394	15.579710144927517	21.014492753623188	9.024866992692566	33.463275657404836
13	6.939422050235173	184974.5293835638	176233.34219752086	189848.71586804697	-83.0	-3.958525345917329	1901	124.46528	Panic of 1901	3.75	-0.3000000000000114	3.319444444444444	3.569444444444444	1.0548359258061761	0.11761409304326986	9.391670384036487	46.63964746924024	24.22360248447204	25.06699092217248	8.971691966237856	9.685163413581392	21.014492753623188	22.877846790890274	18.494818964955257	29.116189042579066
14	6.709963865198507	202300.1119900108	192736.31296912147	204497.81830699218	6.0	-0.1034263311153944	1907	129.753493	Panic of 1907	5.125	1.588877855014886	3.7986111111111107	3.8472222222222214	0.4324270688790861	1.3795634954157405	10.344095096288342	13.386357133248566	34.47204968944098	33.147255515325966	9.87829294216182	10.490228489161012	24.585921325051757	24.94824016563146	15.355969946235916	34.969449352860934
15	6.442613748949001	213407.6609267377	235141.8503424582	210533.7500000001	21.0	-7.871555909063793	1920	336.390198	Depression of 1920-21	6.75	15.39999999999998	5.423611111111112	4.743055555555555	17.216666666666665	-2.2666666666666724	10.95470106205535	80.39264341313395	46.583850931677006	92.22864130401211	12.207867544172672	10.821942860391431	36.69772256728779	31.62525879917183	100.0	18.05725441878046
16	12.0831073744674	245205.2442078899	230765.3798267586	240977.87064287215	-32.0	-0.1350511353896156	1929	536.823656	Wall Street Crash	5.5	-0.9000000000000057	4.701388888888888	3.3125	-0.8000000000000066	-2.1166666666666694	12.70268292187383	13.659146183364212	37.26708074534161	22.50030364643341	11.967443411115141	12.49504866250183	31.314699792960653	20.96273291925465	9.140758750667374	18.75299471145121
17	14.17945130018508	285387.2648716344	258291.64595074105	321218.86991233565	-79.0	-0.7472064638850211	1937	683.158232	Recession of 1937-38	2.0	3.40000000000002	2.138888888888889	2.0416666666666665	0.01666666666666572	7.0833333333333455	14.911575421345958	18.93947200405599	11.180124223602476	40.89489578923037	13.479615981552627	16.90482232684012	12.215320910973077	11.490683229813655	13.259262748093207	61.425065995256205
18	8.3482366406753	703556.0	651650.6666666666	750821.6666666666	-255.0	1.350239645182059	1971	4668.0	Brazilian markets crash	5.916666666666667	9.414929388029577	6.861111111111111	9.427083333333334	5.228951257568973	13.340289095081372	37.899214352411825	0.8473337318339181	40.3726708074534	66.62563366377138	35.089038733682486	40.514337618286376	47.412008281573485	66.53726708074532	39.54515857260597	90.44650754796552
19	7.800298698527843	781583.0	701694.5	780767.3333333334	-2740.0	-2.123604295569305	1973	5484.0	1973-74 Stock market crash	10.10416666666667	9.346330275229363	7.440972222222224	10.32986111111111	6.944599571948982	14.308401130945448	42.18852713980535	30.8119962995645	71.58385093167702	66.33217954718589	37.83822788070882	42.16005007737803	51.73395445134576	73.26604554865423	48.197286459484644	94.93687122243306
20	4.412367552544728	848700.0	832004.3333333334	929493.8333333334	-7359.0	-3.065832899079382	1982	12701.0	Souk-Al-Manakh crash	11.83333333333333	8.111031002162918	12.111111111111112	10.694444444444443	11.477051983782204	4.792888632427252	45.87809365333902	38.93946622837679	84.47204968944095	61.04780133733688	44.996879720279004	50.333555004538134	86.54244306418218	75.98343685300205	71.05474365492631	50.80136821822598
21	3.886197647472147	1024346.0	929493.8333333334	1092880.3333333333	-6594.0	-2.017192415879	1987	17256.0	Black Monday	9.625	3.204947989879088	10.694444444444443	11.59027777777778	4.792888632427252	5.161436268785292	55.53373380167901	29.894109335584112	68.01242236024844	40.06049993508915	50.35252611059063	59.31272390033977	75.98343685300205	82.66045548654245	37.3460659218621	52.51079115411163
22	3.144773784730718	1111618.0	1006498.3333333334	1128558.0	3801.0	0.6478052741572097	1989	17350.0	Friday 13th mini crash	13.91666666666667	5.237595169335734	11.125	10.17013888888889	4.118018552637295	4.748244410397857	60.33126421527185	6.906387984911023	100.0	48.75578268771971	54.582816269661635	61.27344767377339	79.19254658385091	72.07556935817804	33.94265148754616	50.59429632422071
23	2.971109602474165	1107059.0	1069746.3333333333	1166108.3333333333	-18374.0	-0.645847476804707	1991	19694.0	Japanese stock market crash	11.54166666666667	7.532649253731336	11.826388888888891	7.500000000000001	5.005523385145449	3.5559914610257124	60.080646134380274	18.065170251337744	82.29813664596273	58.57359288030509	58.057384534904855	63.33708686730315	84.42028985507247	52.17391304347826	38.418397039080304	45.064306884662585
24	3.014559301153545	1282602.0	1195365.5	1389981.0	-15444.0	-3.341919587859783	1997	26917.0	Asian financial crisis	6.583333333333333	1.824606271085031	6.673611111111112	5.697916666666667	2.604650963917995	1.3332659073607165	69.73062415016228	41.32093315948982	45.341614906832284	34.155657392088244	64.95835168021065	75.64037070748275	46.01449275362319	38.74223602484471	26.31063867483381	34.754708703105265
25	3.014559301153545	1282602.0	1195365.5	1389981.0	-15444.0	-3.341919587859783	1997	26917.0	October 27 mini crash	6.583333333333333	1.824606271085031	6.673611111111112	5.697916666666667	2.604650963917995	1.3332659073607165	69.73062415016228	41.32093315948982	45.341614906832284	34.155657392088244	64.95835168021065	75.64037070748275	46.01449275362319	38.74223602484471	26.31063867483381	34.754708703105265
26	3.480942211523611	1323527.0	1230779.5	1433458.6666666667	651.0	-1.644982452029334	1998	32681.0	Russian financial crisis	7.208333333333333	1.557397519295037	6.305555555555556	5.215277777777778	2.1539591386259125	1.2560969726820612	71.98035982914622	26.683502825525945	49.999999999999986	33.01258855344574	66.90384182290802	78.02975607405443	43.2712215320911	35.144927536231876	24.03777000045922	34.39677845511581
27	3.501831406940565	1456837.0	1348639.0	1562396.1666666667	7450.0	1.448472193053144	2001	37850.0	September 11 attacks	5.083333333333333	1.233511995184713	6.024305555555556	4.409722222222221	1.5234984854474878	1.5971994811834425	79.30869857967402	0.0	34.161490683229815	31.627067130895654	73.37852684784849	85.11572455677745	41.17494824016563	29.140786749482388	20.858315240865323	35.97890351575229
28	5.289136629560525	1712996.0	1605089.3333333333	1682560.8333333333	-40687.0	-2.50232886612386	2007	76991.0	Financial crisis 2007-2008	5.520833333333333	2.322841623486951	4.482638888888888	2.045138888888889	1.7787544192338158	3.1133640961104283	93.39031230704965	34.078796465700165	37.4223602484472	36.28701462431057	87.46678560403127	91.7195678198849	29.68426501035195	11.516563146997925	22.145587792292645	43.01128226859435
29	16.27421338779131	1659772.0	1667238.0	1736217.6666666667	-144150.0	-10.14466333083025	2010	247280.0	2010 Flash Crash	0.5	3.298171575771704	3.4270833333333335	0.5	2.628984235520638	2.4426727620639355	90.46447402291426	100.0	0.0	40.4592929212714	90.88096130804057	94.66836572493753	21.816770186335404	0.0	26.433352972424743	39.90043570165282
30	22.3092708836311	1833233.0	1736217.6666666667	1833233.0	-79242.0	-5.504312804530091	2015	406582.0	2015-2016 stock market crash	0.5	0.04009937308256895	0.5	0.5	2.4426727620639355	0.04009937308256895	100.0	59.97329180927436	0.0	26.521872144468972	94.67040225079064	100.0	0.0	0.0	25.493771892998964	28.75665494956742
	<html>

	<head>
	</head>
	<body>
	<table align='center'>
	<tbody>
	<tr>
	<td id='year' width='100'></td>
	<td id='description'></td>
	</tr>
	<tr>
	<td colspan="2"><div id='vis'></div></td>
	</tr>
	</tbody>
	</table>
	</body>
	<link rel="stylesheet" type="text/css" href="bank.css" media="screen" />
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="bank.js" charset="utf-8"></script>
	<script>

	// draw svg and axes and call draw function in bank.js

	//set margins

	var margin = {top: 20, right: 20, bottom: 70, left: 40},
	width = 900 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	//draw svg in VIS table cell

	var svg = d3.select("#vis").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 + ")");


	//x-axis = range, axis, append to svg.
	var x = d3.scale
	.ordinal()
	.rangeRoundBands([0, width-60], 0.1,0)
	.domain(['Interest','Inflation','GDP','Bank Assets/GDP','Gov Deficit/GDP']);

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

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(60," + (height + 20) + ")")
	.call(xAxis)
	.selectAll('text').remove()


	// y-axis = range, axis, append to svg.
	var y = d3.scale.linear()
	.range([height, 0])
	.domain(['','']);

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


	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(60,0)")
	.call(yAxis);


	//calculation to take account of the outerPadding and barPadding used by rangeRoundBands
	var padding = ((width-60-(x.rangeBand()*5))/5)
	// svgwidth - 60 (axis offset) - columnwidths(rangebands*5)/number of pads (4 bar pads, 1 outer (half left,half right))
	var barWidth = x.rangeBand() + padding
	rwidth = x.rangeBand()


	//get the data and call draw function
	d3.csv("bank_final.csv", function(d) {

	return d;
	}, draw);

	</script>

	</html>
	body { font: 12px san-serif;}

	path {
	stroke-width: 2;
	fill: none;
	}

	.axis path {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}

	.axis.tick line{
	visibility:hidden;
	}

	.tooltip {
	font-size: 40px
	}