forecasting_errors

by kevinp

HTML

<!DOCTYPE html>

<body>
  <script src="//d3js.org/d3.v4.min.js"></script>
  <div id="wrapper">
  
  <div id="title">
   
    Measures of Forecast Peformance for Select Macroeconomic Variables,
   <br>by Forecast Horizon and Forecasting Agency
   
  </div>
 
 <div id="subtitle">
  </div>

  <div id="chart-button-wrapper">
  
    <div id="chart">
    <!-- SVG Chart will go in here -->
    </div>
  
    <div id="buttons">
     <strong>Macroeconomic Variable:</strong>
  <form id="macro_vars">
    <label><input type="radio" name="foo" value="Real GDP Growth" checked="checked"> Real GDP Growth</label><br>
    <label><input type="radio" name="foo" value="Nominal GDP Growth"> Nominal GDP Growth</label><br>
    <label><input type="radio" name="foo" value="Real 3-mo. Treasury Rate"> Real 3-mo. Treasury Rate</label><br>
    <label><input type="radio" name="foo" value="Nominal 3-mo. Treasury Rate"> Nominal 3-mo. Treasury Rate</label><br>
    <label><input type="radio" name="foo" value="Nominal 10-yr. Treasury Rate"> Nominal 10-yr. Treasury Rate</label><br>
    <label><input type="radio" name="foo" value="Consumer Price Index"> Consumer Price Index (CPI)</label><br>
  </form>
  <br>
  <strong>Forecast Horizon:</strong>
      <form id="horizon">
      <input type="radio" name="bar" value="Two-Year" checked="checked"> Two-Year Horizon<br>
      <input type="radio" name="bar" value="Five-Year"> Five-Year Horizon<br>
    </form>
    <br>
    <strong>Forecasting Agency:</strong>
      <div id="legend">
    <!-- SVG Legend will go in here -->
      </div>
</div>
</div> <!-- chart-buttons-wrapper -->
 <div id="footer">
 <p>
  <strong>Note:</strong> RMSE is "Root Mean Squared Error," which is a measure of forecasting accuracy. RMSE will always take on a positive value; the larger the value, the less accurate the forecast. Mean Error is a measure of bias in a forecast. It can take on a positive or negative value. Positive values indicate that the forecasts overestimated the realized...

CSS

body {
  background-color: white;
}

#wrapper {
  width: 750px;
  margin 0 auto;
}

#title {
  width: 700px;
  margin-left: 45px;
  font: 18px sans-serif;
  font-weight: bold;
  column-span: 2;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: black;
}

#subtitle {
  height: 20px;
  margin-left: 45px;
  font: 14px sans-serif;
  font-weight: bold;
  padding-top: 10px;
  column-span: 2;
  /*
  border-style: solid;
  border-width: 1px;
  */
}

#chart-button-wrapper {
  padding: 0px;
  width: 785px;
}

#chart {
  width: 530px;
  height 350px;
  float: left;
  padding: 0px;
  /*
  border-style: solid;
  border-width: 1px;
  */
}

#buttons {
  width: 250px;
  height: 300px;
  float: right;
  padding-top: 15px;
  padding-bottom: 15px;
  font: 14px sans-serif;
  /*
  border-style: solid;
  border-width: 1px; 
  */
}

#legend {
  float: right;
  width: 250px;
  /*
  border-style: solid;
  border-width: 1px;
  */
}

#footer {
  clear: both;
  width: 500px;
  column-span: 2;
  margin-left: 45px;
  font: 12px sans-serif;
}

#chart svg {
  background-color: white;
  text-align: right;
  padding: 5px 5px 50px 20px;
  margin: 5px 5px 5px 45px;
  /*
  border-style: solid;
  border-width: 1px;
  */
}

#legend svg {
  background-color: white;
  height: 75px;
  text-align: right;
  /*border-style: solid;
  border-width: 1px;*/
}

.axis path,
.axis line {
  fill: none;
  stroke: #666;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

.point {
  fill: black;
}

.grid line {
  stroke: lightgrey;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

div.tooltip {	
    position: absolute;			
    text-align: left;			
    width: 95px;					
    height: 25px;					
    padding: 10px;	
    margin: -25px 15px; 
    font: 12px sans-serif;		
    background: whitesmoke;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}

JavaScript

var colors = {"Real GDP Growth":"Blue",
              "Nominal GDP Growth":"deepskyblue",
              "Real 3-mo. Treasury Rate":"Green",
              "Nominal 3-mo. Treasury Rate":"LimeGreen",
              "Nominal 10-yr. Treasury Rate":"Orchid",
              "Consumer Price Index":"DarkOrange"};

var shapes = {"CBO" : "circle",
              "Admin" : "square",
              "Blue Chip Consensus" : "triangle-up"};


/*
** Forecasting Errors Data
** (I hand entered these, so they should probably be fact-checked.)
** The data could be put in a separate *.csv file, but that would require
** some additional/different d3.js code, below to pull it in.
*/
var errors_data = [
  {
    macro_var: "Real GDP Growth",
    years: "(1980-2014)",
    forecaster: "CBO",
    horizon: "Two-Year",
    x: -0.1, // mean error
    y: 1.3   // root mean squared error (RMSE)
  }, 
  {
    macro_var: "Real GDP Growth",
    years: "(1980-2014)",
    forecaster: "Admin",
    horizon: "Two-Year",
    x: 0.2,  // mean error
    y: 1.5   // root mean squared error (RMSE)
  }, 
  {
    macro_var: "Real GDP Growth",
    years: "(1980-2014)",
    forecaster: "Blue Chip Consensus",
    horizon: "Two-Year",
    x: 0.0,  // mean error
    y: 1.4   // root mean squared error (RMSE)
  },
  {
    macro_var: "Real GDP Growth",
    years: "(1979-2011)",
    forecaster: "CBO",
    horizon: "Five-Year",
    x: 0.2, // mean error
    y: 1.2  // root mean squared error (RMSE)
  }, 
  {
    macro_var: "Real GDP Growth",
    years: "(1979-2011)",
    forecaster: "Admin",
    horizon: "Five-Year",
    x: 0.4,  // mean error
    y: 1.3  // root mean squared error (RMSE)
  }, 
  {
    macro_var: "Real GDP Growth",
    years: "(1979-2011)",
    forecaster: "Blue Chip Consensus",
    horizon: "Five-Year",
    x: 0.1,  // mean error
    y: 1.1   // root mean squared error (RMSE)
  },
  {
    macro_var: "Nominal GDP Growth",
    years: "(1980-2014)",
    forecaster: "CBO",
    horizon: "Two-Year",
    x: 0.2,...