This subsection here is just plain text. We can easily write stuff like we normally would, nbd.

Like in our jupyter notebooks, we can build up interactive elements, for example we can add sliders, toggles, etc.

Here is how you can use a variable, by default it does a slider:

6.00

[var name:"exampleVar" value:6 /] // first, we define our variable and its name, and its initial value 
[Range min:-5 max:10 value:exampleVar /] // next, what are the min and max of the variable 
[Display value:exampleVar /] // finally - lets display the ol' thing

Note that comments can be done with ”//”. Now, lets move onto populating our new blog with stuff!

Putting in Images

We’ll start our blog with some examples of corgis in the wild, so our reader can identify them when they are out in the real world.

Scrolling Overlays

We can also make our figures interactive. Lists of corgi facts might be boring, but we can spice them up by doing scrolling overlays with this little bit of code:

[Scroller currentStep:scrollerIndex]
  [Graphic style:`{padding: 5}`]
      [img
        src:'https://uiuc-ischool-dataviz.github.io/spring2019online/week10/corg/IMG_2814.jpg'
        style:`{height:700, float:"left"}` 
       /]
  [/Graphic]

  [Step]## Welsh Corgis are a small type of herding dog that originated in Wales, UK.[/Step]
  [Step]## "Corgi" is Welsh for "dwarf dog"   [/Step]
  [Step]## Queen Elizabeth II has owned more than 30 corgis in her lifetime.[/Step]
  [Step]## Corgi-Dachshund mixes are called dorgis.[/Step]

[/Scroller]

Vega-Lite for dataviz

Now that we have the basics of Idyll down, let’s build up some interactive visualizations that tie our opening images to a dataset. This is a dataviz class after all!

We’re going to start with a dataset that comes from an online Corgi Database.

Note: a webscrape was performed to grab this dataset with Python code available for interested parties, but we won’t be delving into webscraping for this course.

Reading data basics

First, lets start by reading in a data set. We can do this by placing the dataset that we downloaded from the week11 webpage in our POST_DIRECTORY/data file. Once we’ve done that, we can add this to our Idyll webpage:

[data name:"corgs" source:"corgiData_countries.json"  /]
[Table data:`corgs.slice(0, 10)` /]

which first names the dataset and then prints out its first 10 rows in a table.

Note that you can scroll around the table and move around the size of the displayed columns.

Plotting our data

To plot this we want use vega-lite to start. Don’t forget, there are text and video install instructions for both Mac and Windows stored on the week 10 webpage. We’ll assume you have vega-lite for Idyll installed and go from there.

Simple Scatter plots

Let’s start with some simple scatter plots of our data.

We can run the simple code below and make a simple scatter plot of countries and years born:

[IdyllVegaLite data:corgs spec:`{
  width: 400,
  height: 200,
  mark: "circle",
  encoding: {
    x: {field: "countries", type: "nominal"}, 
    y: {field: "year", type: "temporal"},
  }
}` /]

So this is a good start! Let’s add some other data into the mix by using colors. We can select what we color by with a “color by” variable like so:

[var name:"colorBy" value:`{}` /]

Once we’ve included this new variable in our webpage, we can re-do our scatter plot like so:

[IdyllVegaLite data:corgs spec:`{
  width: 400,
  height: 200,
  mark: "circle",
  encoding: {
    x: {field: "countries", type: "nominal"}, 
    y: {field: "year", type: "temporal"},
    color: colorBy
  }
}` /]

Color by:
 [button onClick:`colorBy = {}` ]None[/button]
 [button onClick:`colorBy = {field: 'sex', type: 'nominal'}` ]Sex of Corgi[/button]

Color by: NoneSex of Corgi

Let’s try another little scatter plot showing info about the parents and country of origin with:

[var name:"colorBy2" value:`{}` /]

[IdyllVegaLite data:corgs spec:`{
  width: 400,
  height: 400,
  mark: "circle",
 encoding: {
    x: {field: "sire", type: "nominal", axis:{labels:false}}, 
    y: {field: "dam", type: "nominal", axis:{labels:false}},
    color: colorBy2
  }
}` /]

