サマリと明細の構造を表現したデータを作ってみよう～faker.jsとtidyjsとd3を添えて～

こんにちは。nap5です。

サマリと明細の構造を表現したデータを作ってみましたので、紹介したいと思います。

テストデータを作成するに当たり、以下のライブラリを使っています。

tidy.js

Tidy up your data with JavaScript, inspired by dplyr and the tidyverse from R.

pbeshai.github.io

外部サイト

https://pbeshai.github.io/tidy/

Faker | Faker

Generate massive amounts of fake (but reasonable) data for testing and development.

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada: - Home · d3/d3 Wiki

GitHub

外部サイト

https://github.com/d3/d3/wiki

個別に以下のobservablehqの記事も参考になります。

tidy.js - groupBy: summarize while keeping reference to items

Sometimes when summarizing a collection of items, it's useful to keep a reference to the original items. This can be accomplished via \`summarize\` with an identity summarizer: \`items => items\`. For example, we can go from this input: \`\`\`json { "group": "a", "name": "n0", "value": 5 }, { "group": "a", "name": "n1", "value": 10 }, { "group": "b", "name&am...

Observable

外部サイト

https://observablehq.com/@pbeshai/tidy-js-groupby-summarize-while-keeping-reference-to-items?collection=@pbeshai/tidy-js

デモコードの抜粋です。グルーピングしたあとにentriesに持ち替えてキーバリューにそれぞれ案分することで、セレクトボックスなどのコンポーネントの引数に渡すことができます。最後にreduceでサマリあげています。

const {keys, values} = tidy(
  d3.range(30),
  map((n) => {
    faker.seed(n);
    return {
      productMaterial: faker.commerce.productMaterial(),
      productName: faker.commerce.productName(),
      price: Number(faker.commerce.price()),
    };
  }),
  groupBy(
    'productMaterial',
    summarize({
      total: sum('price'),
      count: n('price'),
      max: max('price'),
      min: min('price'),
      items: (items) => {
        return items;
      },
    }),
    groupBy.entries()
  )
).reduce(
  (acc, [key, value]) => {
    acc.keys.push(key);
    acc.values.push(...value);
    return acc;
  },
  {keys: [], values: []}
);

console.log(keys, values);

デモサイトです。