Variance Charts Example

Weekly Temperature Forecast

{{value}} °F

html

<link id="forecast"
      rel="variance-data"
      href="//variancecharts.com/data/forecast.json">

<div id="boxplot-example">

  <h3>Weekly Temperature Forecast</h3>

  <chart class="boxplot categorical-x"
         data="#forecast"
         map-y="temp"
         scale-y-linear="30 90">
    <guide-y class="right"
             ticks="30 50 70 90">
      <span class="label">{{value}} &deg;F</span>
    </guide-y>
    <guide-y class="left"
             ticks="30 50 70 90">
      <span class="label">{{value}} &deg;F</span>
    </guide-y>
    <boxplots map-box-mid="medianTemp"
              map-box="lowMin highMax"
              map-extent="recordLow recordHigh">
    </boxplots>
    <repeat>
      <annotation class="bottom">
        {{dow}}
      </annotation>
    </repeat>
  </chart>

</div>

css

#boxplot-example {
  width: 100%;
  padding: 60px 80px 80px 120px;
  color: #444444;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}
#boxplot-example chart {
  width: 100%;
  height: 400px;
}
#boxplot-example h3 {
  text-align: center;
  margin: 0 0 28px 0;
}
#boxplot-example boxplot {
  margin: 0 20%;
}
#boxplot-example boxplot .box {
  background: #e5b060;
  border: none;
}
#boxplot-example boxplot .midline {
  border: 2px solid #f8f8f2;
}
#boxplot-example annotation {
  font-size: 14px;
}