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.

Learning HTML, CSS, and JavaScript

This guide provides some resources for getting started with the languages we will be using for web development in class. This includes: HTML, CSS, SVG, JavaScript, and JSON.

Table of Contents

Web Technologies
Resources
References
Remote Hosting
Local Development

Web Technologies

The core of basic web development starts with HyperText Markup Language (HTML). Briefly, HTML is a markup language that provides the content and structure of that content on a web page (e.g. titles versus paragraphs). A markup language like HTML only annotates content and does not perform complex actions like a programming language might; instead all of the complexity is embedded in the browser that renders the HTML web page. We will use HTML v5 in class.

Whereas HTML provides the content of a web page, Cascading Style Sheets (CSS) provides the visual style of that content (e.g font style and colors). A web page can be created in HTML only, but nearly all modern web pages utilize both HTML and CSS. We will also use CSS selectors to both style and access content in our visualizations. We will use CSS v3 in class.

When it comes to creating graphics on web pages, we will use Scalable Vector Graphics (SVG). SVG is another text-based markup language, but instead of providing text content it provides scalable graphic content instead (i.e. a circle or line). We can also use CSS to style SVG content.

While HTML, SVG, and CSS are great for static web content, the restriction of being markup versus full-fledged programming languages means it cannot be used for dynamic content. That is where the JavaScript (JS) programming language comes in. As described by MDN, JavaScript is “a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.”

Confused? You are not alone! Many programmers struggle when they first encounter JavaScript, especially if they are unfamiliar with asynchronous declarative or functional programming. There are a few things to keep in mind: it is not based on Java syntax (the name is misleading), it has its own notion of truthy values and sameness versus equality, and its a very powerful programming language capable of supporting the most complex of web applications. Thankfully, we will only use basic JavaScript in this class (sometimes called vanilla JavaScript).

We will use JavaScript primarily alongside the Data-Driven Documents (D3 or D3.js) JavaScript library to create interactive, web-based visualizations driven by data.

It is possible to have HTML, CSS, SVG, and JavaScript all in a single HTML file. It is also possible to break these up into separate files: .htm or .html files for HTML, .css files for CSS, .svg files for SVG, and .js files for JavaScript.

Resources

There is a great set of beginner to advanced guides for all of these web technologies on the Mozilla Developer Network (MDN). I recommend starting here:

Even if you are familiar with these technologies, you may want to review some specific topics:

Here are a few other resources that may be useful for learning HTML, CSS and JavaScript:

You also have access to Linkedin Learning which has several free short online courses available on all of these web technologies. There are many more options that can be found with a web search, especially if you prefer videos over text.

References

The resources listed above are great for learning these web technologies, but sometimes you just need to know the valid syntax for something. My favorite set of references for this purpose are the Mozilla Developer Network (MDN) references.

Remote Hosting

Small examples may be hosted via a combination of Github gists, bl.ocks.org, blockbuilder.org, and vizhub.com.

The files required for the visualization(s) are stored in a gists, which is basically a lightweight git repository meant for sharing code with others. This should include an index.html file, and any other files and resources required by the code. See the Github Help pages for more information about gists.

To view the visualization, load the gist in bl.ocks.org. See the About page for how to view a gist on bl.ocks.org. Keep in mind there is sometimes a slight delay between the files cached by bl.ocks.org and those hosted on gist.github.com. If you want to modify the code and see live changes, load the gist in blockbuilder.org instead.

These websites use the gistid in the URL, with the primary difference being the domain:

https://gist.github.com/username/gistid
https://bl.ocks.org/username/gistid
https://blockbuilder.org/username/gistid

You can also use vizhub.com as an alternative to blockbuilder.org. Small examples may also be hosted using Observable Notebooks as well. See the Introduction to D3.js Observable notebook for more.

For hosting an entire website of visualizations, use Github Pages. There are many guides for setting up Github repositories for Github Pages:

The course website is also hosted using Github Pages.

Local Development

You cannot simply open up an HTML file in a browser when it comes to dynamic content. Instead, run a local web server to run and debug visualizations locally. This is especially important for loading data. There are many options for running a local web server.

The official D3 wiki recommends using npm to run the http-server package from Node:

npm install -g http-server
http-server &

It is also possible to use Python to run a web server. Use the SimpleHTTPServer module if Python version 2 is installed:

python -m SimpleHTTPServer

Use the http.server module for Python version 3:

python3 -m http.server

Another option is to develop in Atom and use the live-server package to launch a local web server.

For all of these options, run the local web server from the same directory as the index.html file. Access the website at http://localhost:[port] where [port] is the port number used by the web server. This is usually something like 3000, 4000, or 8080.