Loading - please wait...

This page requires a reasonably modern HTML5 browser
with both Javascript and WebGL enabled.

If this message is not soon replaced by an interactive 3D model,
then it is likely that your browser does not support this web app.
Check your JavaScript Console for specific error messages.



Easing Function

Transition Speed secs




Projection (Shortcut keys: 1 to 5)



Metric to Display(Shortcut: M)

Weather data can fluctuate wildly from day to day so some averaging is usually required to identify trends. Use these paremeters to set the number of days over which to maintain a rolling average.




The aim of this app is to let you read and display EnergyPlus weather data files. It maps weather data by day of the year in the X-axis and hour of the day in the Y-axis, showing each of the available weather metrics as a 3D surface varying in the Z-axis.

Weather data can fluctuate wildly from day to day and even hour by hour, so some form of averaging is usually required in order to better identify trends. I have found that using a rolling average to smooth out these fluctuations provides a particularly useful insight for this type of data.

This basically means calculating the hourly data for each day by averaging over a given number of days both before and after it. Using a 28 day rolling average period for example, the 1st of January becomes the average of the last 14 days of the previous year and the first 14 days of the given year. For the 2nd of January, the hourly data from the 18th of December is subtracted from the running total and that from the 15th of January is added, and so on. As EnergyPlus weather files provide a representative year for each weather station, the previous year is assumed to be exactly the same as the given year so the data is simply wrapped.


I needed this app to visually verify that I was reading the EPW file format correctly and extracting valid data for each weather metric. It also allowed me to have another go at contour banding as my first attempt in the daylight analysis app wasn't as robust as I really wanted. However, I'm pretty sure I've cracked it now so I'll go back an update the daylight tool when I can.

Interestingly, when weather data fluctuates wildly and you are using a non-linear color scale to represent values, a triangulated grid with vertex-based colors does not always give the most accurate representation. This seems to be an issue that is rarely noticed or addressed, but it occurs when a triangle has vertices with a very wide variation over the scale range.

OpenGL and WebGL only does a linear interpolation of colours between vertices so you can sometimes end up with small areas having a hue that doesn't actually occur anywhere within the color scale being used. I have noticed this in a couple of previous projects and it has bugged me for a while, so I was really keen to experiment with a more accurate pixel-based color scale in these graphs.

Interesting Features

The most interesting features of this app are probably:

  • The speed with which data averaging can be done, meaning that changes to graph parameters can update the surface grid in real-time on most devices,
  • The directness of user interaction when dragging axial sections, my animation libaries are getting better now so hopefully things 'feel' more responsive and direct,
  • Calculating contour lines has always been fine, but now the filled banding is much more robust and no longer suffers from sporadically infilled island effects,
  • Calculating the color scale representing metric values using a fragment shader for absolute pixel accuracy rather than using color-by-vertex, and
  • Some of the transitioning between grid states can be a bit of fun, especially if you play around with different easing functions and transition speeds.

© Dr. Andrew J. Marsh, 2017.

View Manipulation

You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup.

Drag with the left/right button or a single finger,
or use the arrow keys.
Drag with the middle button or two/three fingers,
or use the A and D keys.
Use the scroll wheel or pinch with two fingers,
or use the W and S keys.

NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.

Keyboard Modifiers

The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.

Shift Key:
Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.
Ctrl or Meta Key:
Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.

NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.


This page uses the following frameworks/components:

Bootstrap  v3.3.2
Copyright © 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/   (LICENSE)

Bootstrap-popover-x  v1.4.0
Copyright © 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x   (LICENSE)

jQuery  v1.11.2
Copyright © jQuery Foundation and other contributors,
https://jquery.com/   (LICENSE)

JSON Editor
Copyright © 2015 Jos de Jong - github.com/josdejong
https://github.com/josdejong/jsoneditor/   (LICENSE)

Copyright © 2011 Bruno Jouhier - github.com/Sage
https://github.com/Sage/jsurl/   (LICENSE)

KnockoutJS  v3.2.0
Copyright © Steven Sanderson and the Knockout.js team,
http://knockoutjs.com/   (LICENSE)

Knockstrap  v1.2.0
Copyright © 2013 Artem Stepanyuk - github.com/faulknercs,
http://faulknercs.github.io/Knockstrap/   (LICENSE)

Copyright © 2012, Google Inc. - github.com/brendankenny
https://github.com/brendankenny/libtess.js   (LICENSE)

Copyright © 2011 by Evan Wallace - github.com/evanw
https://github.com/evanw/lightgl.js/   (LICENSE)

Copyright © 2015, Ronny Lorenz. - github.com/RaumZeit
https://github.com/RaumZeit/MarchingSquares.js   (LICENSE)

Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/   (LICENSE)