Data Visualization

CS 360/560 • Spring 2020

COVID-19 Notice

Due to the COVID-19 outbreak, this website is being retired effective March 15, 2020. All future updates will be moved to Canvas for online instruction as advised by the university.

Using Web Frameworks

If you have a strong understanding of HTML and CSS, I encourage you to explore using various different modern front-end web frameworks for your homework and project websites.

Imagine how great it will be to show off a modern responsive website with interactive visualizations and open source code to potential employers!

I do not recommend exploring heavy-duty web application frameworks like React, Angular, or Vue. While widely used and powerful, those frameworks will be overkill for class. However, if you are interested in front-end programming, I recommend looking into them at some point.

Instead, I recommend CSS-only or CSS with minimal JavaScript front-end frameworks that help you build responsive (i.e. changes layout for mobile devices) and modern websites. These frameworks come with built-in CSS classes that help with style and layout.

Getting Started

Using a front-end CSS framework will increase the amount of HTML code you must write. There are many classes that must be combined together to create responsive mobile-ready layouts.

Take for example these columns:

First

Second

Third

Change the size of the browser to see how those columns react. Using Bulma, that requires combining div elements and the column class to generate:

<div class="columns">
  <div class="column">
    <p class="is-primary notification">First</p>
  </div>

  <div class="column">
    <p class="is-info notification">Second</p>
  </div>

  <div class="column">
    <p class="is-success notification">Third</p>
  </div>
</div>

It can take time to learn how to apply the different CSS classes, but once you have a working layout it is relatively easy to plug in content using the same layout over and over again. (That is close to what I do for class websites.)

Each framework has a boiler-plate template you can start with and plug in your own content. Here is one I created for this class using Bulma:

  • Pending

You are welcome to use it for your homework and projects.

CSS Frameworks

Some example CSS frameworks include:

Search for “CSS framework” to find many other alternatives. Some include JavaScript components as well. Be careful about choosing a framework that relies too heavily on JavaScript—we do not want our JavaScript visualizations to compete for resources.

You may not want to use my websites as a starting point. In addition to using the Bulma or Bootstrap frameworks, I also use Jekyll to generate the static web pages from different templates.