Animating Words with d3

Updated Feb 14, 2018

d3’s built-in transitions make it a great tool to animate arbitrary elements. Here we take advantage of that to animate SVG text elements, taking a sentence and scrambling the letters:

Get started by defining the data setting up the main SVG element:

Getting started Copy


import {
  select  as d3_select,
  shuffle as d3_shuffle
} from 'd3';

let data = 'Does this make any sense?'.split('').map( (d, i) => ({
  letter  : d,
  index   : i,
  pos     : i
}));

const LETTER_WIDTH = 22;
const WIDTH        = LETTER_WIDTH * data.length;
const HEIGHT       = 80;

const svg = d3_select('#letters').append('svg')
  .attr('width', WIDTH)
  .attr('height', HEIGHT)
  .append('g')
    .attr('transform', 'translate(0,' + (HEIGHT/2) + ')');

Line 6 Define the data. The index property stores the actual letter index in the array, while the pos property defines the current letter position. We update this later.

Line 12 A magic number specifying the pixel width of each letter.

Line 16 Assumes you have a #letters element in the DOM.

Next we define an update function that handles data entry and update using the standard d3 pattern:

Update Copy


function update (data) {

  const text = svg.selectAll('text').data(data, d => d.index);

  text.enter().append('text')
    .attr('fill', d => d.letter === '?' ? 'tomato' : '#000')
    .attr('x', (d, i) => LETTER_WIDTH*d.pos)
    .style('font-size', '40px')
    .style('font-family', 'monospace')
    .text(d => d.letter)
    .merge(text)
      .transition().duration(1000)
      .attr('x', (d, i) => LETTER_WIDTH*d.pos);

}

Line 3 Join the data to the text elements. We specify the join key as the index property; without this the data would be joined on array index, which won’t work here since we shuffle the array contents later.

Lines 5-10 Perform the setup on data entry.

Lines 11-13 On update move the letter to its new position.

With the update function in hand the last step is to create a loop to shuffle the letters, call update, and restore their positions:

The loop Copy


function loop () {

  update(data);

  window.setTimeout(function () {

    data = d3_shuffle(data).map( (d, i) => {
      d.pos = i;
      return d;
    });
    update(data);

    window.setTimeout(function () {
      data = data.map( (d, i) => {
        d.pos = d.index;
        return d;
      });
      loop();
    }, 2000);

  }, 2000);
}
loop();

Line 3 Call the update function to initially render the letters.

Line 5 Set a timeout to shuffle the letters.

Lines 7-11 Use d3’s built-in shuffle method to shuffle the data. We store the new pos property on the data. Call update.

Lines 13-19 Set a second timeout to restore the letters to their original position.

Line 23 Call loop to get everything going.

That’s all there is to it. Maybe not the most useful application but still fun.

Comments Leave a comment

JamesBak Apr 24, 2020

Great looking website. Think you did a bunch of your very own html coding.

Reply
- EssyCodeModerator Apr 25, 2020
  
  Thanks for saying so. I wrote a custom WordPress theme and decided to re-invent the wheel and also do the code example generation and styling from scratch.
  
  Reply