SINKCAPITAL
SINKCAPITAL
Comapny Blog
Nuxt上でのd3を利用した散布図の作成方法
techdataAnalytics

背景

 横断的にゲーミングPCを比較検討するサイトがないなと感じたことをきっかけに、散布図的にパソコンを比較検討できるサイトを作ろうと思ったのが始まりでした。 サイトのイメージやテーブル設計はスラスラと出来上がったもののjavascriptでクリック可能な散布図を作ろうと思った時に意外といいものが見つからず、最終的にたどり着いたのがd3.jsでした。 後々知ったのですがd3.jsは古くからあるライブラリでNuxtの利用事例はそこまで見当たらなかったですが、 githubのスターはとても多くとても優れたライブラリのようですね。
 今回はそんなd3を利用して散布図を書いてみる方法についてまとめてみようと思います。

完成物

ゲーミングサーチ
散布図

 サイト自体は細かい箇所を修正中(2021/10/29)なのですが、散布図自体は完成しいい感じにできています。

インストール

  1. npm install d3 --save
  2. build: { standalone: true, }nuxt.config.js に追記する
  3. import * as d3 from "d3"; 利用したいページやコンポーネントの中でimportする

※環境によって変わる可能性がありますが、手準2を行わないと色々とエラーが出てしまうので注意してください。

設計

DOM構成

 d3は

