Forem: Nataliya Stepanova

Bringing SVG Elements to Life with D3’s Tween Function

Nataliya Stepanova — Mon, 14 Apr 2025 09:50:51 +0000

Recently, I was exploring different ways to animate my charts and realized I didn't fully understand how all this magic works in D3. It’s easy to say “Sure, D3 can animate stuff!”, but it’s another thing to really know what's going on under the hood.

So, I decided to dive deeper, experiment a bit, and came up with this tutorial.

Instead of using typical bar or line charts, I chose to draw something playful (and, yes, slightly off-topic) — a simple planetary system.

🔗 Feel free to skip the explanation if you're only interested in the final result: https://codepen.io/gnykka/pen/EaYzyJz.

I don't want to spend too much time on rendering details, so I'll just show you my basic code with inline comments and then focus on creating smooth animations. Let’s jump in!

<!DOCTYPE html>
<html>
  <head>
    <!--
      Everything is rendered with D3 in JS,
      so I only need basic style for body tag
    -->
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        margin: 0;
        background: #222;
      }
    </style>
    <!-- Load latest D3.js code -->
    <script src="https://d3js.org/d3.v7.js"></script>
  </head>
  <body>
    <!-- Main SVG container for the graphics -->
    <svg id="orbit" width="800" height="800"></svg>

    <script>
      // Select the main SVG element
      const svg = d3.select("#orbit");

      // Set up the data with random orbits, radii, and rotation periods
      const center = { x: 400, y: 400 };
      const starRadius = 16;
      const planetsData = [];

      for (let i = 0; i < 8; i++) {
        const orbit = 40 * (i + 1) + Math.random() * 40;
        const radius = 6 + Math.random() * 10;
        const period = radius * 500;

        planetsData.push({ orbit, radius, period });
      }

      // Draw the central star as a blurred white circle  
      svg.append("circle")
        .attr("cx", center.x)
        .attr("cy", center.y)
        .attr("r", starRadius)
        .attr("fill", "white")
        .style("filter", "blur(2px)");

      // Add grey orbit paths around the star
      planetsData.forEach(({ orbit }) => {
        svg.append("circle")
          .attr("cx", center.x)
          .attr("cy", center.y)
          .attr("r", orbit)
          .attr("fill", "none")
          .attr("stroke", "#666")
          .attr("stroke-width", 0.5);
      });

      // Create circle elements for each planet
      const planets = svg
        .selectAll(".planet")
        .data(planetsData)
        .enter()
        .append("circle")
        .attr("class", "planet")
        .attr("cx", center.x)
        .attr("cy", center.y)
        .attr("r", d => d.radius)
        .attr("fill", "white")
        .attr("stroke", "#222");
    </script>
  </body>
</html>

This code is static: the planets aren't moving, and they're all bunched up in the center of screen. I could position each one on its own orbit and animate them manually using a custom requestAnimationFrame function, but that approach feels too complicated. D3 provides its own animation mechanism that uses the same requestAnimationFrame under the hood, but in a more native D3-like way.

I'm talking about the transition function. Usually, you see it in simple snippets that change a property from one value to another. For example, this snippet changes the background of the selection:

selection
  .transition()
  .style("background-color", "red");

In its simplest form, a transition changes the property from the old value to the new one in one go. I have a more complex case here: I need to change element positions — two properties at once — and calculate them based on their angle.

That’s where the special tween function comes into play. You can apply it to any transition to customize how properties are interpolated. The tween function should return another function that receives the eased time as an argument. That inner function is run every frame of the transition and updates the selection.

Now, let’s jump into writing a custom tween. I’ll start with a simple draft for transitioning all the planets:

function startOrbit(selection, d) {
  selection
    .transition();
}

planets.each(function(d) {
  startOrbit(d3.select(this), d);
});

To make the transition smooth, each planet should complete a full orbit over the transition's duration. I'll create an interpolator that maps the eased time to the angle range [0, 2𝜋] and calculates coordinates from this angle:

selection
  // Start the treansition
  .transition()
  // Attach a custom tween named "orbit"
  .tween("orbit", function() {
    // Select the planet element (the current DOM node)
    const planet = d3.select(this);

    // Create an interpolator that goes from 0 to 2π (a full orbit)
    const angleInterpolate = d3.interpolateNumber(0, 2 * Math.PI);

    // Return the function that will run each frame of the transition
    return function(t) {
      // Calculate the current angle for this frame
      const angle = angleInterpolate(t);

      // Determine the planet's x and y based on its orbit radius
      const x = center.x + d.orbit * Math.cos(angle);
      const y = center.y + d.orbit * Math.sin(angle);

      // Update the planet's position
      planet.attr("cx", x).attr("cy", y);
    };
  })
  // When the transition ends, call startOrbit again to keep it looping
  .on("end", () => startOrbit(selection, d));

Here is my result. Weird, huh? The planets are moving too fast because I didn't set the animation duration. By default, the transition lasts 250 milliseconds, so let’s replace it with each planet’s period:

selection
  .transition()
  .duration(d.period)
  ...

Better, right? But now I see the easing is off. That’s because the default easing function is easeCubic. I need easeLinear instead:

selection
  .transition()
  .duration(d.period)
  .ease(d3.easeLinear)
  ...

With this last change the planets finally move as I expect them to move. I can also change any of their other properties on every frame of the transition however I like. For instance, let’s give them some color. First, I’ll create a color scale that maps the angle range [0, 2𝜋] to the interpolateSinebow palette:

