JSFiddle - React, Tailwind, and code Playground

by Matsunaga_Ajike

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <h1>散布図グラフ</h1>
      <p>ドットにマウスオンするとデータが表示されます。</p>
  </body>
</html>

SCSS

$blue-color: #00BCD4;
$font-color: #ffffff;

h1 {
    background-color: $blue-color;
    padding: 10px;
    padding-left: 12px;
    color: #ffffff;
}

.tooltip {
    position: absolute;
    text-align: center;
    width: auto;
    height: auto;
    padding: 5px 20px;
    background: $blue-color;
    color: $font-color;
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    visibility: hidden;
}

JavaScript

/**
 * データ
 * [X軸, Y軸]
 */
var dataset = [
    [1, 26],
    [2, 33],
    [3, 100],
    [4, 51],
    [5, 36],
    [6, 11],
    [7, 45],
    [8, 91],
    [9, 67],
    [10, 46],
    [11, 77],
    [12, 89]
];


/**
 * 描画サイズ
 */
var width         = 540;
var height        = 300;
var padding       = 30;
var duration      = 100;
var tooltipMvTop  = 15;
var tooltipMvLeft = 20;

/**
 * SVG宣言
 */
var svg = d3.select('body')
          .append('svg')
          .attr('width', width)
          .attr('height', height);

/**
 * ツールチップ
 */
var tooltip = d3.select('body')
              .append('div')
              .attr('class', 'tooltip');

/**
 * xScale/yScale : 目盛り
 * domain        : 実際の値の範囲
 * range         : 画面上のpxの範囲
 * axis          : 座標軸
 */
// X座標軸の作成
var xScale = d3.scaleLinear()
            .domain([0, d3.max(dataset, function(d){return d[0];})])
            .range([padding, width - padding]);


/**
 * Y座標軸の作成
 */
var yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset, function(d){return d[1];})])
            .range([height - padding, padding]);

var axisx = d3.axisBottom(xScale); // X軸と目盛りと縦線
var axisy = d3.axisLeft(yScale);   // Y軸と目盛りと縦線


/**
 * 描画位置の調整
 */
svg.append('g')
    .attr('transform', 'translate(0,' + (height - padding) + ')') // X軸の描画位置の調整
    .call(axisx);

svg.append('g')
    .attr('transform', 'translate(' + padding + ', 0)') // Y軸の描画位置の調整
    .call(axisy);

svg.append('g')
    .selectAll('circle')
    .data(dataset)
    .enter()
    .append('circle').attr('cx', function(d) {
        return xScale(d[0]);
	})
    .attr('cy', function(d) {
        return yScale(d[1]);
    })
    .on('mouseover', function(d) { // マウスオン
        tooltip
        .style('visibility', 'visible')
        .html(d[0] + '月 : ' + d[1] + '点')
    	
        d3.select(this)
        .transition()
        .duration(duration) // 色変更の速度
        .attr('fill', '#ffffff') // 円の色
        .attr('stroke', '#ff7800');// 円の縁の色
     })
    .on('mousemove', function(d) { //...