d3
  .select('#chart')
  .append('svg')
  .attr('wid...

といった形で、 DOM構成をjavascript上で追加していくことができるライブラリとなっています。 つまり散布図の場合は「グラフを書く」と言うよりも「グラフになるように点や線を指定箇所に置いていく」といった感覚に近いものを感じました。 (x軸・y軸はそれっぽい感じに描いてくれる関数があるので全ての位置を指定していくわけではないです)
DOM構成図
 ちなみにchart.jsなどを利用していた私にとってはこのDOMで作っていくイメージが掴めず結構苦労をしたので、 最初にd3のサンプルコードを読み込んでDOMをどのように作っていくかを学ぶのがお勧めかと思います。

クリックやマウスオーバー

d3がDOMを作りイベントやattributeを好きに追加できるため、 クリックイベントなどはほぼ自由になんでも加えることができる状況でした。 いくつか案はあったのですがひとまず以下のような機能を追加しました。

  • onclickイベントを各ポイントに追加(PCの詳細モーダルが表示される)
  • mouseoverイベントを各ポイントに追加(名前が濃く表示される)
  • 右下の会社ラベルにmouseoverイベントを追加(対象データだけが濃く出るようになっている)

三つ目は参考にしたサイトで使っていたのでそのまま入れた節はありますが、 基本的にグラフ上の情報はなるべく落として見やすさを向上させるために使っています

開発

DOM構成

 基本的には以下のような関数を繋げる形で構成を作っていきます。

関数説明
.selectDOMの特定要素を取得.select('#chart')
.append特定要素の中に要素を追加.append('svg')
.attr特定要素にattributionを追加.attr('width', 300)
.style特定要素にstyleを追加.style('fill', 'gray')
.on特定要素にclickイベントなどを追加.on('click', function (data, elem) { console.log('test') })

 例えば描写部分(DOM構成画像における真ん中のgまで)で言うと以下のように作ることができます。

d3
    .select('#chart')
    .append('svg')
    .attr('width', this.width + this.margin.left + this.margin.right)
    .attr('height', this.height + this.margin.top + this.margin.bottom)
    .append('g')
    .attr('transform', `translate(${this.margin.left},${this.margin.top})`)

クリックやマウスオーバー

 イベントの追加については上記の .on を利用することで好きな場所に入れることができます。 また attr を使うことでclass名などもついかできるため、 クラス名をつけた上でイベント内で以下のような関数を呼び出すことで色の濃さなどを変更することができます。

d3
    .select('.bubbles' + d.id).style('opacity', 1)

vueファイルの概要

<template>
  <div>
    <v-card flat>
      <v-card-title class="text-h6 font-weight-black pb-2"
        >マッピング</v-card-title
      >
      <v-card-text class="pa-0" align="center">
        <div id="chart"></div>
      </v-card-text>
      ...
    </v-card>
  </div>
<template>

<script>
import * as d3 from 'd3'

export default {
    ...
    mounted() {
        this.updateBubble(this.itemSets)
    },
    methods: {
        updateBubble(itemSets) {
            d3.selectAll('svg > *').remove()
            d3.selectAll('svg').remove()
            d3
                .select('#chart')
                .append('svg')
                .attr('width', this.width + this.margin.left + this.margin.right)
                .attr('height', this.height + this.margin.top + this.margin.bottom)
                .append('g')
                .attr('transform', `translate(${this.margin.left},${this.margin.top})`)
            ...
        },
    },
}
</script>

感想

 今回Nuxtjs上でクリックなどできる散布図を作成してみました。ライブラリによってできることできないことが様々かと思いますが、 d3.jsに関してはDOMの構成から行うため設計次第でなんでもできる非常に柔軟性の高いライブラリだと感じました。 「クリックできればいいか」程度に感じていたのですが色々できることがわかったので、

  • 散布図のドットを画像に変えてみる
  • フィルター条件で表示するドットを変える
  • ゲームの必要スペック等の閾値線を追加する

といったことを今後やっていきたいと思います。

参考リンク

アクセスログを可視化しGAのデータを直感的に理解できる型態にする試み(ネットワーク型)
櫻井 裕司
2021/09/05 櫻井 裕司
techdataAnalytics
ビジネスに活きる分析を進める上で弊社では「理解できる」ことを重要と考えており、特に直感的理解は可視化を進める上で特に重要だと考える内容の一つです。弊社では様々なお客様のデータ分析を進める上で常により示唆の大きい可視化を追求しており、今回はその中で最近試みているネットワーク側の可視化についてまとめたいと思います。
代表櫻井による特別講演会が白陵高等学校で開かれました
櫻井 裕司
2021/07/31 櫻井 裕司
eventpersonal
2021年の夏に兵庫県の私立白陵高等学校において、代表櫻井による特別講演会を開催いたしました。今振り返って高校の頃の自分に伝えたいことについてお話しました。
Nuxtで動的ページを随時追加する場合にNot Foundとなる
櫻井 裕司
2021/05/31 櫻井 裕司
tech
Nuxtで動的ページを登録する方法はありますが、登録後に随時コンテンツが追加される際はNot Foundとなってしまうので、そう言った際の対処方法について
GKEをやめてCloud Runを始めてみました
櫻井 裕司
2021/04/19 櫻井 裕司
tech
firebaseで構築したシステムの裏で動かすバッチの負荷が大きく、cloud functionsで終わらなかったためCloud Runを利用してみました。動作確認までの知見等を雑多にまとめてみました。
AWSをやめてfirebaseを使い始めて感じたメリットやデメリットとそれの対応策(LT登壇内容)
櫻井 裕司
2021/03/26 櫻井 裕司
techeventpersonal
みそかつウェブ・GDG Nagoya主催の「around firebase」とCloud Native Nagoya主演の「Cloud Native Nagoya」にてfirebaseのLTをさせていただきました。そこで会話させていただいたfirebaseを使い始めて感じたメリット・デメリットについてまとめています。
PWA+SPAのwebアプリ作成にnuxtjs+firebaseがめちゃ便利だった
櫻井 裕司
2021/01/16 櫻井 裕司
tech
PWA+SPAのwebアプリを作る際にnuxt.js+firebaseを合わせて利用すると便利だったので知見を書き留めています
s3のhostingでPWAを導入する方法
櫻井 裕司
2020/12/19 櫻井 裕司
tech
アプリ作成時にpwaが比較されることが多かったですが、実際にpwaを実装した経験がなかったため今回自社サイトをPWA化してみました。
dockerでseleniumを動かしてみる(chrome_headless)
櫻井 裕司
2020/12/06 櫻井 裕司
tech
seleniumの相談をいただくことが増えたため、seleniumの勉強もかねてdockerでの実行テストを行いました
THE DECKのイベントにお邪魔させていただきました
本林 秀和
2020/12/05 本林 秀和
eventpersonal
大学コンソーシアム大阪のイベント@The DECK にお邪魔してきました
flutter(dart)を触ってみた感想
櫻井 裕司
2020/11/18 櫻井 裕司
tech
android向けアプリへの対応も考慮してflutter(dart)を触ってみたので、感想をまとめておこうと思います。理解が深まっていく中で定期的にまとめていければと思います。
代表本林による特別講演会が滝高校で開かれました
本林 秀和
2020/11/07 本林 秀和
eventpersonal
2020年11月7日(土)愛知県の私立滝高校において、代表本林による特別講演会を開催いたしました。IT業界やデータサイエンスについてお話しました。
AWS・GCPを選ぶ際の観点
櫻井 裕司
2020/10/28 櫻井 裕司
tech
AWSかGCPを選ぶ際の観点について書き留めておこうと思います
CloudFormationとterraformの比較
櫻井 裕司
2020/10/04 櫻井 裕司
tech
AWS CloudFormationとterraformの両方を使ってみて感じた違いをまとめてみました。
iosのcallkit周りでできること
櫻井 裕司
2020/08/24 櫻井 裕司
tech
新規事業を検討する上でios(swift)の電話周りでできることを調査したため、調査結果をブログとして残しています。
【個人ブログ】CTOの株運用ブログ_順調な滑り出し
櫻井 裕司
2020/07/19 櫻井 裕司
personalstock
長年放置してた株に少し手を出してみました。自分なりに少し情報整理と分析と予想をしたので記事にしてみます。
総務省特定サービス産業実態調査のデータ分析
櫻井 裕司
2020/07/18 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。今回は「特定サービス産業実態調査」について見ていこうと思います。
「お絵かきつみ木バトル」をリリースしました
櫻井 裕司
2020/07/12 櫻井 裕司
techapp
タスク管理を二次元的に行うアプリ「お絵かきつみ木バトル」をリリースしました。SinkCapitalはデータコンサルですが、知見蓄積のため様々な媒体での実験的開発を行っています
総務省工業統計調査のデータ分析
櫻井 裕司
2020/07/11 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。今回は「工業統計調査」について見ていこうと思います。
【個人ブログ】CTOが個人的に株をはじめました
櫻井 裕司
2020/07/08 櫻井 裕司
personalstock
長年放置してた株に少し手を出してみました。自分なりに少し情報整理と分析と予想をしたので記事にしてみます。
総務省サービス産業動向調査のデータ分析
櫻井 裕司
2020/07/08 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。初回は「サービス産業動向調査」について見ていこうと思います。
タスク管理アプリ「タスククロス」をリリースしました
櫻井 裕司
2020/04/08 櫻井 裕司
techapp
タスク管理を二次元的に行うアプリ「タスククロス」をリリースしました。SinkCapitalはデータコンサルですが、知見蓄積のため様々な媒体での実験的開発を行っています
【terraform】gcpでcicd環境を構築する方法
櫻井 裕司
2020/01/04 櫻井 裕司
tech
企業サイトはAWSを利用しているのですが、要件によってはGCPの方が適している場合もあるため、GCPでのcicd構築も行いました。AWSと比較しつつ説明しているため是非ご参考にしてみてください。
【合格体験記】GCP_Cloud_Archtectに受かりました
櫻井 裕司
2019/12/23 櫻井 裕司
personalqualification
Google Professional Cloud Architectに合格したので、勉強法別のコスパをまとめてみました。
AWSでサブドメインなし(wwwなし)からサブドメインあり(wwwあり)へのリダイレクト設定
櫻井 裕司
2019/12/23 櫻井 裕司
tech
もともと企業サイトがサブドメインありで公開していたが、サブドメインなしでもエラーなく接続できるように設計。terraformで作成しているので是非ご参考ください。
マークダウンで記事を書けるようにしてみた
櫻井 裕司
2019/12/16 櫻井 裕司
tech
ホームページのブログをマークダウンを使用してかけるようにしました。gatsbyなどもありますが、今回はお手製cicd+pythonを使用してライトに作成しました。