2022-12-14
2264
#react
Nosa Obaseki
298
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:

the silent shift to vite

The silent shift to Vite: What it means for your stack

Learn how Vite surpassed Webpack as the default JavaScript bundler, and what this shift means for your stack and the future of JS build tools.

Elijah Asaolu
Sep 2, 2025 ⋅ 5 min read
What happens when dev communities die Stack Overflow’s slow collapse

What happens when dev communities die: Stack Overflow’s slow collapse

Explore how Stack Overflow’s slow collapse affects programming and the possible future for Stack Overflow vs. generative AI competition.

Shalitha Suranga
Aug 29, 2025 ⋅ 10 min read
How to build a multimodal AI app with voice and vision in Next.js

How to build a multimodal AI app with voice and vision in Next.js

Learn how to build multimodal AI interactions to process images, audio, and even real-time video streams, using Next.js and Gemini.

Elijah Asaolu
Aug 29, 2025 ⋅ 6 min read
i tried kiro and here is what i learned

I tried out Kiro: Here’s what I learned

Check out Kiro, AWS’s AI-powered IDE, see what makes it different from other AI coding tools, and explore whether it lives up to the hype.

Elijah Asaolu
Aug 28, 2025 ⋅ 5 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() {
    this.drawChart();
    }

    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;

    svg.selectAll(“rect”)
    .data(data)
    .enter()
    .append(“rect”)
    .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”);

    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)

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

    render(){
    return
    }

    }

    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