A visualization toolkit coordinating with Sushi and Tempura
Soba is a 2D plotting library integrated with Sushi (https://github.com/mil-tokyo/sushi) written in javascript. This library is easy to use, can work in web browsers and coordinate with Sushi and Tempura(https://github.com/mil-tokyo/tempura).
Please visit Tempura demo page(http://mil-tokyo.github.io/tempura/demo/index.html) to see figures drawn by this library.
Related papers are available ( http://mil-tokyo.github.io/miljs.html ).
#Introduction
Soba Javascript Library is a javascript 2D plotting library which is designed to draw high quality figures for scientific computation easily as in matplotlib (http://matplotlib.org/). Soba Javascript Library is written in javascript so that it can work on web browsers in any environment and can coordinate with Sushi (https://github.com/mil-tokyo/sushi) and Tempura (https://github.com/mil-tokyo/tempura).
#How to use
On a console, type
git clone git@github.com:mil-tokyo/soba.git
or simply download the file from https://github.com/mil-tokyo/soba/archive/master.zip
src/soba.js and src/soba.css are core files.
Soba works with HTML in web browsers and depends on d3.js (http://d3js.org/). Please include d3.js and Soba codes in your HTML file as following:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="soba.js"></script>
<link rel="stylesheet" href="soba.css">Soba draws a figure as a SVG object in a DOM object. For example, Soba creates and initializes a SVG object in a DOM object whose id is "figure1" by the following code:
var plt = new Soba('#figure1');Soba uses d3.js to handle SVG objects.
Now, let's draw graphs! For example, plot() plots continuous points and connects those points by line if a specific option is given like this:
plt.plot(x,y,options);
plt.show();Here, variables x and y represent the locations of the points and the styles of the points and the line can be controlled by options as a string.
Here, the whole code is shown to plot one sine curve.
http://mil-tokyo.github.io/soba/examples/simple.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Soba sample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../src/soba.js"></script>
<link rel="stylesheet" href="../src/soba.css">
</head>
<body>
<div id="sine-curve" style="width: 640px; height: 480px;"></div>
<script>
// Sine data
var x_min=-3, x_max=3, nbins = 60;
var x = new Array(nbins), y = new Array(nbins);
for (var i=0 ; i<nbins ; i++) {
x[i] = x_min + i*(x_max-x_min)/(nbins-1);
y[i] = Math.sin(x[i]);
}
// plot
var plt = new Soba('#sine-curve');
plt.plot(x,y,'b:');
plt.show();
</script>
</body>
</html>Soba can work with Sushi Javascript Library (https://github.com/mil-tokyo/sushi) which offers fast matrix calculation in javascript. Sushi's matrix class Sushi.Matrix can be passed to Soba's methods. For example, the sample code above can be written as following by using Sushi.Matrix:
http://mil-tokyo.github.io/soba/examples/simple_sushi.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Soba sample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../sushi/src/sushi.js"></script> <!-- Include sushi.js -->
<script src="../src/soba.js"></script>
<link rel="stylesheet" href="../src/soba.css">
</head>
<body>
<div id="sine-curve" style="width: 640px; height: 480px;"></div>
<script>
// Sine data by Sushi.Matrix
var x_min=-3, x_max=3, nbins = 60;
var x = new Sushi.Matrix(nbins, 1);
x.setEach(function(i){
return x_min + i*(x_max-x_min)/(nbins-1);
});
var y = x.clone();
y.map(function(d){
return Math.sin(d);
});
// plot
var plt = new Soba('#sine-curve');
plt.plot(x,y,'b:');
plt.show();
</script>
</body>
</html>The plotting code is unchanged while the data passed to plot() method are changed to instances of Sushi.Matrix (and sushi.js is included).
Please see the documents here. You can get more detailed information such as method references.