forecasting_errors

by kevinp

HTML

<!DOCTYPE html>

<body>
  <script src="//d3js.org/d3.v4.min.js"></script>
  <div id="wrapper">
  
  <div id="title">
   
    Summary Measures for Forecasts of Selected Economic Variables,
   <br>by Forecast Horizon and Forecaster
   
  </div>
 
 <div id="subtitle">
  </div>

  <div id="chart-button-wrapper">
  
    <div id="chart">
    <!-- SVG Chart will go in here -->
    </div>
  
    <div id="buttons">
     <strong>Economic Variables</strong>
  <form id="macro_vars">
    <label><input type="radio" name="macro_buttons" value="Growth of Real Output" checked="checked"> Growth of Real Output</label><br>
    <label><input type="radio" name="macro_buttons" value="Growth of Nominal Output"> Growth of Nominal Output</label><br>
    <label><input type="radio" name="macro_buttons" value="Inflation in the Consumer Price Index"> Consumer Price Index</label><br>
    <label><input type="radio" name="macro_buttons" value="Interest Rate on 3-Month Treasury Bills"> 3-mo. Treasury Bill Rate</label><br>
    <label><input type="radio" name="macro_buttons" value="Real Interest Rate on 3-Month Treasury Bills"> Real 3-mo. Treasury Bill Rate</label><br>
    <label><input type="radio" name="macro_buttons" value="Interest Rate on 10-Year Treasury Notes"> 10-yr. Treasury Note Rate</label><br>
  </form>
  <br>
  <strong>Forecast Horizons</strong>
      <form id="horizon">
      <input type="radio" name="horizon_buttons" value="Two-Year" checked="checked"> Two-Year Horizon<br>
      <input type="radio" name="horizon_buttons" value="Five-Year"> Five-Year Horizon<br>
    </form>
    <br>
    <strong>Forecasters</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...

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: 30px;
  margin-left: 45px;
  font: 14px sans-serif;
  font-weight: bold;
  padding-top: 10px;
  column-span: 2;
}

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

#chart {
  width: 530px;
  height 350px;
  float: left;
  padding: 0px;
}

#buttons {
  width: 250px;
  height: 300px;
  float: right;
  padding-top: 22px;
  padding-bottom: 15px;
  font: 14px sans-serif;
}

#legend {
  float: right;
  width: 250px;
}

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

#legend svg {
  background-color: white;
  height: 75px;
  text-align: right;
}

.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: #e6e6e6;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}

JavaScript

var colors = {"CBO" : "#0c586e",
              "Administration" : "#508550",
              "Blue Chip Consensus" : "#9ec69d"};

var shapes = {"CBO" : "circle",
              "Administration" : "circle",
              "Blue Chip Consensus" : "circle"};


/*
** Forecasting Errors Data
** 'mean_error' will be plotted on the x-axis.
** 'rmse' (Root Mean Squared Error) will be plotted on the y-axis
*/
var errors_data = [
  {
    macro_var: "Growth of Real Output",
    years: "1980 to 2014",
    forecaster: "CBO",
    horizon: "Two-Year",
    mean_error: -0.1, 
    rmse: 1.3   
  }, 
  {
    macro_var: "Growth of Real Output",
    years: "1980 to 2014",
    forecaster: "Administration",
    horizon: "Two-Year",
    mean_error: 0.2,  
    rmse: 1.5   
  }, 
  {
    macro_var: "Growth of Real Output",
    years: "1980 to 2014",
    forecaster: "Blue Chip Consensus",
    horizon: "Two-Year",
    mean_error: 0.0,  
    rmse: 1.4   
  },
  {
    macro_var: "Growth of Real Output",
    years: "1979 to 2011",
    forecaster: "CBO",
    horizon: "Five-Year",
    mean_error: 0.2, 
    rmse: 1.2  
  }, 
  {
    macro_var: "Growth of Real Output",
    years: "1979 to 2011",
    forecaster: "Administration",
    horizon: "Five-Year",
    mean_error: 0.4,  
    rmse: 1.3  
  }, 
  {
    macro_var: "Growth of Real Output",
    years: "1979 to 2011",
    forecaster: "Blue Chip Consensus",
    horizon: "Five-Year",
    mean_error: 0.1,  
    rmse: 1.1   
  },
  {
    macro_var: "Growth of Nominal Output",
    years: "1980 to 2014",
    forecaster: "CBO",
    horizon: "Two-Year",
    mean_error: 0.2, 
    rmse: 1.5  
  }, 
  {
    macro_var: "Growth of Nominal Output",
    years: "1980 to 2014",
    forecaster: "Administration",
    horizon: "Two-Year",
    mean_error: 0.5,  
    rmse: 1.7   
  }, 
  {
    macro_var: "Growth of Nominal Output",
    years: "1980 to 2014",
    forecaster: "Blue Chip Consensus",
    horizon: "Two-Year",
    mean_error: 0.4,  
    rmse: 1.5   
  },
  {
   ...