javascript - 使用HTML5 Canvas从本地csv到 “plot” 2d数组

我正在尝试使用浏览器在数据可视化中进行练习，以绘制本地文本文件的内容。
html和txt都是本地的，仅用于原型(prototype)设计/个人使用。

基本上，我想使用javascript来读取文件，如下所示:

0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0
0.0, 0.2, 0.3, 0.3, 0.3, 0.2, 0.0
0.0, 0.3, 0.5, 0.6, 0.5, 0.3, 0.0
0.0, 0.3, 0.6, 0.8, 0.6, 0.3, 0.0
0.0, 0.3, 0.5, 0.6, 0.5, 0.3, 0.0
0.0, 0.2, 0.3, 0.3, 0.3, 0.2, 0.0
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0

并渲染为彩色圆圈的正方形网格。 txt中的每个值都是对应圆的不透明度，如下所示(使用Python，Numpy，Cairo和PIL制作):

我是javascript和HTML5 Canvas的完整入门者，因此，我非常希望知道应该怎么做，使用哪些函数等方面的线索。

不需要给出完整的代码(但是那太好了!)，只需给出函数和概念的名称，这样我就可以查找教程，并通过一堆“Hello Worlds”或类似的东西组装我的科学怪人。

谢谢阅读!

最佳答案

TL; DR:http://bv.iriscouch.com/so/_design/ex/index.html和http://bv.iriscouch.com/so/_design/ex/separate-function.html

这是一个稍微冗长的答案，但我觉得我不久前就在您的脚上，并且会从以下一些指针中受益。由于您提到了这些Python库，因此我将以Python类比作为目标。还想提一提:我喜欢低级的东西，我喜欢示波器，C等，但是javascript的美丽，低级的核心是它的对象和功能-浏览器环境是一个丛林，我自此更快乐尽可能多地移交给jQuery和Underscore.js。

首先，关于csv格式，如果绝对需要，请使用d3.js库中的d3.csv之类的东西。 (实际上，将您从现在开始学习的所有数据虚拟化javascript视为从Mike Bostock的想象中尽可能多地进行复制的准备。)但是在Javascript中询问csv有点像在询问“我是亚洲的新手，在哪里？在四川买寿司最好的地方？”答:“你是in Sichuan!!!”。使用json。在Python的情况下，我只会做:

>>> f = open('sample.csv').readlines()
>>> rv = json.dumps([[float(i) for i in k.split(',')] for k in f])
>>> file_out.write(rv)

以下是您的操作方法:http://bv.iriscouch.com/so/_design/ex/index.html

您可以按照以下方法将其分解为核心功能，然后将其呈现在页面的 Canvas 上:http://bv.iriscouch.com/so/_design/ex/separate-function.html

(从理论上讲，尝试iriscouch.com，它是Internet上最酷的东西之一，也是一种熟悉Javascript的好方法。下面是示例。sudo pip install couchapp，couchapp generate ex，cp *.js *.html ex/_attachments，cd ex && couchapp push https://user:pass@youraccount.iriscouch.com/somename是我编写这些示例的方式，完全免费。Windows安装程序here。)

如果要以重新格式化的形式查看基础数据，则为here。

最后，您可以在http://aguacat.es上看到我的更多个人步骤

内联以上示例:

<!doctype html>

<html>
  <head>
    <script src="jquery.js"></script>
  </head>
  <body>
    <canvas id="circles" height="700" width="700"></canvas>
    <script>
      // $ is just a function. It makes dealing with the
      // browser itself less annoying. Call it with a
      // function as argument. The function has no
      // name, like a python lambda, and it will
      // request the json and process it.
      $(function () {
        var the_color = "rgba(0,0,255,alpha_token)";
        // ask for the json and register the following
        // function (second argument to getJSON) to be called
        // once it is delivered:
        $.getJSON('json_from_csv.json', function(data) {
          // no more jquery for now
          var canvas = document.getElementById("circles");
          // you declare these to avoid them being global variables:
          var h, w, column_width, column_height, x_pos, y_pos, radius;
          h = canvas.height;
          w = canvas.width;
          column_width = w / data[0].length;
          column_height = h / data.length;
          // we're working in 2 dimensions:
          var context = canvas.getContext('2d');
          radius = column_width / 2;
          data.forEach(function (row, row_index) {
            row.forEach(function (entry, column_index) {
              x_pos = column_index * column_width + radius;
              y_pos = row_index * column_height + radius;
              context.moveTo(x_pos, y_pos);
              context.beginPath();
              context.arc(x_pos, y_pos, radius, 0, Math.PI*2)
              context.fillStyle = the_color.replace(/alpha_token/, entry);
              context.strokeStyle = the_color.replace(/alpha_token/, entry);
              context.fill();
              context.stroke();
              context.closePath();
            });
          });
          });
        });
      </script>
    </body>

</html>

Ex

javascript - 使用HTML5 Canvas从本地csv到 “plot” 2d数组