# D3.jsでcsvファイルを読み込んでデータを可視化しよう！！

初めに

d3.js in nuxt.jsでirisデータのcsvファイルを読み込んでフロントエンド上で可視化します。

下の方にコードを載せているのでサンプルとしてお使いください。

可視化すると以下のようになります。

d3.jsはクラウド上にあるcsvファイルやjsonファイルを読み込んで可視化できるので便利ですよね

モジュールのバージョン

バージョン

nuxt.js:2.14.6
d3.js:6.2.0

コード

d3.jsのバージョンによってプログラムの書き方が異なるので気をつけてください。

<template>
  <div>
      <h1>D3.jsによるirisデータの可視化</h1>
      <div>
        <div id="iris" />
      </div>
  </div>
</template>

<script>
import * as d3 from 'd3'

export default {
  data() {
    return {
      datas: [],
    }
  },
  mounted() {
    this.tests()
  },
  methods: {
    tests() {
      // グラフの幅
      const width = 800
      // グラフの高さ
      const height = 600
      const margin = { top: 30, bottom: 60, right: 30, left: 60 }
      // グラフの色
      const color = d3
        .scaleOrdinal()
        .domain(['setosa', 'versicolor', 'virginica'])
        .range(['#440154ff', '#21908dff', '#fde725ff'])
      // 1. svgの作成
      const svgtest = d3
        .select('#iris')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .attr('cursor', 'grab')
        .attr('position', 'relative')
      // 2. csvファイルの読み込み
      d3.csv(
        'https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv'
      )
        .then((data) => {
          this.datas = data
          // 3. 軸スケールの設定
          const xScale = d3
            .scaleLinear()
            .domain([
              0,
              d3.max(this.datas, (d) => {
                return d.Sepal_Width
              }),
            ])
            .range([margin.left, width - margin.right])

          const yScale = d3
            .scaleLinear()
            .domain([
              0,
              d3.max(this.datas, (d) => {
                return d.Petal_Length
              }),
            ])
            .range([height - margin.bottom, margin.top])

          // 4. 軸の表示
          const axisx = d3.axisBottom(xScale).ticks(5)
          const axisy = d3.axisLeft(yScale).ticks(5)
          svgtest
            .append('g')
            .attr(
              'transform',
              'translate(' + 0 + ',' + (height - margin.bottom) + ')'
            )
            .call(axisx)
            .append('text')
            .attr('fill', 'black')
            .attr('x', (width - margin.left - margin.right) / 2 + margin.left)
            .attr('y', 35)
            .attr('text-anchor', 'middle')
            .attr('font-size', '10pt')
            .text('Sepal Length')

          svgtest
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + 0 + ')')
            .call(axisy)
            .append('text')
            .attr('fill', 'black')
            .attr('x', -(height - margin.top - margin.bottom) / 2 - margin.top)
            .attr('y', -35)
            .attr('transform', 'rotate(-90)')
            .attr('text-anchor', 'middle')
            .attr('font-size', '10pt')
            .text('Sepal Width')

          // 5.値の表示
          svgtest
            .append('g')
            .selectAll('circle')
            .data(this.datas)
            .enter()
            .append('circle')

            .attr('cx', (d) => {
              return xScale(d.Sepal_Width)
            })
            .attr('cy', (d) => {
              return yScale(d.Petal_Length)
            })
            .attr('r', 5)
            .style('fill', (d) => {
              return color(d.Species)
            })
        })
        .catch((error) => {
          console.log(error)
        })
      console.log(this.datas)
    },
  },
}
</script>
<style></style>

pythonのmatplotlibを使って可視化するのは簡単なのですが、フロントエンドで可視化するのは大変ですよね…