Color by:
 [button onClick:`colorBy2 = {}` ]None[/button]
 [button onClick:`colorBy2 = {field: 'countries', type: 'nominal'}` ]Country[/button]

Color by: NoneCountry

Note that the default color scheme has a lot of repeated colors, which makes it a little hard to tell what country is what. We can check out the available Vega-lite colors and pick one. Maybe category20 could work, but its only 20 colors or maybe something like viridis would work too.

Binning and aggregating data - histograms

Beyond scatter plots, we can do histograms in which we aggregate parts of our data set:

[var name:"colorBy3" value:`{}` /]

[IdyllVegaLite data:corgs spec:`{
  width: 400,
  height: 200,
  mark: "bar",
  encoding: {
    x: {field: "year", type: "temporal"},
    y: {aggregate:"count", type: "quantitative", title:"Number of Corgis Born"}
  }
}` /]

So here we are counting up all the entries in a particular year and plotting this as a histogram:

We can do some light manipulations of our data with “transforms” and “filters”. There are more complicated examples of filtering our data on the Vega-lite website docs.

Here, lets just look at data between the years 1960 and 2000. We can do this by adding some filtering code to our vega-lite plot:

transform:[{filter:{"timeUnit":"year", field:"year", "lte":2000}},
	  {filter:{"timeUnit":"year", field:"year", "gte":1960}}],

Neat! Of course, the goal is to make these interactive plots. So let’s get to it!

Interactive plotting with Vega-lite

Just like we did with ipywidgets in our Jupyter notebooks, we can include sliders and toggles to make our plots interactive. We in fact did this above when we made the ability to change colors based on different aspects of our datasets.

Let’s add two new variables to our webpage to control the range over which we are plotting our data:

[var name:"yearStart" value:1960 /]
[var name:"yearEnd" value:2000 /]

Now our “transform” operation will look a little different:

transform:[{filter:{"timeUnit":"year", field:"year", "lte":yearEnd}},
             {filter:{"timeUnit":"year", field:"year", "gte":yearStart}}],

Finally, let’s combine all of these concepts (colors, sliders, binning) into one MEGA-histogram with all kinds of interactions:

Color by: NoneSex of Corgi BornCountry

We can also print out in text the values of our sliders - the current maxiumum year of our plot is 1960.00. You’ll note you can also drag around this value and it will update the plot.

Let’s talk about publishing

Now that we have created these cool images and interactive visualizations, we want to share them with the world!

We will publish our new data blog on github with the “github.io” webhosting services. All for free!

Beginning Interactivity with D3.js

A good reference is the D3 Link on the Idyll Webpage.

In our basic template, we have a folder called components. Let’s check out the custom-d3-component.js file.

Before going through this code, lets use it here in our post and see what it does:

The Code:

The code that does this is:

const React = require('react'); // this allows us to interact with the component
const D3Component = require('idyll-d3-component'); // uses D3.js and javascript to make our plot
const d3 = require('d3'); // use D3 javascript background

const size = 600; // our thing will be 600 pixels across

class CustomD3Component extends D3Component { // hey, add to D3!

  // This block here will just initialize our setup
  initialize(node, props) {
    const svg = this.svg = d3.select(node).append('svg');
    // first, lets make a box of size 600 X 600 pixels
    svg.attr('viewBox', `0 0 ${size} ${size}`)
      .style('width', '100%')
      .style('height', 'auto');

    // now, draw a circle
    svg.append('circle')
      .attr('r', 20) // 20px radius
      // these next two lines specify a random x & y coordinates
      .attr('cx', Math.random() * size)
      .attr('cy', Math.random() * size);
  }

  // on an "update" of our plot this is what we do:
  update(props, oldProps) {
    this.svg.selectAll('circle') // grab the circle part
      .transition() // make a nice animation
      .duration(750)
      .attr('cx', Math.random() * size) // update random location
      .attr('cy', Math.random() * size);
  }
}

Now that we know a bit about what we are doing, lets, starting from this custom component, modify it to make our own.

In the components directory do:

cp custom-d3-component.js my-custom-d3-component.js

Then open my-custom-d3-component.js with your favorite text editor.

If we have time: more complex data viz

If time permits, we can do some more complex dataviz things with Vega-lite.

First, let’s grab some map data: