ACDLを提唱します。その15

概要

ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
アプリ作ったので、plunkerに上げてみた。

機能

CSVから円グラフを生成します。

写真

サンプルコード

var src = document.getElementById('src');

var spec2 = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data.",
  "data": {
    "values": [
      {"category": 1, "value": 4},
      {"category": 2, "value": 6},
      {"category": 3, "value": 10},
      {"category": 4, "value": 3},
      {"category": 5, "value": 7},
      {"category": 6, "value": 8}
    ]
  },
  "mark": "arc",
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  }
};

vegaEmbed('#vis', spec2).then(function(result) {
}).catch(console.error);

function run() {
  var line = src.value.split('\n');
  var items = [];
  for (var i = 0; i < line.length; i++)
  {
    var item = line[i].split(',');
    if (item[0] != "")
      items.push({"category": item[0], "value": item[1]});
  };
  var spec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "description": "A simple pie chart with embedded data.",
    "data": {
      "values": items
    },
    "mark": "arc",
    "encoding": {
      "theta": {"field": "value", "type": "quantitative"},
      "color": {"field": "category", "type": "nominal"}
    }
  };
  vegaEmbed('#vis', spec).then(function(result) {
  }).catch(console.error);
}

成果物

以上