D3.js React Tutorial

D3.js React Code Example

In this example, we will demonstrate how to use D3.js, a powerful data visualization library, within a React application to create a simple bar chart. We'll use SVG to draw our chart. This example assumes you have a basic understanding of React and D3.js.

Setting Up

First, ensure you have a React environment set up. You also need to install D3.js in your project:

npm install d3


Creating a BarChart Component

We will create a BarChart component that takes data as a prop and renders a bar chart.

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const BarChart = ({ data }) => {
 const d3Container = useRef(null);

 useEffect(() => {
   if (data && d3Container.current) {
     const svg = d3.select(d3Container.current);
     const margin = { top: 20, right: 20, bottom: 30, left: 40 };
     const width = +svg.attr('width') - margin.left - margin.right;
     const height = +svg.attr('height') - margin.top - margin.bottom;
     const g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

     const x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
     const y = d3.scaleLinear().rangeRound([height, 0]);

     x.domain(data.map((d) => d.letter));
     y.domain([0, d3.max(data, (d) => d.frequency)]);

     g.append('g')
       .attr('class', 'axis axis--x')
       .attr('transform', 'translate(0,' + height + ')')
       .call(d3.axisBottom(x));

     g.append('g')
       .attr('class', 'axis axis--y')
       .call(d3.axisLeft(y).ticks(10, '%'))
       .append('text')
       .attr('transform', 'rotate(-90)')
       .attr('y', 6)
       .attr('dy', '0.71em')
       .attr('text-anchor', 'end')
       .text('Frequency');

     g.selectAll('.bar')
       .data(data)
       .enter().append('rect')
       .attr('class', 'bar')
       .attr('x', (d) => x(d.letter))
       .attr('y', (d) => y(d.frequency))
       .attr('width', x.bandwidth())
       .attr('height', (d) => height - y(d.frequency));
   }
 }, [data]); // Redraw chart if data changes

 return (
   <svg
     ref={d3Container}
     width={600}
     height={400}
   />
 );
};

export default BarChart;


Using the BarChart Component

To use the BarChart component, simply pass in the data you wish to visualize when invoking the component in your application.

import React from 'react';
import ReactDOM from 'react-dom';
import BarChart from './BarChart';

const data = [
 { letter: 'A', frequency: 0.08167 },
 { letter: 'B', frequency: 0.01492 },
 // Add more data as needed
];

ReactDOM.render(
 <BarChart data={data} />,
 document.getElementById('root')
);


And there you have it, a simple way to integrate D3.js with React to create dynamic data visualizations.