Search

Animate Items

Styling

Animate properties to highlight interesting items.

Animate Items
View live example →

This demo shows some of the basic properties that can be animated to highlight items and draw users' attention.

The demo features animation of five different properties, although you can animate many more:

  • Node enlargement
  • Node position
  • Link width
  • Node and Font Icon colour
  • Ping to add an animated effect to nodes and links

Animation is a powerful visual tool that lets your users highlight interesting items. For example, ping can be used to add an animated halo effect that could represent new or updated nodes.

For a real use-case example of animation, see the Social Network Analysis demo.

Key functions used:

import KeyLines from "keylines";

import data from "./data.js";

let chart;

const palette = [
  "rgb(166, 86, 40)",
  "rgb(247, 129, 191)",
  "rgb(55, 126, 184)",
  "rgb(255, 127, 0)",
  "rgb(77, 175, 74)",
  "rgb(228, 26, 28)",
  "rgb(152, 78, 163)",
  "rgb(255, 255, 51)",
  "rgb(153, 153, 153)",
  "rgb(75, 75, 75)",
  "rgb(200, 200, 200)",
];

const numberOfNodes = 11;
const interval = 1000;
const delta = 50;
let nextPing = 0;

// Return a random integer from 0 to n-1
function randInt(n) {
  return Math.floor(Math.random() * n);
}

// Animate properties depending on which checkboxes are checked
async function doAnimation() {
  const items = [];

  // Defining Buttons
  const animPos = document.getElementById("animpos").checked;
  const animSize = document.getElementById("animsize").checked;
  const nodeColour = document.getElementById("nodecolour").checked;
  const animWidth = document.getElementById("animwidth").checked;

  // Animate nodes
  if (animPos || animSize || nodeColour) {
    chart.each({ type: "node" }, (node) => {
      const item = { id: node.id };

      if (animPos) {
        item.x = node.x + randInt(2 * delta) - delta;
        item.y = node.y + randInt(2 * delta) - delta;
      }

      if (animSize) {
        item.e = (randInt(20) + 5) / 10;
      }

      if (nodeColour) {
        const newColour = palette[randInt(palette.length)];
        if (node.fi) {
          // set a random colour from the palette to the font icon node
          item.fi = { c: newColour };
        } else {
          item.c = newColour;
        }
      }

      items.push(item);
    });
  }

  // Animate links
  if (animWidth) {
    chart.each({ type: "link" }, (link) => {
      // We don't want the width of a link to be larger than the
      // Smallest width of the nodes it's linking
      const end1 = chart.getItem(link.id1);
      const end2 = chart.getItem(link.id2);
      const maxEnlargement = Math.min(end1.e, end2.e);
      items.push({
        id: link.id,
        w: randInt(maxEnlargement * 20) + 1,
      });
    });
  }

  await chart.animateProperties(items, { time: interval });
  // we call this function here so that it starts again once
  // the animation is complete
  doAnimation();
}

// Ping the next node in sequence
function doPing() {
  const id = `n${nextPing}`;

  const node = chart.getItem(id);

  // We make the halo colour match the node colour
  chart.ping(id, { c: node.fi ? node.fi.c : node.c });

  // Increment nextPing, wrapping to zero when we reach numberOfNodes
  nextPing = (nextPing + 1) % numberOfNodes;
}

function enableInteraction() {
  doAnimation();

  // Hook up the Ping button handler
  const pingButton = document.getElementById("ping");
  pingButton.addEventListener("click", () => {
    doPing();
  });
}

async function startKeyLines() {
  const options = {
    drag: {
      links: false,
    },
    logo: "/images/Logo.png",
    handMode: true,
    iconFontFamily: "Font Awesome 5 Free",
  };

  chart = await KeyLines.create({
    container: "klchart",
    options,
  });
  chart.load(data);
  chart.layout("organic", { animate: false, tightness: 2 });
  enableInteraction();
}

function loadKeyLines() {
  document.fonts.load('24px "Font Awesome 5 Free"').then(startKeyLines);
}

