ACDLを提唱します。その16

概要

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

機能

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

写真

サンプルコード

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

var spec2 = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28}, 
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "D", "b": 91}, 
      {"a": "E", "b": 81}, 
      {"a": "F", "b": 53},
      {"a": "G", "b": 19}, 
      {"a": "H", "b": 87}, 
      {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "a", 
      "type": "nominal", 
      "axis": {"labelAngle": 0}
    },
    "y": {
      "field": "b", 
      "type": "quantitative"
    }
  }
};

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 bar chart with embedded data.",
   "width": 500,
   "data": {
    "values": items
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "category", 
      "type": "nominal", 
      "axis": {"labelAngle": 0}
    },
    "y": {
      "field": "value", 
      "type": "quantitative"
    }
  }
};
  vegaEmbed('#vis', spec).then(function(result) {
  }).catch(console.error);
}

成果物

以上