ReactとD3.jsで作るインタラクティブなデータビジュアライゼーション

npm install react d3

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

const BarChart = ({ data }) => {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current)
      .attr('width', 500)
      .attr('height', 500);

    svg.selectAll('*').remove(); // 清掃

    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
    const width = 500 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;

    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([0, width])
      .padding(0.1);

    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height, 0]);

    svg.append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`)
      .selectAll('.bar')
      .data(data)
      .enter().append('rect')
      .attr('class', 'bar')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('width', x.bandwidth())
      .attr('height', d => height - y(d.value));
  }, [data]);

  return <svg ref={svgRef}></svg>;
};

export default BarChart;

svg.selectAll('.bar')
  .on('click', function(event, d) {
    console.log('Clicked on: ', d);
  });

svg.selectAll('.bar')
  .transition()
  .duration(1000)
  .attr('height', d => height - y(d.value));

import React, { useState, useEffect } from 'react';

const DynamicBarChart = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(fetchedData => setData(fetchedData));
  }, []);

  return <BarChart data={data} />;
};

const width = window.innerWidth - margin.left - margin.right;
const height = window.innerHeight - margin.top - margin.bottom;

svg.append('g')
  .attr('transform', `translate(0,${height})`)
  .call(d3.axisBottom(x));

svg.append('g')
  .call(d3.axisLeft(y));

const tooltip = d3.select('body').append('div')
  .attr('class', 'tooltip')
  .style('position', 'absolute')
  .style('visibility', 'hidden');

svg.selectAll('.bar')
  .on('mouseover', function(event, d) {
    tooltip.style('visibility', 'visible')
      .text(d.value);
  })
  .on('mousemove', function(event) {
    tooltip.style('top', (event.pageY + 5) + 'px')
      .style('left', (event.pageX + 5) + 'px');
  })
  .on('mouseout', function() {
    tooltip.style('visibility', 'hidden');
  });

const filterData = (filter) => {
  const filteredData = data.filter(d => d.value > filter);
  setData(filteredData);
};

const pie = d3.pie()
  .value(d => d.value);

const arc = d3.arc()
  .innerRadius(0)
  .outerRadius(100);

const arcs = svg.selectAll('.arc')
  .data(pie(data))
  .enter().append('g')
  .attr('class', 'arc')
  .attr('transform', `translate(${width / 2},${height / 2})`);

arcs.append('path')
  .attr('d', arc)
  .style('fill', (d, i) => d3.schemeCategory10[i])
  .transition()
  .duration(1000)
  .attrTween('d', arcTween);