window.addEventListener("DOMContentLoaded", loadKeyLines);
const data = {
  type: "LinkChart",
  items: [
    { type: "link", id: "l0", id1: "n7", id2: "n2", w: 5, off: 20 },
    { type: "link", id: "l1", id1: "n5", id2: "n8", w: 5, off: 0 },
    { type: "link", id: "l2", id1: "n3", id2: "n0", w: 5, off: 20 },
    { type: "link", id: "l3", id1: "n2", id2: "n7", w: 5, off: 20 },
    { type: "link", id: "l4", id1: "n10", id2: "n1", w: 5, off: 0 },
    { type: "link", id: "l5", id1: "n0", id2: "n6", w: 5, off: 0 },
    { type: "link", id: "l6", id1: "n5", id2: "n9", w: 5, off: -20 },
    { type: "link", id: "l7", id1: "n3", id2: "n2", w: 5, off: 0 },
    { type: "link", id: "l8", id1: "n5", id2: "n9", w: 5, off: 20 },
    { type: "link", id: "l9", id1: "n6", id2: "n4", w: 5, off: 0 },
    { type: "link", id: "l10", id1: "n5", id2: "n7", w: 5, off: 0 },
    { type: "link", id: "l11", id1: "n3", id2: "n1", w: 5, off: 0 },
    { type: "link", id: "l12", id1: "n2", id2: "n1", w: 5, off: 0 },
    { type: "link", id: "l13", id1: "n0", id2: "n3", w: 5, off: 20 },
    {
      type: "node",
      id: "n0",
      fi: { t: "fas fa-user", c: "rgb(166, 86, 40)" },
      x: 199.68822039291624,
      y: -68.48786200304697,
      e: 0.9,
    },
    {
      type: "node",
      id: "n1",
      fi: { t: "fas fa-user", c: "rgb(247, 129, 191)" },
      x: -104.85690063748247,
      y: -229.72194829802464,
      e: 0.5,
    },
    {
      type: "node",
      id: "n2",
      fi: { t: "fas fa-user", c: "rgb(55, 126, 184)" },
      x: -139.4568292374141,
      y: -56.60726721278092,
      e: 0.5,
    },
    {
      type: "node",
      id: "n3",
      fi: { t: "fas fa-user", c: "rgb(255, 127, 0)" },
      x: 30.100885642289654,
      y: -118.48969926461295,
      e: 1.9,
    },
    {
      type: "node",
      id: "n4",
      c: "rgb(77, 175, 74)",
      x: 482.30308923740245,
      y: 15.8044586733037,
      e: 0.9,
    },
    {
      type: "node",
      id: "n5",
      c: "rgb(228, 26, 28)",
      x: -337.0352668368565,
      y: 238.39410893883604,
      e: 1.2,
    },
    {
      type: "node",
      id: "n6",
      c: "rgb(152, 78, 163)",
      x: 337.9793837951987,
      y: 13.017348951037064,
      e: 2,
    },
    {
      type: "node",
      id: "n7",
      c: "rgb(255, 255, 51)",
      x: -252.58661303769622,
      y: 81.66355385446778,
      e: 0.8,
    },
    {
      type: "node",
      id: "n8",
      c: "rgb(153, 153, 153)",
      x: -482.30308923740245,
      y: 298.2763517671615,
      e: 1.9,
    },
    {
      type: "node",
      id: "n9",
      c: "rgb(75, 75, 75)",
      x: -272.2547552060172,
      y: 382.28825660272616,
      e: 1.2,
    },
    {
      type: "node",
      id: "n10",
      c: "rgb(200, 200, 200)",
      x: -145.46560383306766,
      y: -382.28825660272616,
      e: 2,
    },
  ],
};

export default data;
<!doctype html>
<html lang="en" style="background-color: #2d383f">
  <head>
    <meta charset="utf-8" />
    <title>Animate Items</title>
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/keylines.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/minimalsdk.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/sdk-layout.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/demo.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="@fortawesome/[email protected]/css/fontawesome.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="@fortawesome/[email protected]/css/solid.css"
    />
  </head>
  <body>
    <div id="klchart" class="klchart"></div>
    <script type="module" src="./code.js"></script>
  </body>
</html>

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.