DEV Community: Murat Kemaldar

Using Vue 3's Composition API with D3

Murat Kemaldar — Sun, 17 Jan 2021 04:35:56 +0000

Vue had a major update in 2020 to version 3, which includes the new Composition API.

In a nutshell, the Composition API is all about enabling better code re-use, by exposing Vue's internal bits and pieces, which you usually define as an object in a component (like lifecycle hooks, computed properties, watchers...).

If you have worked with Vue 2 before, you can compare the Composition API to Mixins, but better. Anthony Gore explains that perfectly.

D3 is JavaScript data visualization library best used for custom chart components. It has also changed quite a bit. It introduced a new Join API, which makes the API much more accessible. There hasn't been a better time to learn D3.

What to expect

In this article, I will be showing an annotated example to render a responsive line chart component. This example has 3 main files where the action is happening:

App.vue component
- which has some data and 2 buttons to manipulate the data
- which renders a ResponsiveLineChart component with that data
ResponsiveLineChart.vue component
- which uses the Composition API to render an SVG with D3
- which updates when the underlying data or the width / height of our SVG changes
resizeObserver.js custom hook
- which uses the Composition API get the current width / height of an element (with the help of the ResizeObserver API, which means width / height will update on resize)

Vue or D3: Who renders our SVG?

Both Vue and D3 have their own way of handling the DOM.

