Home/ Questions/Q 6927333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:02:25+00:00

I am trying to do an exercise in data visualization using the browser to

  • 0

I am trying to do an exercise in data visualization using the browser to plot the contents of a local text file.
Both the html and the txt are local, and it is for prototyping/personal-use only.

Basically, I would want to use, say, javascript, to read a file just like this:

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

and render as a square grid of colored circles. Each value from the txt would be the opacity of the correspondent circle, like this (made using Python, Numpy, Cairo and PIL):

enter image description here

I am a complete beginner on javascript and HTML5 Canvas, so I would appreciate very much a clue so as to what I should do, which functions to use, etc.

There’s no need to give complete code (but it would be nice!), just the name of the functions and concepts, so that I can look for tutorials and assemble my Frankenstein from a bunch of “Hello Worlds”, or anything like that.

Thanks for reading!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    This is a slightly verbose answer but I feel like I was in your shoes not too long ago, and would have benefitted from some of the below pointers. I will target it with Python analogies since you mentioned those Python libraries. Also feel like mentioning: I like low-level stuff, I love oscilloscopes, C, etc., but the beautiful, lower-level heart of javascript is its objects and functions — the browser environment is a jungle and I am much happier since handing off as much as possible to jQuery and Underscore.js.

    First, regarding csv format, if it’s an absolute requirement use something like d3.csv from the d3.js library. (In fact, regard all data vizualization javascript you learn from now forward as preparation for copying as much as possible from the imagination of Mike Bostock.) But asking about csv in Javascript is a bit like asking “I’m new to Asia, where is the best place to get sushi in Sichuan?” Answer: “You’re in Sichuan!!!“. Use json. In python in your case I would just do:

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

    Here is how you do it in one piece: http://bv.iriscouch.com/so/_design/ex/index.html

    Here is how you might break it up into the core function that then gets rendered on the page’s canvas: http://bv.iriscouch.com/so/_design/ex/separate-function.html

    (Parenthetically, try iriscouch.com, it is one of the coolest things on the internet, and a good way to get familiar with Javascript. The below examples are there. sudo pip install couchapp, couchapp generate ex, cp *.js *.html ex/_attachments, cd ex && couchapp push https://user:pass@youraccount.iriscouch.com/somename is how I put up these examples, totally free. Windows installer here.)

    If you want to look at the underlying data as reformatted, that’s here.

    Finally, you can see more of my personal babysteps in this stuff at http://aguacat.es

    Inline of above example:

    <!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>
    • 0