Week 10 - Iterative Design, Idyll

This week we talked a bit about iterative design, then the final project, and ended with discussion about the Idyll framework.

Resources

• Example image to download for Idyll build
• Example dataset for Idyll build

Beginning Idyll code

• We will be heavily modifying you’re default : the index.idyll file. I’ve included my notes in that download if its easier to follow along that way.
• Also, check that the package.json file matchs the one right here.

General install instructions:

A video of this process (with errors & explaination) for Macs can be found right here.

A video of this process (with errors & explaination) for Windows 10 can be found right here (and see notes at the end of this section).

1. Install Idyll:

   npm install -g idyll
   

2. Create new post with idyll

   idyll create
   

3. cd into post directory
4. Install dependencies to install vegalite

   npm install --save acorn@^6.0.0 vega-lite@^2.0.0 react@^16.0.0 react-dom@^16.0.0 vega@^3.3.1
   

5. Install vegalite for Idyll

   npm install --save idyll-vega-lite
   

6. Copy index.idyll to your post directory
7. Update package.json file to match the linked one
8. Build this website with

   idyll
   

Notes for Windows install:

• You need to have Nodejs installed - download link here. You will have to restart your computer.
• You need to have git installed - download link here. You will have to restart your computer.

Final Project Resources

• Google doc of available datasets. Feel free to use one of your own!

Outline of Topics

This week our objectives will be to (1) think about how we construct visualizations based on our audiences, (2) discuss the final project, (3) start working on publishing some visualizations with Idyll, (4) have a brief introduction to the concept of scientific visualization.

We introduce Idyll this week and continue on with more Idyll next week.

• Lecture
  1. Distinction of “viz for self”, “viz for peers/experts”, “viz for others/outreach/public”
  2. Storytelling and knowing your audience
  3. Visualizations for the web - overview of html/D3.js/etc
• Programming
  1. Introduction to scientific visualization with Python and yt - how to get data and simple plots (we’ll cover this more later, but if you want to use some sci viz for your final project we’ll go through the basics)
  2. Introduction to some command line tools
  3. Introduction to Idyll
  4. Introduction to vega-lite in Idyll

Extra Resources

• Webscrape Python code for this week’s dataset
• Chat window text from missed recording on Thursdays class

Long form Idyll install instructions more Macs/Unix/Linux:

1. Install idyll with: npm: npm install -g idyll (the -g is to install globally - you probably need root access. If you don’t have root access, then leave out the -g and make a note of where idyll installs. When I say “idyll” you will have to provide the entire path like /Users/jillnaiman1/MYINSTALLLOCATION/idyll)
2. Run idyll: idyll create (select a directory and post name)
3. cd into your post directory
4. type idyll to build and run
5. install vega-lite for idyll, in your post directory run:

   npm install --save idyll-vega-lite
   

   you will probably get some errors about dependencies not being installed

6. To fix these dependencies run:

   npm install --save acorn@^6.0.0 vega-lite@^2.0.0 react@^15.5.4 react-dom@^15.5.4 vega@^3.0.0
   

   (or what ever packages you are missing)

7. Re run the vega-lite install to double check: npm install --save idyll-vega-lite and you should have less errors
8. You will want the latest version of react, so you can do:

   npm install --save react@^16.0.0 react-dom@^16.0.0
   

9. Try replacing your index.idyll file with the index.idyll file attached above
10. Check your package.json file and make sure it reacts like the package.json file attached above

Materials

• Lecture 10: (view, source, present)
• Notebook inClass_week10_sciviz: (view, download)
• Notebook prep_notebook_week10: (view, download)