Adding Graphics to a React App with D3 — Line Graph

RFFFFFFPhoto by Adrien Olichon on Unsplash

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.

Line Graph

We can add a line graph into our React app with D3.

To do this, we write:

public/data.csv

year,population
2006,20
2008,25
2010,38
2012,41
2014,53
2016,26
2017,42

App.js

import React, { useEffect } from "react";
import * as d3 from "d3";
const createLineChart = async () => {
  const margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  const x = d3.scaleTime().range([0, width]);
  const y = d3.scaleLinear().range([height, 0]);
  const valueline = d3
    .line()
    .x(function (d) {
      return x(d.year);
    })
    .y(function (d) {
      return y(d.population);
    });
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)…