IS590DVO - Data Visualization

This is the course website for IS590 Data Visualization in Spring 2019 (Online)

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.


Beginning Idyll code

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

Notes for Windows install:

Final Project Resources

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.

Extra Resources

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