D3.jsを用いてインタラクティブなデータビジュアライゼーションを作成

<script src="https://d3js.org/d3.v7.min.js"></script>

npm install d3

const data = [10, 20, 30, 40];
d3.select('body')
  .selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .style('width', d => `${d * 10}px`)
  .style('background-color', 'steelblue')
  .text(d => d);

const svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500);

svg.append('circle')
  .attr('cx', 250)
  .attr('cy', 250)
  .attr('r', 100)
  .style('fill', 'orange');

const scale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

console.log(scale(50)); // 250

const axis = d3.axisBottom(scale);

d3.select('svg')
  .append('g')
  .attr('transform', 'translate(0, 50)')
  .call(axis);

const data = [100, 200, 300, 400, 500];

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 60)
  .attr('y', d => 500 - d)
  .attr('width', 50)
  .attr('height', d => d)
  .style('fill', 'teal');

svg.selectAll('rect')
  .on('mouseover', function() {
    d3.select(this).style('fill', 'orange');
  })
  .on('mouseout', function() {
    d3.select(this).style('fill', 'teal');
  });

svg.selectAll('rect')
  .transition()
  .duration(1000)
  .attr('y', d => 500 - d / 2)
  .attr('height', d => d / 2);

const width = window.innerWidth;
const height = window.innerHeight;

const responsiveSvg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

responsiveSvg.append('circle')
  .attr('cx', width / 2)
  .attr('cy', height / 2)
  .attr('r', 50)
  .style('fill', 'blue');

d3.json('data.json').then(data => {
  console.log(data);
});