Create bar chart in react using D3.js library

 In this react tutorial we are learn about create barchart using d3 library

This syntax  is used to import the d3 function by importing the d3 library in your react application. 

import { select, axisBottom, axisRight, scaleLinear, scaleBand } from "d3";

This syntax is use to import react function in your application

import React, { useRef, useEffect, useState } from "react";

  

In this part we are place the value inside barchart

function App() {  const [data, setData] = useState([25, 30, 45, 60, 10, 65, 75]);  const svgRef = useRef();

In this syntax we use scaleBand() methode from d3 library to create scale. Fro x and y axis

// scales    const xScale = scaleBand()      .domain(data.map((value, index) => index))      .range([0, 300])      .padding(0.5);

This syntax is used to scale y axis

const yScale = scaleLinear().domain([0, 150]).range([150, 0]);

In this syntax we use scaleLinear() methode from d3 which is used for virtual scale points. Also use .range methode to change the color after update value hit particular value in this case color change into the orange after the bar value is hit the range of 100 and then after it convert into the red color after 150  

const colorScale = scaleLinear()      .domain([75, 100, 150])      .range(["green", "orange", "red"])      .clamp(true

In thes syntax we are use axisBottom() methode to create bottom axis that is x axis and axisRight() methode to create right scale or y axis 

// create x-axis    const xAxis = axisBottom(xScale).ticks(data.length);    svg.select(".x-axis").style("transform", "translateY(150px)").call(xAxis);      // create y-axis    const yAxis = axisRight(yScale);    svg.select(".y-axis").style("transform", "translateX(300px)").call(yAxis);

This syntax is use various d3 methode to create bar styling the bar and also put event on it like whenever mouse cursor hit any bar inside the graph automatically show the value of that particular bar in above on it, amd also add color scale or whenever we update the bar value, after particular value change the bar color   

// draw the bars    svg      .selectAll(".bar")      .data(data)      .join("rect")      .attr("class", "bar")      .style("transform", "scale(1, -1)")      .attr("x", (value, index) => xScale(index))      .attr("y", -150)      .attr("width", xScale.bandwidth())      .on("mouseenter", (event, value) => {        const index = svg.selectAll(".bar").nodes().indexOf(event.target);        svg          .selectAll(".tooltip")          .data([value])          .join((enter) => enter.append("text").attr("y", yScale(value) - 4))          .attr("class", "tooltip")          .text(value)          .attr("x", xScale(index) + xScale.bandwidth() / 2)          .attr("text-anchor", "middle")          .transition()          .attr("y", yScale(value) - 8)          .attr("opacity", 1);      })      .on("mouseleave", () => svg.select(".tooltip").remove())      .transition()      .attr("fill", colorScale)      .attr("height", (value) => 150 - yScale(value));  }, [data]);

At the last we are render or graph on to the page by using this below syntax

return (    <React.Fragment>      <svg ref={svgRef}>        <g className="x-axis" />        <g className="y-axis" />      </svg>

In this case we are adding some action like update , filter and add data on are bar graph

<button onClick={() => setData(data.map((value) => value + 5))}>        Update data      </button>      <button onClick={() => setData(data.filter((value) => value < 35))}>        Filter data      </button>      <button        onClick={() => setData([...data, Math.round(Math.random() * 100)])}      >        Add data      </button>

output:

code link