<div id="app"></div>
// Based on https://bl.ocks.org/d3noob/402dd382a51a4f6eea487f9a35566de0

function LineGraph({data}) {
  const margin = {top: 20, right: 20, bottom: 20, left: 50};
  const width = 960 - margin.left - margin.right;
  const height = 500 - margin.top - margin.bottom;
  
  const scaleX = d3.scaleTime()
    .domain(d3.extent(data, d => new Date(d.timestamp)))
    .range([0, width]);
  
  const scaleY = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .range([height, 0]);
  
  const lineFn = d3.line()
    .x(d => scaleX(new Date(d.timestamp)))
    .y(d => scaleY(d.value));
  
  return (
    <svg 
      width={width + margin.left + margin.right}
      height={height + margin.top + margin.bottom}>

      {/* x axis */}
      <g transform={`translate(${margin.left}, ${height + margin.top})`}>
        <line
          fill="none"
          stroke="lightgrey"
          strokeWidth={2}
          x0={0}
          y0={0}
          x1={width}
          y1={0}/>
      </g>    
      
      {/* y axis */}
      <g transform={`translate(${margin.left}, ${margin.top})`}>
        <line
          fill="none"
          stroke="lightgrey"
          strokeWidth={2}
          x0={0}
          y0={0}
          x1={0}
          y1={height}
          />
      </g>
      
      {/* line */}
      <g transform={`translate(${margin.left}, ${margin.top})`}>
        <path 
          fill="none"
          stroke="steelblue"
          strokeWidth={2}
          d={lineFn(data)}/>
      </g>
    </svg>
  );
}

const exampleData = [
  {timestamp: "2012-05-01T00:00:00.0Z", value: 58.13},
  {timestamp: "2012-04-30T00:00:00.0Z", value: 53.98},
  {timestamp: "2012-04-27T00:00:00.0Z", value: 67.00},
  {timestamp: "2012-04-26T00:00:00.0Z", value: 89.70},
  {timestamp: "2012-04-25T00:00:00.0Z", value: 99.00},
  {timestamp: "2012-04-24T00:00:00.0Z", value: 130.28},
  {timestamp: "2012-04-23T00:00:00.0Z", value: 166.70},
  {timestamp: "2012-04-20T00:00:00.0Z", value: 234.98},
  {timestamp: "2012-04-19T00:00:00.0Z", value: 345.44},
  {timestamp: "2012-04-18T00:00:00.0Z", value: 443.34},
  {timestamp: "2012-04-17T00:00:00.0Z", value: 543.70},
  {timestamp: "2012-04-16T00:00:00.0Z", value: 580.13},
  {timestamp: "2012-04-13T00:00:00.0Z", value: 605.23},
  {timestamp: "2012-04-12T00:00:00.0Z", value: 622.77},
  {timestamp: "2012-04-11T00:00:00.0Z", value: 626.20},
  {timestamp: "2012-04-10T00:00:00.0Z", value: 628.44},
  {timestamp: "2012-04-09T00:00:00.0Z", value: 636.23},
  {timestamp: "2012-04-05T00:00:00.0Z", value: 633.68},
  {timestamp: "2012-04-04T00:00:00.0Z", value: 624.31},
  {timestamp: "2012-04-03T00:00:00.0Z", value: 629.32},
  {timestamp: "2012-04-02T00:00:00.0Z", value: 618.63},
  {timestamp: "2012-03-30T00:00:00.0Z", value: 599.55},
  {timestamp: "2012-03-29T00:00:00.0Z", value: 609.86},
  {timestamp: "2012-03-28T00:00:00.0Z", value: 617.62},
  {timestamp: "2012-03-27T00:00:00.0Z", value: 614.48},
  {timestamp: "2012-03-26T00:00:00.0Z", value: 606.98}
];

function App() {
  return <div><LineGraph data={exampleData}/></div>;
}

ReactDOM.render(<App/>, document.getElementById("app"));
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js