Visualize Data with a Bar Chart with React and d3

JavaScript
1

Tell us what’s happening:
Hello helpers,
Since I want to get better at react, im trying to do the data visualisation projects in react, yet i’ve been at it for a couple days but only my background and the “header” is shown in localhost:3000. What im doing wrong?
Im even running localhost in incognito mode so no chrome extensions come in the way.

Your code so far

App.js
import React from 'react';

import BarChart from './BarChart'
import './App.css';

function App() {


  return (
    <div class="header" id="title">
      <h1>Visualisation with Bar Chart</h1>
      <h3>FreeCodeCamp Project</h3>
      <p>by slow1mo</p>
      <BarChart />
      <div class="container">
        <div class="row">
          <div id="main" class="main col-md-12 text-center">
          </div>
        </div>
      </div>
    </div>


  );
}

export default App;

BarChart.js

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

class BarChart extends Component {

    componentDidMount() {
        this.DrawChart();

    }

    DrawChart = (data) => {
        var w=900,
        h=500,
        p=30;

        const svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
            .attr("padding",p)
            .style("margin-left", 100);

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", (d, i) => i * 70)
            .attr("y", (d, i) => h - 10 * d)
            .attr("width", 65)
            .attr("height", (d, i) => d * 10)
            .attr("fill", "green")

        svg.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .text((d) => d)
            .attr("x", (d, i) => i * 70)
            .attr("y", (d, i) => h - (10 * d) - 3)
    }

    render() {
        return <div id={"#" + this.props.id}></div>
    }
}


export default BarChart;

d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", function (data) {
    var dataSet = data.data;
    BarChart(dataSet);
});

App.css

body {
    background-color: MediumAquaMarine;
}

h1,
h3,
p {
    text-align: center;
    font-family: Trebuchet MS;
}

.bar-chart {
    background-color: lightgrey;
}

I have installed with npm : d3, react-d3, bootstrap in the project. Thx in advance and Im looking forward to your help.
Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36.

Link to the challenge: