Skip to content

Latest commit

 

History

History
149 lines (87 loc) · 3.58 KB

lecture12_part1.md

File metadata and controls

149 lines (87 loc) · 3.58 KB
Raw
title layout include_vega visible_lec visible_n
Lecture 12, Part 1
lecture
true
true
true

Data Visualization

Jill P. Naiman

Spring 2020

Lecture 12, Part 1

Warm-Up Activity

  1. What is the visualization trying to show?
  2. What are its methods?
  3. What are the strengths / weaknesses?

https://mathisonian.github.io/diy-data-fugazi/

This Week/Last Week

notes:

today we'll be continuing on with some of what we did last week -- moving into more Markdown-based viz and viz "reports" along with more javascript

Survey posted later this week for final format

  1. Informal ~5 min presentation
  2. More formal critique of ~3 other submissions

Today

  • Publishing
    • D3.js
    • Idyll
    • Github Pages
  • Guest Lecture: AVL

Idyll

A web-based toolkit for storytelling with data visualizations!

  • Reduce manual coding for interactive articles
  • Integration with D3.js

D3.js

A JavaScript library for web-based data visualization

  • Declarative, not imperative (this is better for web coding)
  • Dynamic and interactive
  • Smooth transitions

D3.js

notes: D3 is meant to be well-integrated into the existing infrastructure of the internet. The worldwide web is a real patchwork of different languages with different syntaxes meant to do different things. Don't let it overwhelm you. They tend to be pretty simple to start, and only get more complicated when you need them to.

D3.js

notes: HTML or Hypertext Markup Language is the default syntax for websites. It's meant to be structured with tags like "head", "body", "paragraph", and "division".

It's essentially a skeleton for other functionality to hang off of.

You may see the term DOM or Document Object Model. This is just another name for this skeleton/framework.

D3.js

notes: CSS or cascading style sheets are how you define how websites are formatted. They do color, indentation, drop shadows, etc. Each CSS call is attached to an HTML tag.

CSS can be called in-line, or from an external file dedicated exclusively to CSS code.

D3.js

notes: SVG or Scalable Vector Graphics is an XML-based implementation of vector shape drawing that's natively understood by website compilers. It's an easy way to include dynamically rendered, animated, or interactive imagery in a webpage.

D3.js

notes: JavaScript is a dynamic programming language that runs natively on webpages that we've been using the past few weeks in Iodide. If you want to run programming logic in a webpage, you use javascript. If you see interactivity or animated effects on a website, you can generally expect they were written in javascript.

Idyll

Most of this is hidden from you when writing in Idyll! But it helps to understand the underlying mechanisms.

D3.js and Idyll are another set of tools that can be used for the Final Project to share interactive visualizations connected in a narrative.

Vega-lite and Idyll may or may not be working as of this writing.

notes: what are the limits to data size in Idyll and the web browser?

Onto Idyll!

Idyll is a reactive markup language for visualization and narrative documents.

idyll-lang.org

... and a quick detour into sci viz topics!