Graphic design notes for BS charts
Introduction
This page illustrates various design ideas and issues connected with presenting
charts of Bright Sunshine (calculated from global solar intensity data) as web page
images. There are various - sometimes overlapping - points discussed here so a reading
of the whole page would be useful to gain an overview of the topic. Note that these
ideas originate specifically using data from the Davis Weatherlink package, but
the principles should be generally applicable.
Standard chart features
There are a set of features that probably
deserve to apply to every BS chart whatever its other design
variations. These are listed below and an example of the current
standard chart shown to the right:
- Size roughly around 500px square, but discussed in
detail elsewhere;
- Time-span covering approx 05:00 to 21:00 in local clock
time, which should be satisfactory for locations up to
55-60° latitude;
- Time-span shown to remain unchanged throughout the year
for consistency even though winter readings will only occupy
the central part of the chart;
- An envelope shown on the chart showing the daily
time-course of the maximum calculated intensity under
perfect conditions;
- Areas under the envelope shortly after sunrise and
before sunset showing times excluded from BS totals for
compatibility with CS measurements;
- A line or envelope showing the changing threshold for
the intensity level to count towards the BS total;
- The set of actual measured intensity values,
colour-coded according to whether an individual value
classifies as BS or not. Alternative depictions of this
dataset are discussed below;
- If possible, markers or shading on the chart indicating
times when a view of the sun is obstructed at the observing
site because of obstacles - trees, buildings etc. (Not
implemented on the current example.)
- Text showing sunrise/sunset times and BS total so far
today;
- An informative chart key;
For many implementations, it would be nice to have the chart
updating automatically throughout each day, when we would
suggest one further standard feature:
- A small but legible timestamp showing creation time of
the current chart image;
|
 |
Chart size and archive interval
If we make the assumption that we wish to plot and to designate as BS or not every
measured solar intensity value (>0) then this places some important constraints
on chart size, with the degree of constraint depending on the archive interval.
For a 1-minute interval (the shortest currently available) then in midsummer we're
going to have around 16 hours worth of data or 960 data points. (Even if you trim
the chart to cover fewer daylight hours away from midsummer you still have to deal
with midsummer as the limiting case.) It's clearly impossible to show every data
point with <1 pixel per point so this immediately means that the X-axis of the
chart would need to be 960px wide as a minimum. And in practice and leaving aside
issues around the use of large chart images, the chart could not be fitted width-wise
in the window of a 1024px wide display without requiring a horizontal scroll bar
(= bad web design practice). Possibly the maximum hours shown could be trimmed so
that the chart would just fit into a 1024 display window but it would be touch and
go with possibly an inelegant result. And in order to depict individual data points
as BS or not, the chart would need to be drawn as a bar chart with 1px-wide bars,
which again might not be aesthetically appealing. But we'll try to create a chart
to this model in the near future for reference.
Once the archive interval moves to 5 or 10 minutes the charting task becomes somewhat
simpler, because the number of data points to be plotted reduces to ~96 (10min)
or ~192 (5min). So in principle the graph could be as narrow as 96px though, as
argued elsewhere, tiny graphs are not very effective at communicating information
- better to find ways of minimising the number of graphs required or laying them
out on a tabbed layout and then use larger chart images.
We're currently working with a 10-minute interval and if we accept use of a chart
approaching 500px in width (so that eg 2 can be fitted side-by-side in a 1024px
window) then this allows us to use bars 4px wide (actually 2px of colour with 1px
black border either side of the bar), which gives quite a good effect. Dispensing
with the border would obviously allow the bar width to be reduced to 2px, allowing
a chart width of ~250px, but at the cost of limiting the clarity of an individual
data point because the body of adjacent bars merges into one.. (Some of these design
options will be discussed and illustrated in the next section in due course.)
Moving to a 5-minute interval obviously doubles the number of data points and means
that even with borderless 2px-wide bars we need a chart 450px wide. Using the current
4px-wide bars (including a border) would require an increase in chart width to ~800-900px,
which may or may not be acceptable.
Height of the chart is more flexible, but a chart might typically be either roughly
square or with a height 60-75% of the width.
Single bars vs stacked bars vs other options
There is more than one option as to how colour coding of the bars reflects intensity
or BS status:
- Use just 2 colours (ie BS or not BS) or multiple colours to show different intensity
levels (one boundary should coincide with the BS threshold) and with colouring of
the whole bar in the same colour;
- Colour options as above, but using a stacked bar approach, with each successive
bar in the stack covering a different band of intensity. If higher intensity levels
were not reached then the upper bars in the stack would not be visible, leaving
just the lower bars visible showing presumably a dull colour. The advantage of this
approach is that adjacent bars build up a pattern of colour to reinforce the intensity
reflected by the bar height alone;
The next example shows a stacked bar prototype using 5 colour categories. There's
obviously a decision to be made on the number and bounds of the intensity bands.
Too many bands/colours would probably confuse rather than clarify and so we'll settle
on five bands . However, these don't need to reflect equal differences in intensity.
Once the sky starts to clear then the relative intensity increases quickly and so
we probably only need two bands above the BS threshold: bright and very bright.
But it's probably true that there are subjectively more bands below the BS threshold,
eg cloud-bright, overcast and very dull. Choosing colours to best represent these
different bands is more of an artistic skill and only an initial stab at this is
shown here.
Other features that could be changed or added:
- For archive intervals >1-minute, the maximum irradiance recorded in the interval
could be shown as well (but at the expense of further clutter on the chart);
- The max envelope could show the calculated maximum attainable irradiance rather
than the theoretical max. However this would need some algorithm and analysis to
define the attainable max in practice;
- Add Total Solar Energy received so far today as a text field;