Adding Graphics to a React App with D3 — Scales and Axes

D3 lets us add graphics to a front-end web app easily.

Vue is a popular front end web framework.

They work great together. In this article, we’ll look at how to add graphics to a Vue app with D3.

Scales

We can use the scales API to transform data.

For example, we can write:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const data = [100, 220, 330, 350, 400, 250];
    const width = 500,
      barHeight = 20,
      margin = 1;

    const scale = d3
      .scaleLinear()
      .domain([d3.min(data), d3.max(data)])
      .range([100, 400]);

    const svg = d3
      .select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", barHeight * data.length);

    const g = svg
      .selectAll("g")
      .data(data)
      .enter()
      .append("g")
      .attr("transform", function (d, i) {
        return `translate(0, ${i * barHeight})`;
      });

    g.append("rect")
      .attr("width", function (d) {
        return scale(d);
      })
      .attr("height", barHeight - margin);

    g.append("text")
      .attr("x", function (d) {
        return scale(d);
      })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function (d) {
        return d;
      });
  }, []);

  return <div className="App"></div>;
}

We have the data that we want to display as bars in our code.

Then we specify the width for the chart and the barHeight for each bar.

Next, we create a scale with the min and max values for our chart:

const scale = d3
  .scaleLinear()
  .domain([d3.min(data), d3.max(data)])
  .range([100, 400]);

This will be used when we create our bar to scale the bars’ widths.

Next, we create our group object by writing:

const svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", barHeight * data.length);

We add the svg element and set the width and height for the bar chart.

Then we set the dimensions for the bars with:

g.append("rect")
  .attr("width", function(d) {
    return scale(d);
  })
  .attr("height", barHeight - margin);

We call scale to scale bars to be proportional to the width of the svg .

And finally, we add the bars with:

g.append("text")
  .attr("x", function(d) {
    return scale(d);
  })
  .attr("y", barHeight / 2)
  .attr("dy", ".35em")
  .text(function(d) {
    return d;
  });

We call scale to position the bar.

y has the y coordinate of the bar.

dy adds the gap for each bar.

text has the text for the bar.

Axis

We can add axes to our graphs.

For example, we can write:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const width = 400,
      height = 400;
    const data = [100, 120, 140, 160, 180, 200];
    const svg = d3
      .select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

    const xscale = d3
      .scaleLinear()
      .domain([0, d3.max(data)])
      .range([0, width - 100]);

    const yscale = d3
      .scaleLinear()
      .domain([0, d3.max(data)])
      .range([height / 2, 0]);

    const xAxis = d3.axisBottom().scale(xscale);
    const yAxis = d3.axisLeft().scale(yscale);
    svg.append("g").attr("transform", "translate(50, 10)").call(yAxis);
    const xAxisTranslate = height / 2 + 10;

    svg
      .append("g")
      .attr("transform", `translate(50, ${xAxisTranslate})`)
      .call(xAxis);
  }, []);

  return <div className="App"></div>;
}

We add the svg to the body with:

const svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

Then we create the scale function for the x-axis by writing:

const xscale = d3
  .scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, width - 100]);

This lets us scale the x-axis to be proportional to the width of the SVG.

Similar, we create a function to scale the y-axis:

const yscale = d3
  .scaleLinear()
  .domain([0, d3.max(data)])
  .range([height / 2, 0]);

Next, we create the x and y axes by writing:

const xAxis = d3.axisBottom().scale(xscale);
const yAxis = d3.axisLeft().scale(yscale);

Then we move the y-axis right and down by writing:

svg.append("g").attr("transform", "translate(50, 10)").call(yAxis);

by the given number of pixels.

And then we add the x-axis and translate it so that it forms a right angle with the y-axis by writing:

const xAxisTranslate = height / 2 + 10;

svg
  .append("g")
  .attr("transform", `translate(50, ${xAxisTranslate})`)
  .call(xAxis);

Now we should see the axes for a graph.

Conclusion

We can add scales and axes to our graph by using the D3 library in our React app.