9 Object Constancy

9.1 Lecture slides

object_constancy.pdf

9.2 No object constancy

Transitions  Off  On Add bar Remove bar (right) Remove bar (left)

Of note:

• Rather than smoothly transitioning off to the left, all bars are resized when “Remove bar (left)” is clicked

• When “Remove bar (right) is clicked, the bar on the right immediately disappears, and then the remaining bars transition to their new places to the right.

Standalone version: no_object_constancy.html

9.3 Object constancy

Transitions  Off  On Add bar Remove bar (right) Remove bar (left)

Of note:

• Bars now smoothly transition off to the left and right

Standalone version: object_constancy.html

9.3.1 Practice joining data by key

Open the JavaScript Console

Try the following:

1. Create an svg with four text elements:

const dataset = [{key: 12, x: 163, y: 200},
               {key: 14, x: 206, y: 304},
               {key: 16, x: 452, y: 152},
               {key: 18, x: 321, y: 254}];

const svg = d3.select("#key").append("svg")
        .attr("width", "600").attr("height", "400");

svg.append("rect").attr("width", "600")
            .attr("height", "400").attr("fill", "aliceblue");

svg.selectAll("text")
        .data(dataset, d => d.key)
        .enter()
        .append("text")
        .attr("x", d => d.x)
        .attr("y", d => d.y)
        .text(d => `key: ${d.key}`);

2. Bind a new dataset by key:

const svg = d3.select("#key").select("svg");

const dataset = [{key: 12, x: 100, y: 200},
              {key: 16, x: 250, y: 300}];
              
svg.selectAll("text")
  .data(dataset, d => d.key)
  .exit()
  .remove();

Then:

svg.selectAll("text")
  .attr("x", d => d.x)
  .attr("y", d => d.y);

3. And another one:

const svg = d3.select("#key").select("svg");

const dataset = [{key: 23, x: 300, y: 150},
               {key: 5, x: 450, y: 270},
               {key: 16, x: 200, y: 250}];
              
const databind = svg.selectAll("text")
  .data(dataset, d => d.key);
  
databind  
  .enter()
  .append("text")
  .merge(databind)
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .text(d => `key: ${d.key}`);  
  
databind.exit().remove();

4. Experiment with other data binds.