<link id="temp-ranges"
rel="variance-data"
href="//variancecharts.com/data/us_monthly_temp_averages.csv">
<div id="range-example">
<h3>Average Monthly Temperature Range, United States</h3>
<chart data="#temp-ranges"
scale-y-linear="30 90">
<guide-y>
<span class="label">{{value}}°F</span>
</guide-y>
<repeat>
<range map-extent="avg_low avg_high"></range>
<annotation class="bottom">{{month}}</annotation>
</repeat>
</chart>
</div>
#range-example {
width: 100%;
padding: 60px 80px 80px 120px;
color: #444444;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
#range-example h3 {
text-align: center;
margin: 0 0 28px 0;
}
#range-example chart {
width: 100%;
height: 400px;
}
#range-example datum {
margin: 0 8px;
}
#range-example range {
background-color: #7dac9f;
}
#range-example annotation {
font-size: 14px;
}