Nosa Obaseki
Dec 14, 2022 ⋅ 8 min read

Getting started with D3.js and React

Nosa Obaseki Front-end dev currently building amazing products @theflutterwave 🐼🇳🇬

Recent posts:

Using CRDTs To Build Collaborative Rust Web Applications

Using CRDTs to build collaborative Rust web applications

CRDTs, or conflict-free replicated data types, is a concept that underlies applications facing the issue of data replication across a […]

Mario Zupan
Feb 23, 2024 ⋅ 15 min read
Guide to Using TensorFlow in Rust

Guide to using TensorFlow in Rust

We explore the fusion of TensorFlow and Rust, delving into how we can integrate these two technologies to build and train a neural network.

Rosario De Chiara
Feb 22, 2024 ⋅ 8 min read
Using Signaldb With React

Using SignalDB with React: A complete guide

SignalDB enables automatic data synchronization between your components and a local in-memory or persistent database.

Antonello Zanini
Feb 20, 2024 ⋅ 6 min read
Guide To Next Js Layouts And Nested Layouts

A guide to Next.js layouts and nested layouts

Understanding how layouts, nested layouts, and custom layouts work in Next.js is crucial for building complex, user-friendly projects.

Ibadehin Mojeed
Feb 19, 2024 ⋅ 12 min read
View all posts

11 Replies to "Getting started with D3.js and React"

  1. at “Putting it all together, the BarChart component will be:” ‘h’ and ‘w’ are undefined. I added “const h = 500; const x= 400;” under const data = [12, 5, 6, 6, 9, 10], and it worked. Overall, thanks for the tutorial it really helped guide my d3 work in react app.

  2. This was very hepful. Thanks. But also, it would help if you posted the full working code on github or something. Also, can you explain why you used app.js to call drawChart instead of just rendering everyting in drawChart?

  3. When I hook my app.js to a fetch, the chart doesn’t render. The initial call to componentdidmount for the chart gets no data, but when the data arrives and I set a new state, the new render has no effect on calling drawchart again. How would you recommend getting around this?

  4. // Had to fix a few bugs. One possibility for working code below…

    // App.js:

    import React from ‘react’;
    import BarChart from ‘./BarChart.js’;
    import ‘./App.css’;

    class App extends React.Component {

    state = {
    data: [12, 5, 6, 6, 9, 10],
    width: 700,
    height: 500,
    id: “root”

    render() {
    return (


    export default App;

    // BarChart.js:

    import React from ‘react’;
    import * as d3 from “d3”;

    class BarChart extends React.Component {
    componentDidMount() {

    drawChart() {
    const data = this.props.data;
    const svg = d3.select(“body”).append(“svg”)
    .attr(“width”, this.props.width)
    .attr(“height”, this.props.height);

    const h = this.props.height;

    .attr(“x”, (d, i) => i * 70)
    .attr(“y”, (d, i) => h – 10 * d)
    .attr(“width”, 25)
    .attr(“height”, (d, i) => d * 10)
    .attr(“fill”, “green”);

    .text((d) => d)
    .attr(“x”, (d, i) => i * 70)
    .attr(“y”, (d, i) => h – (10 * d) – 3)

    //selection.attr(“property”, (d, i) => {})



    export default BarChart;

  5. I can understand the article, but that is because i already know d3 and react. Please look at those suggestions above me and fix this article accordingly, because i think newbies will find this buggy and hard to follow, if just not working overall

  6. As a D3 noob, I appreciate any tutorial, but this article makes giant leaps over huge gaps.
    A. After following the npm steps to install react, d3, and create the basic app scaffolding, there is no Render() method in /src/App.js.
    B. After walking us through creating BarChart.js, the author does not explain how to reference BarChart.js from /src/App.js.

  7. a bit disappointing that you guys are still promoting the old class pattern in this article, don’t think that’s helping anyone at this point in time.

    1. This post was originally published several years ago, and we just updated it a few months back. We’ve added an editor’s note to clarify. Thanks for keeping us honest.

Leave a Reply