const colorScale = d3.scaleSequential()
  .domain([0, 2 * Math.PI])
  .interpolator(d3.interpolateSinebow);

Then I can apply it in my tween function like this:

planet.attr("fill", colorScale(angle));

My final result:

And that's it!

You can find the fully commented example on my Codepen: https://codepen.io/gnykka/pen/EaYzyJz

Thanks for reading and happy coding! 👾

How to Create a Sparkline Component in React

Nataliya Stepanova — Wed, 24 Jul 2024 17:44:42 +0000

Recently, while working on a finance project, I realized that Sparklines are a common requirement in most fintech applications at some point in their development.

So here I am, presenting a small tutorial on how to create a Sparkline component in React without any dependencies.

What is a Sparkline?

First, a small introduction.

A Sparkline is a minimalist, small-scale chart that provides a concise and clear representation of a data trend. The term was introduced in the early 2000s by data visualization expert Edward Tufte in his statistical researches.

Sparklines are often embedded in compact spaces, such as data cards or table cells, making them perfect for providing a snapshot of data without overwhelming the viewer with details.

This simplicity allows for quick insight and comparison, which is why Sparklines are favoured in the financial industry and other fields where concise data presentation is essential.

Demo

You can find the code here: Sparkline.tsx.

I have a simple boilerplate with Vite, TypeScript, React and TailwindCSS that I used for this repository.

Implementation

I want to create a component that takes an array of numbers as props and automatically adjusts to the parent's size.

The basic setup is straightforward. As mentioned, I'm using Tailwind CSS, so all the styling classes are derived from there.

import React from 'react';

type SparklineProps = {
  data: number[];
}

const Sparkline: React.FC<SparklineProps> = ({ data }) => {
  return (
    <div class="w-full h-full">
    </div>
  );
};

export default Sparkline;

To avoid adding any dependencies, I'll use <svg> and <polyline> elements to render the chart.

The layout will include some pre-calculated values. The width and height define the dimensions of the SVG, as the SVG element requires explicit values. The points attribute is a string that specifies the coordinates for the line.

<div class="w-full h-full">
  <svg width={width} height={height}>
    <polyline
      className="fill-none stroke-current"
      points={points}
      strokeLinejoin="round"
    />
  </svg>
</div>

Next, I'll write the basic code to calculate the points for the polyline. I've included inline comments to explain each step of the process.

// Hardcode the dimensions for now
const width = 100;
const height = 32;

// Don't render the chart for less than 2 points
if (!data || data.length < 2) return null;

// Calculate the min and max values of the data
const min = Math.min(...data);
const max = Math.max(...data);

// Construct the points string with the simple mapping
// Scales are [0, length] -> [0, width] and [min, max] -> [0, height]
const points = data.map((value, index) => {
  const x = (index / (data.length - 1)) * width;
  const y = ((value - min) / (max - min)) * height;

  return `${x},${height - y}`;
}).join(' ');

This code already provides a working Sparkline, but it has one limitation — it's not responsive. I need my charts to adapt to their parent container's size precisely.

There are several ways to achieve this, but I opted to use ResizeObserver. By listening for size changes on my <div> element, I can update the dimensions dynamically, making them part of the component's state.

To implement this, I first add the necessary imports:

import React, { useRef, useEffect, useState } from 'react';

Next, I use a ref to mark the <div> element:

<div ref={containerRef} class="w-full h-full">

With everything set up, I can now write a useEffect hook to handle all the changes dynamically. And that's it!

Here is the full code for the responsive Sparkline component:

import React, { useRef, useEffect, useState } from 'react';

type SparklineProps = {
  data: number[];
}

const Sparkline: React.FC<SparklineProps> = ({ data }) => {
  // Reference to the container element that is changeable
  const containerRef = useRef<HTMLDivElement>(null);
  // Current dimensions for the chart
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  // Create effect to run when component mounts
  useEffect(() => {
    const container = containerRef.current;

    // Do nothing if there is no element
    if (!container) return;

    const updateDimensions = () => {
      setDimensions({
        width: container.clientWidth,
        height: container.clientHeight,
      });
    };

    // Set initial dimensions
    updateDimensions();

    // Create the observer and subscribe to container's changes
    const resizeObserver = new ResizeObserver(updateDimensions);
    resizeObserver.observe(container);

    return () => {
      // Disconnect when the component unmounts
      resizeObserver.disconnect();
    };
  }, []);

  // Don't render the chart for less than 2 points
  if (!data || data.length < 2) return null;

  // Calculate the min and max values of the data
  const min = Math.min(...data);
  const max = Math.max(...data);

  // Construct the points string with the simple mapping
  // Scales are [0, length] -> [0, width] and [min, max] -> [0, height]
  const { width, height } = dimensions;
  const points = data.map((value, index) => {
    const x = (index / (data.length - 1)) * width;
    const y = ((value - min) / (max - min)) * height;

    return `${x},${height - y}`;
  }).join(' ');

  return (
    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
      <svg width={width} height={height} className="overflow-visible">
        <polyline
          className="fill-none stroke-2 stroke-current"
          points={points}
          strokeLinejoin="round"
        />
      </svg>
    </div>
  );
};

export default Sparkline;

Here is a simple usage example:

<div className="w-[480px] h-[160px]">
  <Sparkline data={...} />
</div>

Conclusion

Although this component works well for most cases, it is still quite basic. Further improvements could include customizing the appearance, handling hover events to highlight values, or adding animations and tooltips.

Thank you for reading and happy coding! ☺️