Textual and Qualitative Data: A Festival Schedule (DOM + CSS)
brew install node
In your student subdirectory, you should first install the project dependencies by typing:
You can then start up the development server by typing:
There are three different versions of the schedule data that have been pre-processed to make different groupings possible. Look in the
assets directory at the files
shows.json and choose your source file accodingly.
Your work for this project will mostly take place in three places:
template.html– edit this to establish the ‘rules’ for how your HTML should be constructed from your JSON data.
render.js– organize, rename, and pre-process the data you want to display in this script. When you’re ready to re-generate your HTML, run the script.
site/styles.css– establish CSS rules to format the data differently based on its hierarchical significance, location, time, etc.
Whenever you make changes to the template or render script, you'll need to re-generate the resulting
site/index.html file by executing the script (after first having
cd’d into your student directory):
The two Javascipt libraries we’ll be using heavily in this project are:
Focusing on typography, text layout, and organization, visualize the schedule for last summer’s Northside music festival. The original schedule organizes the information horizontally according to day and vertically according to venue, but don’t feel constrained to this scheme (or satisfied with simply replicating it for that matter).
The goal of this 2-week exercise is the deliberate and appropriate use of text as a qualitative source of information. Focus on either Artist names, Venue names, or date & time as the first hierarchy level, before adding optional information such as the line-up of opening acts or show durations. No visual or UI element should be introduced without consideration and intent.
Use any available typography approaches at your discretion. Organization via text files, HTML markup, global and local uses of CSS, p5 text functions and p5 style() function for CSS.
As always, only create or modify files within the
students/<your-name>subdirectory.Also make sure you stay out of the
students/<your-name>/site/libdirectory since it’s a symbolic link to a folder all your projects share.
You must constrain yourself to using the Libre Franklin type family for this assignment. It’s already been set as the default family in the
styles.cssfile. Limit yourself to modifying the
font-weight(in the range 100–900) and
font-style(if you want to italicize). Also look into changing the
line-height, as well as experimenting with
text-transformto change case.
Sync your local repository with the copy on GitHub before the start of class on 18 Oct.