AIGlobalTutorialApp.js

import React from 'react';
import { ResponsiveLine } from '@nivo/line'
import logo from './logo.svg';
import './App.css';
let data = require('./data.json')


function App() {
  return (
    <div className="App">
      <Visualization title="My Vis"/>
    </div>
  );
}

function Visualization({ title }) {
  let points = [];
  for (let item of data) {
    points.push({ x: item.DATE, y: item.A191RL1Q225SBEA });
  }
  let visData = [
    {
      id: "us-gdp",
      data: points,
    },
  ];
  console.log(visData);
  return (
    <div style={{width: window.innerWidth + 'px', height: window.innerHeight + 'px'}}>
      <h2>{title}</h2>
      <ResponsiveLine
        enableGridX={false}
        curve={'natural'}
        useMesh={true}
        enablePoints={false}
        data={visData}
      />
    </div>
  );
}

export default App;