Basic Stacking

Posted on 2024/08/16, 10:27 AM By admin22

データビジュアライゼーションの一つ方法として、また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' },
      ]}
    />
  );
}

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();

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>

</React.StrictMode>

);

reportWebVitals();

実行画面（localhost:3000)

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

https://d3js.org/d3-shape

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

Word Cloud / D3.js

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

About admin22

Categories: 未分類タグ: D3.js

About admin22

Recent Posts

Tag

Links

Archive