Week 6 Lab: Intro to Interactions and Deceptive Visualizations

CS-GY 6313 - Information Visualization

Ryan Kim

New York University

2025-10-10

Week 6 Lab Overview

User Interface Graphics Library Notebook
observablehq.com D3 Week 6 Lab Notebook

Today’s Lab Activities

Today we will be a exploring the following topics:

  1. Review: HTML DOM and Event Handling
  2. Basic Example: Buttons and Observable
  3. New Chart: Pie Chart
  4. Mouse Interactions
  5. Group Activity
  6. Wrap up & Sharing

Resources for You

Notebook Gallery

Review: DOM and Event Handling

Image souce: GeekForGeeks

Manipulating the DOM

  • Direct manipulation: Users interact directly with the data in the visualizations (e.g., by clicking the bar or item). This must be implemented as part of the visualization itself and requires JS event handling.
  • Indirect manipulation: Users interact with a separate, but linked interactive element (e.g., search field to filter). In Observable we can use the Input library for the input forms; in normal HTML5 websites, we need use form elements such as <button> and <input>.

Example:

interactivity = {
  const svg = d3.create("svg")
    .attr('width', width)
    .attr('height', 50);
  
  const data = [1, 2, 3];
  const circles = svg.selectAll("circle")
    .data(data)
    .enter()
      .append("circle")
        .attr("r", 10)
        .attr("cy", 25)
        .attr("cx", (d, i) => 30 + i * 30)
        .on("click", function (event, d) {
          console.log(`clicked on: ${d}`);
          const circle = d3.select(this); // can't use arrow scoping
          circle.style("stroke", "orange").style("stroke-width", "3px");
        });

  return svg.node();
}

Event Handling Syntax

.on("click", function(event, d) { ... });


  • .on(<EVENT>, <HANDLER FUNCTION>) = We are attaching the <HANDLER FUNCTION> onto the <EVENT>.
  • "click" = We want to attach our function to whenever the user mouse-clicks onto a circle.
  • function(event, d) = This handler function has access to the event details as well as the data binded to it.


W3Schools to look up the common event types and their functions

Basic Input Types

  • Button - do something when a button is clicked
  • Toggle - toggle between two values (on or off)
  • Checkbox - choose any from a set
  • Radio - choose one from a set
  • Range or Number - choose a number in a range (slider)
  • Select - choose one or any from a set (drop-down menu)
  • Text - enter freeform single-line text
  • Textarea - enter freeform multi-line text
  • Date or Datetime - choose a date
  • Color - choose a color
  • File - choose a local file

Deceptive Visualizations: A Poll

Deceptive Visualizations: Group Activity [30m]

  1. Form a 2-person group NOT sitting next to you (mingle around).
  2. Find a dataset online - can be anything from Vega-Lite’s example datasets or a custom dataset you find on websites such as Kaggle.
  3. Create two different visualizations:
    • One that does its absolute best to provide the most incorrect or discombobulated narrative.
    • Another that shows a better visualization that’s (more) honest.
  4. We will pick 3 groups to come up and present their visualizations.