High 62. High pressure will remain over the area, providing another rain-free day, with a good deal of sunshine. Temperatures will be around normal for this time of year.
Low 48. High pressure will continue to provide dry weather, with mostly clear skies across the region. Temperatures will be chilly but seasonable, with light winds.
High 66. As the high-pressure system moves away, a front will approach from the west. This will bring a mixture of clouds and sunshine, with a few showers later in the afternoon or evening.
In the wake of the front, a weak area of high pressure will bring in drier air from the west. Expect a partly sunny and dry day with mild temperatures.
Wednesday wil be mostly cloudy, with showers possible. The high will be 65.
<link id="forecast"
rel="variance-data"
href="//variancecharts.com/data/weekly_forecast.json">
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700"
rel="stylesheet"
type="text/css">
<figure id="weekly_forecast">
<section class="forecast-description">
<h1 class="title">Metropolitan Forecast</h1>
<div class="forecast today">
<h2 class="day">
<span>Today</span>
<span class="condition">Sunny and nice</span>
</h2>
<p class="description">High 62. High pressure will remain over the area, providing another rain-free day, with a good deal of sunshine. Temperatures will be around normal for this time of year.</p>
</div>
<div class="forecast tonight">
<h2 class="day">
<span>Tonight</span>
<span class="condition">Mostly clear</span>
</h2>
<p class="description">Low 48. High pressure will continue to provide dry weather, with mostly clear skies across the region. Temperatures will be chilly but seasonable, with light winds.</p>
</div>
<div class="forecast tomorrow">
<h2 class="day">
<span>Tomorrow</span>
<span class="condition">A few showers</span>
</h2>
<p class="description">High 66. As the high-pressure system moves away, a front will approach from the west. This will bring a mixture of clouds and sunshine, with a few showers later in the afternoon or evening.</p>
</div>
<div class="forecast tuesday">
<h2 class="day">
<span>Tuesday</span>
<span class="condition">Partly sunny</span>
</h2>
<p class="description">In the wake of the front, a weak area of high pressure will bring in drier air from the west. Expect a partly sunny and dry day with mild temperatures.</p>
</div>
<div class="forecast wednesday">
<h2 class="day">
<span>Wednesday</span>
<span class="condition">Showers possible</span>
</h2>
<p class="description">Wednesday wil be mostly cloudy, with showers possible. The high will be 65.</p>
</div>
</section>
<section class="forecast-graphic">
<!-- Data graphic -->
<chart data="#forecast" scale-y-linear="30 86">
<!-- Historical temperature plots -->
<repeat>
<range class="record" map-extent="recordHigh recordLow"></range>
<range class="normal" map-extent="normalHigh normalLow"></range>
</repeat>
<!-- Insert guide-y here so that guidelines are z-indexed below forecast temperature plots -->
<guide-y ticks="40 50 60 70 80">
<span class="label">{{value}}°</span>
</guide-y>
<!-- Forecast temperature plots -->
<repeat>
<range class="extent" map-extent="highMax lowMin"></range>
<range class="high" map-extent="highMax highMin"></range>
<range class="low" map-extent="lowMax lowMin"></range>
<range class="recorded" map-extent="lowMinRecorded highMaxRecorded"></range>
<annotation class="top day-of-week">{{dow}}</annotation>
</repeat>
<!-- Additional annotations -->
<annotation class="today">Today</annotation>
<section class="legend-right">
<annotation data-record-high="80" map-position="recordHigh">Record highs</annotation>
<annotation data-record-low="33" map-position="recordLow">Record lows</annotation>
<annotation data-normal-low="49" map-position="normalLow">Normal lows</annotation>
<annotation data-normal-high="61" map-position="normalHigh">Normal highs</annotation>
</section>
</chart>
<!-- Legend -->
<section class="legend">
<div class="actual-label">
<div class="label actual-title">Actual</div>
<div class="label actual-high">High</div>
<div class="label actual-low">Low</div>
</div>
<div class="actual"></div>
<div class="forecast"></div>
<div class="forecast-label">
<div class="label forecast-title">Forecast Range</div>
<div class="label forecast-high">High</div>
<div class="label forecast-low">Low</div>
</div>
</section>
</figure>
</section>
/* Graphic global styles */
#weekly_forecast {
color: #333333;
margin: 0 auto;
width: 800px;
padding: 80px 40px;
}
/* Forecast description text */
.forecast-description {
width: 48%;
display: inline-block;
}
.forecast-description .forecast {
margin-top: 28px;
}
.forecast-description .title {
font-size: 22px;
font-weight: 700;
margin: 0;
}
.forecast-description .day {
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
border-bottom: 1px dotted #cccccc;
margin: 0 0 6px 0;
padding: 0 0 6px 0;
}
.forecast-description .condition {
float: right;
font-weight: 600;
text-transform: none;
font-size: 15px;
}
.forecast-description .description {
margin: 0;
font-size: 15px;
color: #666666;
}
/* Forecast chart */
.forecast-graphic {
display: inline-block;
width: 40%;
margin: 0 0 0 10%;
color: #666666;
vertical-align: top;
}
.forecast-graphic chart {
width: 220px;
height: 600px;
margin: 0 auto;
}
.forecast-graphic datum {
border-right: 2px solid #f6f7f0;
}
.forecast-graphic range.record {
background: #deddd5;
}
.forecast-graphic range.normal {
background: rgba(0, 0, 0, 0.12);
}
.forecast-graphic range.extent {
width: 2px;
margin-left: calc(50% - 1px);
background: #6d498e;
}
.forecast-graphic range.high, .forecast-graphic range.low {
background: #6d498e;
width: 48%;
margin-left: calc(50% - 24%);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.forecast-graphic range.recorded {
width: 48%;
margin-left: calc(50% - 24%);
background: #462f5c;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.forecast-graphic guide-y.left {
border-right: none;
width: 100%;
left: 0;
}
.forecast-graphic guide-y.left .tick {
border-bottom: 1px solid #f6f7f0;
border-top: 1px solid #f6f7f0;
width: 100%;
}
.forecast-graphic guide-y.left .tick .label {
text-align: left;
left: -30px;
}
.forecast-graphic annotation.day-of-week {
top: 21%;
}
.forecast-graphic annotation.today {
left: calc(40% - 5%);
top: 16%;
width: 100px;
margin-left: -50px;
text-align: center;
font-weight: 700;
text-transform: uppercase;
font-size: 15px;
color: #333333;
line-height: 1;
}
.forecast-graphic annotation.today:after {
display: block;
left: 50%;
border: solid transparent;
content: "";
position: absolute;
border-top-color: #333333;
border-width: 6px;
margin-left: -6px;
margin-top: 4px;
}
.forecast-graphic .legend-right {
margin-left: 100%;
padding-left: 14px;
font-size: 15px;
line-height: 1;
}
.forecast-graphic .legend-right annotation {
margin-bottom: 7px;
}
.forecast-graphic .legend-right annotation:before {
content: "\002039";
margin-left: -10px;
font-size: 20px;
float: left;
font-weight: 600;
line-height: 0.6;
}
/* Forecast chart legend */
.legend {
margin-top: -44px;
font-size: 14px;
text-align: center;
}
.legend .actual-title, .legend .forecast-title {
font-weight: 600;
top: -30px;
color: #333333;
}
.legend .forecast-title {
width: 40px;
}
.legend .actual-label, .legend .forecast-label {
display: inline-block;
position: relative;
height: 60px;
line-height: 0.8;
}
.legend .actual-label .label, .legend .forecast-label .label {
position: absolute;
}
.legend .actual-label .actual-high, .legend .actual-label .forecast-high, .legend .forecast-label .actual-high, .legend .forecast-label .forecast-high {
top: 0;
}
.legend .actual-label .actual-low, .legend .actual-label .forecast-low, .legend .forecast-label .actual-low, .legend .forecast-label .forecast-low {
bottom: 0;
}
.legend .actual-label .label {
right: 0;
}
.legend .actual {
background: #462f5c;
width: 10px;
height: 60px;
display: inline-block;
margin: 0 4px;
position: relative;
}
.legend .forecast {
background: #6d498e;
width: 2px;
height: 60px;
display: inline-block;
position: relative;
margin: 0 4px;
}
.legend .forecast:before, .legend .forecast:after {
content: "";
display: block;
width: 10px;
height: 12px;
position: absolute;
background: #6d498e;
margin-left: -4px;
}
.legend .forecast:before {
top: 0;
}
.legend .forecast:after {
bottom: 0;
}
/* Custom webfont */
body {
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
font-weight: 400;
}
/* Set example container background color */
.example {
background: #f6f7f0;
}
/* Hide ranges that don't have data */
range {
min-width: 0 !important;
min-height: 0 !important;
}