D3.js – DECODE https://decode.red/blog data decode, decoder or decoded ... design of code Mon, 15 Dec 2025 06:15:00 +0000 ja hourly 1 https://wordpress.org/?v=4.7.29 Basic Stacking ../../../202408161803/ Fri, 16 Aug 2024 01:27:44 +0000 ../../../?p=1803 データビジュアライゼーションの一つ方法として、またMUI-X/React のモジュールとして、興味があったので試してみました。

参考）　https://mui.com/x/react-charts/stacking/

環境）　node v20.15.0 / Mac(arm)

インストール)

npx create-react-app samp01
cd samp01
npm install @mui/material @emotion/react @emotion/styled
npm i @mui/x-charts
npm start

コードはcsvファイルから読み込むことを想定しました。（ほとんど参考サイトと同じ）

Basic Stacking.js

import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';

const csv = "\
2.1, 3.5, 1.3, 4.4, 5.9\n\
3.1, 1.2, 4.8, 2.5, 1.8\n\
3.2, 2.6, 4.3, 5.1, 1.1\n\
"

const data = csv.split("\n").map((v)=>(v.split(",")).map((vv)=>(parseFloat(vv))))
console.log(data)
const seriesA = {
  data: data[0],
  label: 'Series A',
};
const seriesB = {
  data: data[1],
  label: 'Series B',
};
const seriesC = {
  data: data[2],
  label: 'Series C',
};
export default function BasicStacking() {
  return (
    <BarChart
      width={600}
      height={300}
      series={[
        { ...seriesA, stack: 'total' },
        { ...seriesB, stack: 'total' },
        { ...seriesC, stack: 'total' },
      ]}
    />
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import BasicStacking from './BasicStacking';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BasicStacking />
  </React.StrictMode>
);

reportWebVitals();

実行画面（localhost:3000)

参考ページにはD3をベースにしているという気になる記述がありました。

https://d3js.org/d3-shape

d3-shapeを使っているようです。
d3については以前も取り上げました。

Word Cloud / D3.js

とても効率がいい記述ができるため好みです。長く使われていることに、安心感を感じました。

]]> Word Cloud / D3.js ../../../20150830399/ Sun, 30 Aug 2015 10:36:15 +0000 ../../../?p=399 前回のword2vecで利用したテキストファイルをD3.jsのワードクラウドを使って、可視化してみました。
D3.jsについては、以前下記ブログで扱ったことがありますが、ワードクラウドは初めて使います。
D3.js from Excel http://crossframe.iiv.jp/20131214667/
jQueryPlot from Excel http://crossframe.iiv.jp/20131207651/

text8のファイルは大きすぎるので、先頭約300kを切り出して使いました。(処理的にこのくらいが限界)
word_cloud01

d3-cloudのサイトのサンプルを元に、ローカルファイルを読み込んで実行できるようにしました。

<html>
<meta charset="utf-8">
<body>
<input type="file" id="read_file">
<script src="d3/d3.js"></script>
<script src="../d3.layout.cloud.js"></script>
<script>
var file = document.querySelector('#read_file');

file.onchange = function (){
	var fileList = file.files;
	var reader = new FileReader();
	reader.readAsText(fileList[0]);

	reader.onload = function  () {
		var res = reader.result;
		r = res.split(' ');
		h = {};
		for(i=0;i<r.length;i++){
			if(h&#91;r&#91;i&#93;&#93; == undefined){
				h&#91;r&#91;i&#93;&#93; = 0;
			}
			h&#91;r&#91;i&#93;&#93; = h&#91;r&#91;i&#93;&#93; + 1;
		}
		
		arr = &#91;&#93;;
		max = 0;
		kx = "";
		for(var k in h){
			if(h&#91;k&#93; > 1){
				arr.push([k, h[k]]);
			}
			if(h[k] > max){
				max =h[k];
				kx = k;
			}
		}
		(function() {
			var fill = d3.scale.category20();
			var layout = d3.layout.cloud()
				.size([800, 500])
				.words(arr.map(function(v){
					return {text: v[0], size: Math.sqrt(v[1] / max) * 100};
				}))
				.padding(5)
				.rotate(function() { return ~~(Math.random() * 2) * 90; })
				.font("Impact")
				.fontSize(function(d) { return d.size; })
				.on("end", draw);

			layout.start();

			function draw(words) {
				d3.select("body").append("svg")
					.attr("width", layout.size()[0])
					.attr("height", layout.size()[1])
					.append("g")
					.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
					.selectAll("text")
					.data(words)
					.enter().append("text")
					.style("font-size", function(d) { return d.size + "px"; })
					.style("font-family", "Impact")
					.style("fill", function(d, i) { return fill(i); })
					.attr("text-anchor", "middle")
					.attr("transform", function(d) {
					return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
				})
				.text(function(d) { return d.text; });
			}
		})();
	}
};
</script>
</body>
</html>

ローカルで使うツールとして、どの単語がよく使われているかを、直感的に知るために作ってみました。しかしサイズが大きいファイルではちょっと難しそうです。

参考: https://github.com/jasondavies/d3-cloud/tree/master/examples

]]>