Visualizations can be as simple or complex as you can imagine. Below are some resources to assist you in developing beautiful and creative visualizations.

Quick Links

• Examples of Visualizations
• How to Create a new Schedule
• How to Create a Whencast

Visualization Development Tools

Visualizations are built with HTML, CSS, and JavaScript. A solid understanding of these technologies will help when building visualizations. Visualizations displayed in their own Iframe, so you can feel free to use whatever approach suits your project best. This can be done with just simple HTML, CSS and JavaScript, or feel free to use the framework of your choice. Below are a few examples of frameworks that will aide in developing outstanding visualizations.

CSS Frameworks

Any CSS framework can be used in a visualization. Here are a few common frameworks:

• Bootstrap
• Semantic UI
• Foundation
• Materialize

JavaScript Frameworks

Any Javascript framework can also be used in visualization development. Here are a few common frameworks:

• Angular
• React
• Ember
• Vue.js

IDEs

• Visual Studio Code
• Visual Studio Community
• Atom
• SublimeText (mac only)

Design Patterns

• Google's Material Design
• Responsive Design
• Microsoft Design Language
• Flat UI

Overview of built in resources

We use a few different tools in the visualizations. These are also made available for use in the visualizations. Below are a few to become familiar with:

• Moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
• Underscore.js - a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter...) without extending any core JavaScript objects.

Visualization Examples

Below are a few examples of WhenHub Visualizations

• MultiView - A dynamic visualization that combines a Map, Slider, and Timeline in a highly customizable layout.
• Layer Slider - Animated photo and title layers slide into place for a beautiful visualization.
• MultiChart - Allows end user to switch views of schedule event data between multiple different graphs and charts. This visualization requires the schedule to have a minimum of one 'Chart Series' custom field and all events to have the corresponding value defined.
• Simple List - A simple list visualization with events for the same day/month/year grouped together.