In the following example, Vue will render the SVG itself as a container but we will let D3 handle what is happening inside of our SVG (with the so-called General Update Pattern of D3.

The main reason for this is to help you to understand most of the other D3 examples out there which all use the "D3 way" of manipulating the DOM. It is a bit more verbose and imperative, but gives you more flexibility and control when it comes to animations, or handling "new", "updating" or "removing" elements. You are free to let Vue handle all the rendering to be more declarative, but you don't have to. It's a trade-off!

Same decision was also made in my other series where we combine React Hooks and D3.

This following example was made with @vue/cli and d3. You can check out the full example here on my GitHub repo.

Here is also a working Demo.

The example

App.vue

<template>
  <div id="app">
    <h1>Using Vue 3 (Composition API) with D3</h1>
    <responsive-line-chart :data="data" />
    <div class="buttons">
      <button @click="addData">Add data</button>
      <button @click="filterData">Filter data</button>
    </div>
  </div>
</template>

<script>
import ResponsiveLineChart from "./components/ResponsiveLineChart.vue";

export default {
  name: "App",
  components: {
    ResponsiveLineChart,
  },
  data() {
    return {
      data: [10, 40, 15, 25, 50],
    };
  },
  methods: {
    addData() {
      // add random value from 0 to 50 to array
      this.data = [...this.data, Math.round(Math.random() * 50)];
    },
    filterData() {
      this.data = this.data.filter((v) => v <= 35);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  max-width: 720px;
  margin: 100px auto;
  padding: 0 20px;
}

svg {
  /* important for responsiveness */
  display: block;
  fill: none;
  stroke: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #eee;
}

.buttons {
  margin-top: 2rem;
}
</style>

ResponsiveLineChart.vue

<template>
  <div ref="resizeRef">
    <svg ref="svgRef">
      <g class="x-axis" />
      <g class="y-axis" />
    </svg>
  </div>
</template>

<script>
import { onMounted, ref, watchEffect } from "vue";
import {
  select,
  line,
  scaleLinear,
  min,
  max,
  curveBasis,
  axisBottom,
  axisLeft,
} from "d3";
import useResizeObserver from "@/use/resizeObserver";

export default {
  name: "ResponsiveLineChart",
  props: ["data"],
  setup(props) {
    // create ref to pass to D3 for DOM manipulation
    const svgRef = ref(null);

    // this creates another ref to observe resizing, 
    // which we will attach to a DIV,
    // since observing SVGs with the ResizeObserver API doesn't work properly
    const { resizeRef, resizeState } = useResizeObserver();

    onMounted(() => {
      // pass ref with DOM element to D3, when mounted (DOM available)
      const svg = select(svgRef.value);

      // whenever any dependencies (like data, resizeState) change, call this!
      watchEffect(() => {
        const { width, height } = resizeState.dimensions;

        // scales: map index / data values to pixel values on x-axis / y-axis
        const xScale = scaleLinear()
          .domain([0, props.data.length - 1]) // input values...
          .range([0, width]); // ... output values

        const yScale = scaleLinear()
          .domain([min(props.data), max(props.data)]) // input values...
          .range([height, 0]); // ... output values

        // line generator: D3 method to transform an array of values to data points ("d") for a path element
        const lineGen = line()
          .curve(curveBasis)
          .x((value, index) => xScale(index))
          .y((value) => yScale(value));

        // render path element with D3's General Update Pattern
        svg
          .selectAll(".line") // get all "existing" lines in svg
          .data([props.data]) // sync them with our data
          .join("path") // create a new "path" for new pieces of data (if needed)

          // everything after .join() is applied to every "new" and "existing" element
          .attr("class", "line") // attach class (important for updating)
          .attr("stroke", "green") // styling
          .attr("d", lineGen); // shape and form of our line!

        // render axes with help of scales
        // (we let Vue render our axis-containers and let D3 populate the elements inside it)
        const xAxis = axisBottom(xScale);
        svg
          .select(".x-axis")
          .style("transform", `translateY(${height}px)`) // position on the bottom
          .call(xAxis);

        const yAxis = axisLeft(yScale);
        svg.select(".y-axis").call(yAxis);
      });
    });

    // return refs to make them available in template
    return { svgRef, resizeRef };
  },
};
</script>

resizeObserver.js

import { ref, reactive, onMounted, onBeforeUnmount } from "vue";

export const useResizeObserver = () => {
  // create a new ref, 
  // which needs to be attached to an element in a template
  const resizeRef = ref();
  const resizeState = reactive({
    dimensions: {}
  });

  const observer = new ResizeObserver(entries => {
    // called initially and on resize
    entries.forEach(entry => {
      resizeState.dimensions = entry.contentRect;
    });
  });

  onMounted(() => {
    // set initial dimensions right before observing: Element.getBoundingClientRect()
    resizeState.dimensions = resizeRef.value.getBoundingClientRect();
    observer.observe(resizeRef.value);
  });

  onBeforeUnmount(() => {
    observer.unobserve(resizeRef.value);
  });

  // return to make them available to whoever consumes this hook
  return { resizeState, resizeRef };
};

export default useResizeObserver;

Conclusion

That's it! Hope the annotations / the code is self-explanatory. Let me know in the comments, if you have any questions / feedback!

Like I said earlier, you can check out the full example here on my GitHub repo.

Enjoy!

🧪 Periodic Table of Elements with React + CSS Grid

Murat Kemaldar — Sun, 07 Jun 2020 19:46:01 +0000

Hi, this is a short video tutorial [9:44] about building a Periodic Table of Elements with React + CSS Grid.

Resources:

Code: https://github.com/muratkemaldar/periodic-table-css
JSON data for Periodic Table: https://github.com/Bowserinator/Periodic-Table-JSON

Enjoy!

5 Things You Should Know About Using React (Hooks) with D3

Murat Kemaldar — Mon, 09 Mar 2020 18:18:32 +0000

Hi!

This is the final episode of the "Using React (Hooks) with D3" series, and in this one, I recap and sum up the most important things to remember from this series.

Hope you like it, and as always, you can find the code for this episode and all the other episodes here on GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/17-finale

Thanks for all the support for this series, see you in the next series! I will probably still do stuff regarding D3 / dataviz, but in another context. If you have any issues with the series and the code from this series, just let me know or create an Issue on the repo.

Enjoy!

Creating a Zoomable Line Chart – Using React (Hooks) with D3

Murat Kemaldar — Sun, 16 Feb 2020 15:02:11 +0000

Code on GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/16-zoomable-line-chart

Hi, this is part of the "Using React (Hooks) with D3" video tutorial series, and in this one, we add a zoom functionality to line charts using D3.

Enjoy!

🥑🍌🍆 Creating a Stacked Area Chart – Using React (Hooks) with D3

Murat Kemaldar — Sun, 09 Feb 2020 19:05:16 +0000

Hi, this is video tutorial for creating a Stacked Area Chart with D3 and React (Hooks).

This is a follow-up to the last entry in the series, where we created a Stacked Bar Chart component. In this one, we transform our Stacked Bar Chart component to become a Stacked Area Chart component.

The code for this video you can find also on GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/15-stacked-area-chart

Enjoy!

🥑🍌🍆 Creating a Stacked Bar Chart – Using React (Hooks) with D3

Murat Kemaldar — Sat, 01 Feb 2020 13:49:03 +0000

Hi, I created a new video for "Using React (Hooks) with D3", where we build a stacked bar chart with D3 and create-react-app.

Stacked Bar Charts are nice if you want to visualize your data for individial trends over time, while also being able to compare summed-up values for each time interval.

You can find the code for this video on GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/15-stacked-bar-chart

You can also find this video on YouTube:

Enjoy!

The Basics of Using React Hooks with D3 (Remastered for 2020)

Murat Kemaldar — Thu, 02 Jan 2020 16:08:18 +0000

Hey, this is a remake / remaster of the very first video tutorial I did on "Using React (Hooks) with D3". That one had poor audio quality and other things that bugged me. Enjoy this one and happy new year!

Code on GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/01-the-basics

Interactive World Map with D3-geo

Murat Kemaldar — Sun, 22 Dec 2019 16:50:45 +0000

Hi, this is part 12 of Using React (Hooks) with D3, and in this video tutorial, we create a world map with d3-geo.

Enjoy!

Creating a Physics-Based Force Layout with D3 / React

Murat Kemaldar — Tue, 17 Dec 2019 10:33:06 +0000

Hey, this is part 11 of Using React (Hooks) with D3, and this video tutorial is about exploring d3-force, a suite of physics and force-based tools to simulate natural behavior.

(Also I updated all of my thumbs)

Code here:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/11-force

Enjoy!

Creating an Animated Tree Chart with React and D3

Murat Kemaldar — Sun, 08 Dec 2019 12:49:05 +0000

Hi, this is part 10 of my Using React (Hooks) with D3 video tutorial series, and in this one, we create an animated tree!

Code can be found here:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/10-hierarchy

This is the data we work with and pass to the TreeChart component (see below):

const initialData = {
  name: "😐",
  children: [
    {
      name: "🙂",
      children: [
        {
          name: "😀"
        },
        {
          name: "😁"
        },
        {
          name: "🤣"
        }
      ]
    },
    {
      name: "😔"
    }
  ]
};

This is code I am using for creating a TreeChart component:

import React, { useRef, useEffect } from "react";
import { select, hierarchy, tree, linkHorizontal } from "d3";
import useResizeObserver from "./useResizeObserver";

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

function TreeChart({ data }) {
  const svgRef = useRef();
  const wrapperRef = useRef();
  const dimensions = useResizeObserver(wrapperRef);

  // only save the old data if we rendered it (with dimensions)
  // otherwise the data in useEffect is always equal.
  // reason: we want to animate when the data changes, but not the dimensions.
  // we skip the initial render (with no dimensions, but data)
  const previouslyRenderedData = usePrevious(dimensions ? data : null);

  // will be called initially and on every data change
  useEffect(() => {
    const svg = select(svgRef.current);
    if (!dimensions) return;

    // utility to transform hierarchical data
    // to be able to extract nodes (descendants) and links
    const root = hierarchy(data);
    const treeLayout = tree().size([dimensions.height, dimensions.width]);

    const linkGenerator = linkHorizontal()
      .x(link => link.y)
      .y(link => link.x);

    // enrich hierarchical data with coordinates
    treeLayout(root);

    // nodes
    svg
      .selectAll(".node")
      .data(root.descendants())
      .join(enter => enter.append("circle").attr("opacity", 0))
      .attr("class", "node")
      .attr("cx", node => node.y)
      .attr("cy", node => node.x)
      .attr("r", 4)
      .transition()
      .duration(500)
      .delay(node => node.depth * 300)
      .attr("opacity", 1);

    // links
    const enteringAndUpdatingLinks = svg
      .selectAll(".link")
      .data(root.links())
      .join("path")
      .attr("class", "link")
      .attr("d", linkGenerator)
      .attr("stroke-dasharray", function() {
        const length = this.getTotalLength();
        return `${length} ${length}`;
      })
      .attr("stroke", "black")
      .attr("fill", "none")
      .attr("opacity", 1);

    // only if data has changed, do the animations
    if (data !== previouslyRenderedData) {
      enteringAndUpdatingLinks
        .attr("stroke-dashoffset", function() {
          return this.getTotalLength();
        })
        .transition()
        .duration(500)
        .delay(link => link.source.depth * 500)
        .attr("stroke-dashoffset", 0);
    }

    // labels
    svg
      .selectAll(".label")
      .data(root.descendants())
      .join(enter => enter.append("text").attr("opacity", 0))
      .attr("class", "label")
      .attr("x", node => node.y)
      .attr("y", node => node.x - 12)
      .attr("text-anchor", "middle")
      .attr("font-size", 24)
      .text(node => node.data.name)
      .transition()
      .duration(500)
      .delay(node => node.depth * 300)
      .attr("opacity", 1);
  }, [data, dimensions, previouslyRenderedData]);

  return (
    <div ref={wrapperRef} style={{ marginBottom: "2rem" }}>
      <svg ref={svgRef}></svg>
    </div>
  );
}

export default TreeChart;

Enjoy!

Creating a Racing Bar Chart – Using React (Hooks) with D3

Murat Kemaldar — Sat, 30 Nov 2019 22:26:14 +0000

Hi, this is part 9 of my "Using React (Hooks) with D3" series, and in this one, we create a Racing Bar Chart!

Code can be found on my GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/09-racing-bar-chart

Enjoy!

Visualizing the Breaking Bad Timeline – Using React (Hooks) with D3

Murat Kemaldar — Sun, 24 Nov 2019 20:09:27 +0000

Hi, this is part 8 of "Using React (Hooks) with D3, and in this one, we visualize the Breaking Bad timeline, by working with time scales.

Code:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/08-breaking-bad

Timeline component:

import React, { useRef, useEffect } from "react";
import { select, min, max, scaleTime, scaleLinear, axisBottom } from "d3";
import useResizeObserver from "./useResizeObserver";

// helper to transform date strings to date objects
const getDate = dateString => {
  const date = dateString.split("-");
  return new Date(date[2], date[0] - 1, date[1]);
};

function BBTimeline({ data, highlight }) {
  const svgRef = useRef();
  const wrapperRef = useRef();
  const dimensions = useResizeObserver(wrapperRef);

  // will be called initially and on every data change
  useEffect(() => {
    const svg = select(svgRef.current);
    if (!dimensions) return;

    const minDate = min(data, episode => getDate(episode.air_date));
    const maxDate = max(data, episode => getDate(episode.air_date));

    // maps dates to x-values
    const xScale = scaleTime()
      .domain([minDate, maxDate])
      .range([0, dimensions.width]);

    // maps numbers (character count) to y-values
    const yScale = scaleLinear()
      .domain([max(data, episode => episode.characters.length), 0])
      .range([0, dimensions.height]);

    // renders line for each episode
    svg
      .selectAll(".episode")
      .data(data)
      .join("line")
      .attr("class", "episode")
      .attr("stroke", episode =>
        episode.characters.includes(highlight) ? "blue" : "black"
      )
      .attr("x1", episode => xScale(getDate(episode.air_date)))
      .attr("y1", dimensions.height)
      .attr("x2", episode => xScale(getDate(episode.air_date)))
      .attr("y2", episode => yScale(episode.characters.length));

    // x-axis
    const xAxis = axisBottom(xScale);
    svg
      .select(".x-axis")
      .style("transform", `translateY(${dimensions.height}px)`)
      .call(xAxis);

    // draw the gauge
  }, [data, dimensions, highlight]);

  return (
    <div ref={wrapperRef} style={{ marginBottom: "2rem" }}>
      <svg ref={svgRef}>
        <g className="x-axis" />
      </svg>
    </div>
  );
}

export default BBTimeline;

Hope you like it!