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:

designing llm first products

Designing LLM-first products, not just features

Everyone’s building chat-first AI products. And most of them suck. Here’s how to break the mold and ship LLM-native software that actually solves problems.

Rosario De Chiara
May 30, 2025 ⋅ 4 min read
Build A React AI Image Generator With Hugging Face Diffusers

Build a React AI image generator with Hugging Face Diffusers

Build a React-based AI image generator app offline using the Hugging Face Diffusers library and Stable Diffusion XL.

Andrew Baisden
May 29, 2025 ⋅ 10 min read
Gemini 2.5 and the future of AI reasoning for frontend devs

Gemini 2.5 and the future of AI reasoning for frontend devs

Get up to speed on Google’s latest breakthrough with the Gemini 2.5 model and what it means for the future of frontend AI tools.

Chizaram Ken
May 29, 2025 ⋅ 5 min read
Exploring The Top Rust Web Frameworks

Exploring the top Rust web frameworks

In this article, we’ll explore the best Rust frameworks for web development, including Actix Web, Rocket, Axum, warp, Leptos, Cot, and Loco.

Abiodun Solomon
May 28, 2025 ⋅ 11 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