Datamate.js
プログラミング初心者のための
データビジュアライゼーションサポートライブラリ
ダウンロードと設定
ダウンロード
Datamate.jsを読み込む
<script src="Datamate.js"></script>使ってみる（１つのデータ）
1. データをつくる ( Datamate.make()を使う )
function setup()
{
Datamate.make('Date', ['2021/1','2021/2','2021/3','2021/4','2021/5','2021/6','2021/7','2021/8','2021/9','2021/10','2021/11','2021/12']);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
}
2. データを確認する RUN ( Datamate.plot()を使う )
function setup()
{
Datamate.make("日付", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.plot(); // データを表示
}
3. データをグラフィックに反映させる RUN ( Datamate.value()を使う )
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make('日付', ['2021/1','2021/2','2021/3','2021/4','2021/5','2021/6','2021/7','2021/8','2021/9','2021/10','2021/11','2021/12']);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
}
function draw()
{
background(255);
const date = Datamate.value('日付', 0); // 0番目の値をとりだす。
const value = Datamate.value('京都の降水量', 0); // 0番目の値をとりだす。
circle(mouseX, mouseY, value);
text('京都の降水量\n' + date + '\n' + value.toFixed(2), mouseX, mouseY);
}
4. データを時間で切り換える RUN ( Datamate.current()を使う )
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make('日付', ['2021/1','2021/2','2021/3','2021/4','2021/5','2021/6','2021/7','2021/8','2021/9','2021/10','2021/11','2021/12']);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.play(1.0);
}
function draw()
{
background(255);
const date = Datamate.current('日付'); // 現在の値をとりだす。
const value = Datamate.current('京都の降水量'); // 現在の値をとりだす。
circle(mouseX, mouseY, value);
text('京都の降水量\n' + date + '\n' + value, mouseX, mouseY);
}
5. 自分で工夫する
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make('日付', ['2021/1','2021/2','2021/3','2021/4','2021/5','2021/6','2021/7','2021/8','2021/9','2021/10','2021/11','2021/12']);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.play(1.0);
}
function draw()
{
// ここを自分で工夫してみる //
//background(255);
//const date = Datamate.current('日付'); // 現在の値をとりだす。
//const value = Datamate.current('京都の降水量'); // 現在の値をとりだす。
//circle(mouseX, mouseY, value);
//text('京都の降水量\n' + date + '\n' + value, mouseX, mouseY);
}
使ってみる（複数のデータ）
1. データをつくる
function setup()
{
Datamate.make("日付", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
}
2. データを確認する RUN
function setup()
{
Datamate.make("日付", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.plot(); // データを表示
}
3. データをグラフィックに反映させる RUN ( Datamate.makeArea(), Datamate.bindAreas(), Datamate.aera()を使う )
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make("日付", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.makeArea(0, 0, width, height, 3, 2); // キャンバス内を3列x２行に分割してエリア作成 //
Datamate.bindAreas([1,2,3,4,5,6]); // データ番号１－６（札幌ー那覇）をエリアに自動割り当て
}
function draw()
{
background(255);
drawData(1); // データ１（札幌）を描画
drawData(2); // データ２（東京）を描画
drawData(3); // データ３（名古屋）を描画
drawData(4); // データ４（京都）を描画
drawData(5); // データ５（福岡）を描画
drawData(6); // データ６（那覇）を描画
}
function drawData(_index)
{
const area = Datamate.area(_index); // 割り当てられたエリアをとりだす
const name = area.name; // データのヘッダ名をとりだす
const date = Datamate.value('日付', 0); // 0番目の値をとりだす。
const value = Datamate.value(name, 0); // 0番目の値をとりだす。
rect(area.left, area.top, area.width, area.height); // エリアの矩形を描画
circle(area.centerX, area.centerY, value);
text(name + '\n' + date + '\n' + value.toFixed(2), area.centerX, area.centerY);
}
4. データを時間で切り換える RUN
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make("日付", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.makeArea(0, 0, width, height, 3, 2); // キャンバス内を3列x２行に分割してエリア作成 //
Datamate.bindAreas([1,2,3,4,5,6]); // データ番号１－６（札幌ー那覇）をエリアに自動割り当て
Datamate.play(1.0);
}
function draw()
{
background(255);
drawData(1); // データ１（札幌）を描画
drawData(2); // データ２（東京）を描画
drawData(3); // データ３（名古屋）を描画
drawData(4); // データ４（京都）を描画
drawData(5); // データ５（福岡）を描画
drawData(6); // データ６（那覇）を描画
}
function drawData(_index)
{
const area = Datamate.area(_index); // 割り当てられたエリアをとりだす
const name = area.name; // データのヘッダ名をとりだす
const date = Datamate.current('日付'); // 現在の値をとりだす。
const value = Datamate.current(name); // 現在の値をとりだす。
rect(area.left, area.top, area.width, area.height); // エリアの矩形を描画
circle(area.centerX, area.centerY, value);
text(name + '\n' + date + '\n' + value.toFixed(2) + "mm", area.centerX, area.centerY);
}
5. 自分で工夫する
setup()とdraw()は定型です。drawData()の中で描画を工夫します。
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make("日付", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.makeArea(0, 0, width, height, 3, 2); // キャンバス内を3列x２行に分割してエリア作成 //
Datamate.bindAreas([1,2,3,4,5,6]); // データ番号１－６（札幌ー那覇）をエリアに自動割り当て
Datamate.play(1.0);
}
function draw()
{
background(255);
drawData(1); // データ１（札幌）を描画
drawData(2); // データ２（東京）を描画
drawData(3); // データ３（名古屋）を描画
drawData(4); // データ４（京都）を描画
drawData(5); // データ５（福岡）を描画
drawData(6); // データ６（那覇）を描画
}
function drawData(_index)
{
// ここを自分で工夫してみる //
//const area = Datamate.area(_index); // 割り当てられたエリアをとりだす
//const date = Datamate.current('日付'); // 現在の値をとりだす。
//const value = Datamate.current(name); // 現在の値をとりだす。
//rect(area.left, area.top, area.width, area.height); // エリアの矩形を描画
//circle(area.centerX, area.centerY, value);
//text(name + '\n' + date + '\n' + value.toFixed(2) + "mm", area.centerX, area.centerY);
}
描画を工夫する
描画を工夫する１ RUN
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make("Date", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.makeArea(0, 0, width, height, 6, 1); // ウィンドウのサイズを6列x1行に分割してエリア作成 //
Datamate.bindAreas([1,2,3,4,5,6]); // データ番号１－６（札幌ー那覇）をエリアに自動割り当て
Datamate.play(1.0);
}
function draw()
{
background(255);
drawData(1);
drawData(2);
drawData(3);
drawData(4);
drawData(5);
drawData(6);
}
function drawData(_index)
{
const area = Datamate.area(_index);
const name = area.name;
const date = Datamate.current("Date");
const value = Datamate.current(name, false);
const size = Datamate.current(name, true, 10, area.width);
stroke(0);
strokeWeight(1);
noFill();
rect(area.left, area.top, area.width, area.height);
noStroke();
fill(0,200);
circle(area.centerX, area.centerY, size);
text(name + "\n" + date + "\n" + value + "mm", area.left + 50, area.top + 70);
}
描画を工夫する２ RUN
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make("Date", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.makeArea(0, 0, width, height, 1, 6); // ウィンドウのサイズを1列x6行に分割してエリア作成 //
Datamate.bindAreas([1,2,3,4,5,6]); // データ番号１－６（札幌ー那覇）をエリアに自動割り当て
Datamate.play(1.0);
}
function draw()
{
background(255);
drawData(1);
drawData(2);
drawData(3);
drawData(4);
drawData(5);
drawData(6);
}
function drawData(_index)
{
const area = Datamate.area(_index);
const date = Datamate.current("Date");
const value = Datamate.current(name, false);
const count = Datamate.current(name, false, 1, 100);
stroke(0);
strokeWeight(1);
noFill();
rect(area.left, area.top, area.width, area.height);
for (let i=0; i<count; i++) {
const x = map(random(), 0, 1, area.left - 50, area.right);
line(x + 50, area.top, x, area.bottom);
}
noStroke();
fill(0);
text(name + "\n" + date + "\n" + value + "mm", area.left + 50, area.top + 70);
}
描画を工夫する３ RUN
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make("Date", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.makeArea(0, 0, width, height, 6, 1); // ウィンドウのサイズを6列x1行に分割してエリア作成 //
Datamate.bindAreas([1,2,3,4,5,6]); // データ番号１－６（札幌ー那覇）をエリアに自動割り当て
Datamate.play(1.0);
}
function draw()
{
background(255);
drawData(1);
drawData(2);
drawData(3);
drawData(4);
drawData(5);
drawData(6);
}
function drawData(_index)
{
const area = Datamate.area(_index);
const name = area.name;
const date = Datamate.current("Date");
const value = Datamate.current(name, false);
const count = Datamate.current(name, false, 1, 100);
stroke(0);
strokeWeight(1);
noFill();
rect(area.left, area.top, area.width, area.height);
noStroke();
fill(0, 10);
for (let i=0; i<count; i++) {
const h = map(random(), 0, 1, area.top, area.bottom);
rect(area.left, area.top, area.width, h);
}
fill(255, 255, 0);
text(name + "\n" + date + "\n" + value + "mm", area.left + 50, area.top + 70);
}
描画を工夫する４ RUN
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make("Date", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.makeArea(0, 0, width, height, 6, 1); // ウィンドウのサイズを6列x1行に分割してエリア作成 //
Datamate.bindAreas([1,2,3,4,5,6]); // データ番号１－６（札幌ー那覇）をエリアに自動割り当て
Datamate.play(1.0);
}
function draw()
{
background(255);
drawData(1);
drawData(2);
drawData(3);
drawData(4);
drawData(5);
drawData(6);
}
function drawData(_index)
{
const area = Datamate.area(_index);
const name = area.name;
const date = Datamate.current("Date");
const value = Datamate.current(name, false);
const count = Datamate.current(name, true, 1, 100);
stroke(0);
strokeWeight(1);
noFill();
rect(area.left, area.top, area.width, area.height);
fill(0, 10);
stroke(0, 40);
let prevX = 0;
let prevY = 0;
for (let i=0; i<count; i++) {
const x = map(random(), 0, 1, area.left, area.right - 10);
const y = map(random(), 0, 1, area.top, area.bottom - 10);
//circle(x, y, 10);
line(x, y, area.centerX, area.bottom);
line(x, y, area.centerX, area.top);
prevX = x;
prevY = y;
}
fill(0);
text(name + "\n" + date + "\n" + value + "mm", area.left + 50, area.top + 70);
}
描画を工夫する５ RUN
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make("Date", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.makeArea(0, 0, width, height, 3, 2); // ウィンドウのサイズを3列x2行に分割してエリア作成 //
Datamate.bindAreas([1,2,3,4,5,6]); // データ番号１－６（札幌ー那覇）をエリアに自動割り当て
Datamate.play(1.0);
}
function draw()
{
background(255);
drawData(1);
drawData(2);
drawData(3);
drawData(4);
drawData(5);
drawData(6);
}
function drawData(_index)
{
const area = Datamate.area(_index);
const name = area.name;
const date = Datamate.current("Date");
const value = Datamate.current(name, false);
const count = Datamate.current(name, true, 1, 100);
stroke(0);
strokeWeight(1);
noFill();
rect(area.left, area.top, area.width, area.height);
stroke(0, 50);
fill(0);
for (let i=0; i<count; i++) {
const angle = map(i, 0, count, 0, 360);
const size = map(random(), 0, 1, 1, 10);
const gain = map(random(), 0, 1, 0.4, 0.5);
const radius = Datamate.current(name, true, 1, area.height * gain);
const x = cos(radians(angle)) * radius + area.centerX;
const y = sin(radians(angle)) * radius + area.centerY;
circle(x, y, size);
line(area.centerX, area.centerY, x, y);
}
fill(0);
text(name + "\n" + date + "\n" + value + "mm", area.left + 50, area.top + 70);
}
描画を工夫する６ RUN
function setup()
{
createCanvas(windowWidth, windowHeight);
Datamate.make("Date", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
Datamate.make('福岡の降水量', [45.5,79.5,116.5,66.0,133.5,123.0,45.5,881.5,246.5,44.0,152.5,45.0]);
Datamate.make('那覇の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.makeArea(0, 0, width, height, 3, 2); // ウィンドウのサイズを3列x2行に分割してエリア作成 //
Datamate.bindAreas([1,2,3,4,5,6]); // データ番号１－６（札幌ー那覇）をエリアに自動割り当て
Datamate.play(1.0);
}
function draw()
{
background(255);
drawData(1);
drawData(2);
drawData(3);
drawData(4);
drawData(5);
drawData(6);
}
function drawData(_index)
{
const area = Datamate.area(_index);
const name = area.name;
const date = Datamate.current("Date");
const value = Datamate.current(name, false);
const count = Datamate.current(name, true, 1, 100);
const radius = Datamate.current(name, true, 10, 200);
const gain = Datamate.current(name, true, 0, 0.5);
const freq = Datamate.current(name, true, 2, 8);
stroke(0);
strokeWeight(1);
noFill();
rect(area.left, area.top, area.width, area.height);
stroke(0,50);
fill(0);
for (let i=0; i<count; i++) {
const radius = Datamate.current(name, true, 1, area.height * gain);
const angle = map(i, 0, count, -180, 180) * freq;
const size = map(random(), 0, 1, 10, 30);
const x = map(i, 0, count, area.left, area.right);
const y = sin(radians(angle)) * radius + area.centerY;
fill(0);
circle(x, y, size);
line(x, y, area.centerX, area.centerY)
}
fill(0);
text(name + "\n" + date + "\n" + value + "mm", area.left + 50, area.top + 70);
}
逆引きリファレンス
データをつくる
書式）指定したデータ名、値でデータセットを作ります。
Datamate.make('データ名', [値0, 値1,...]);書式）指定したファイルからデータセットを作ります。
Datamate.make('ファイルパス');例）１組のデータをつくる
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
}
例）２組のデータをつくる
function setup()
{
Datamate.make("日付", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
}
例）CSVファイルからデータをつくる
function setup()
{
Datamate.make("test.csv"); // 同じ場所にtest.csvファイルを配置しているとする。
}
データを確認する
書式）作ったデータを視覚的に確認します。
Datamate.plot();例）１組のデータセットを作成して、どのようなデータセットになっているかを視覚的に確認する。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.plot();
}
値を取り出す
書式）データセットから指定位置の値を取り出します。
let value = Datamate.value('データ名', データの位置);書式）データセットから指定位置の値を取り出します。値は最小値ー最大値の範囲にマッピングされます。
let value = Datamate.value('データ名', データの位置, 最小値, 最大値);例）データセットからデータの０番目の値を取り出します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
let value = Datamate.value('一年間の降水量', 0); // 0番目の値を取得 -> 118.5
}
例）データセットからデータの０番目の値を取り出します。値は1-100の範囲にマッピングされます。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
let value = Datamate.value('一年間の降水量', 0, 1, 100); // 0番目の値を取得 -> 7.28（118.5を、データの最小値を1、最大値を100にした場合として換算）
}
値を取り出す（割合）
書式）指定位置の値が、同じデータセット内に占める割合を0-1の範囲で取り出します。
let value = Datamate.rate('データ名', データの位置);書式）指定位置の値が、同じデータセット内に占める割合を、最小値ー最大値の範囲にマッピングして取り出します。
let value = Datamate.rate('データ名', データの位置, 最小値, 最大値);書式）指定位置の値が、他のデータセット内の指定位置の値に占める割合を、最小値ー最大値の範囲にマッピングして取り出します。
let value = Datamate.rate('データ名', データの位置, 最小値, 最大値, Datamate.ROW);例）０番目の値が、同じデータセット内に占める割合を0-1の範囲で取り出します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
let value = Datamate.rate('一年間の降水量', 0); // 0番目の値を取得 -> 0.0476（118.5は、データセットの中では0.0476の割合）
}
例）０番目が値が、同じデータセット内に占める割合を、0-100の範囲にマッピングして取り出します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
let value = Datamate.rate('一年間の降水量', 0, 0, 100); // 0番目の値を取得 -> 4.76（0.0476を、0-100の値に変換）
}
例）０番目の値が、他のデータセット内の指定位置の値に占める割合を、0-100の範囲にマッピングして取り出します。
function setup()
{
Datamate.setValues("Naha", [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.setValues("Sapporo", [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
let value1 = Datamate.rate('Naha', 0, 0, 100, Datamate.ROW); // Nahaの0番目の値を取得 -> 56.6 （Naha:Sapporo = 118.5:90.5 = 56.6:43.3）
let value2 = Datamate.rate('Sapporo', 0, 0, 100, Datamate.ROW); // Sapporoの0番目の値を取得 -> 43.3 （Naha:Sapporo = 118.5:90.5 = 56.6:43.3）
}
データを再生する
書式）指定したフレームレートの時間間隔で、データ位置を遷移させることを開始します（Datamate.current()と併用します）。
Datamate.play(フレームレート);例）指定したフレームレートの時間間隔で、データ位置を遷移させることを開始します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.play(1.0); // フレームレート1.0で再生（１秒ごとにデータ位置が１つ進む）
}
データを取り出す（再生中の値）
書式）現在のデータ位置の値を取り出します。
Datamate.current('データ名');書式）現在のデータ位置の値を取り出します。次のデータ位置の値との間を補間して取り出すか設定します。
Datamate.current('データ名', 補間設定);書式）現在のデータ位置の値を取り出します。次のデータ位置の値との間を補間して取り出すか設定します。値を最小値ー最大値の範囲にマッピングします。
Datamate.current('データ名', 補間設定, 最小値, 最大値);例）現在のデータ位置の値を取り出します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.play(1.0); // フレームレート1.0で再生（１秒ごとに取得する番号が１つ進む）
}
function draw()
{
let value = Datamate.current('一年間の降水量');
}
例）現在のデータ位置の値を取り出します。次のデータ位置の値との間を補間します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.play(1.0); // フレームレート1.0で再生（１秒ごとに番号が１つ進む）
}
function draw()
{
let value = Datamate.current('一年間の降水量', true);
}
例）現在のデータ位置の値を取り出します。次のデータ位置の値との間を補間します。値は10-100の間にマッピングされます。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.play(1.0); // フレームレート1.0で再生（１秒ごとに番号が１つ進む）
}
function draw()
{
let value = Datamate.current('一年間の降水量', true, 10, 100);
}
表示エリアを作成する
書式）指定した矩形内に、指定した数のエリアを作成します。
Datamate.makeArea(x座標, y座標, 横幅, 高さ, 列の分割数, 行の分割数);例）４つのデータセットのために、キャンバスの範囲で2x2のエリアを作成します。
function setup()
{
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
makeArea(0, 0, width, height, 2, 2);
}
表示エリアを紐づける
書式）指定したエリアとデータセットを紐づけます。
Datamate.bindArea('データ名', 列位置, 行位置);例）４つのデータセットのために、キャンバスの範囲で2x2のエリアを作成し、それぞれのエリアを紐づけます。
function setup()
{
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
makeArea(0, 0, width, height, 2, 2); // 2x2のエリアを作成
bindArea('札幌の降水量', 0, 0); // 0,0のエリアと紐づけ
bindArea('東京の降水量', 0, 1); // 0,1のエリアと紐づけ
bindArea('名古屋の降水量', 1, 0); // 1,0のエリアと紐づけ
bindArea('京都の降水量', 1, 1); // 1,1のエリアと紐づけ
}
表示エリアを一括で紐づける
書式）指定したエリアとデータセットを一括で紐づけます。
Datamate.bindAreas([データセット番号, データセット番号,..]);例）４つのデータセットのために、キャンバスの範囲で2x2のエリアを作成し、それぞれのエリアを一括で紐づけます。
function setup()
{
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
makeArea(0, 0, width, height, 2, 2); // 2x2のエリアを作成
bindAreas([0,1,2,3]); // データセット0-3を各エリアに一括で紐づける
}
表示エリアを取り出す
書式）データセットと紐づけたエリア情報を取得します。
Datamate.area('データ名'（またはデータセット番号）);例）４つのデータセットのために、キャンバスの範囲で2x2のエリアを作成し、それぞれのエリアを一括で紐づます。描画時に'札幌の降水量'のエリアを取得します。
function setup()
{
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
makeArea(0, 0, width, height, 2, 2); // 2x2のエリアを作成
bindAreas([0,1,2,3]); // データセット0-3を各エリアに一括で紐づける
}
function draw()
{
const area = Datamate.area('札幌の降水量'); // '札幌の降水量'のエリアを取得
rect(area.left, area.top, area.width, area.height); // エリアの各値から、矩形を描画
}
リファレンス
Datamate.make()
Datamate.make(name, values);Datamateで使用するデータセットを追加します。
パラメータ
name:String 作成するデータセットの名前
values:Array 作成するデータの値
戻り値
なし
Datamate.make(filePath);CSVファイルから自動でデータセットを作成します。
パラメータ
filePath:String CSVファイルのパス
戻り値
なし
例）１組のデータをつくる
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
}
例）２組のデータをつくる
function setup()
{
Datamate.make("日付", ["2021/1","2021/2","2021/3","2021/4","2021/5","2021/6","2021/7","2021/8","2021/9","2021/10","2021/11","2021/12"]);
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
}
例）CSVファイルからデータをつくる
function setup()
{
Datamate.make("test.csv"); // 同じ場所にtest.csvファイルを配置しているとする。
}
Datamate.plot()
Datamate.plot();内蔵プロッタを呼び出し、現在のデータセットの状態を表示します。
引数
| パラメータ |
|---|
| なし |
戻り値
| パラメータ |
|---|
| なし |
例）１組のデータセットを作成して、どのようなデータセットになっているかを視覚的に確認する。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.plot();
}
Datamate.value()
Datamate.value(name, index, [min, max]);nameで指定した名前または番号のデータセットの内、indexで指定したデータ番号の値を取り出します。またminとmaxを指定した場合、データセット内の最小値と最大値をmin, maxの値にマッピングします。
引数
| パラメータ | 型 | 概要 |
|---|---|---|
| name | String|Number | データセットの名前または番号 |
| index | Number | データセットのデータ番号 |
| min | Number | マッピング後の最小値 |
| max | Number | マッピング後の最大値 |
戻り値
| 型 | 概要 |
|---|---|
| String|Number | 指定位置の値。値が数値で、かつmin, maxを指定した場合は、マッピングされた数値が返される |
例）データセットからデータの０番目の値を取り出します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
let value = Datamate.value('一年間の降水量', 0); // 0番目の値を取得 -> 118.5
}
例）データセットからデータの０番目の値を取り出します。値は1-100の範囲にマッピングされます。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
let value = Datamate.value('一年間の降水量', 0, 1, 100); // 0番目の値を取得 -> 7.28（118.5を、データの最小値を1、最大値を100にした場合として換算）
}
Datamate.rate()
let value = Datamate.rate(name, index, min, max);nameで指定した名前または番号のデータセットの内、indexで指定した位置の値の割合を0-1の範囲で取り出します。またminとmaxを指定した場合、その列の最小値と最大値をmin, maxの値にマッピングします。
引数
| パラメータ | 型 | 概要 |
|---|---|---|
| name | String|Number | データテーブルの列の名前または番号 |
| index | Number | データテーブルの行の番号 |
| min | Number | マッピング後の最小値 |
| max | Number | マッピング後の最大値 |
戻り値
| 型 | 概要 |
|---|---|
| String|Number | 指定位置の値。値が数値で、かつmin, maxを指定した場合は、マッピングされた数値が返される |
例）０番目の値が、同じデータセット内に占める割合を0-1の範囲で取り出します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
let value = Datamate.rate('一年間の降水量', 0); // 0番目の値を取得 -> 0.0476（118.5は、データセットの中では0.0476の割合）
}
例）０番目が値が、同じデータセット内に占める割合を、0-100の範囲にマッピングして取り出します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
let value = Datamate.rate('一年間の降水量', 0, 0, 100); // 0番目の値を取得 -> 4.76（0.0476を、0-100の値に変換）
}
例）０番目の値が、他のデータセット内の指定位置の値に占める割合を、0-100の範囲にマッピングして取り出します。
function setup()
{
Datamate.setValues("Naha", [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]);
Datamate.setValues("Sapporo", [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
let value1 = Datamate.rate('Naha', 0, 0, 100, Datamate.ROW); // Nahaの0番目の値を取得 -> 56.6 （Naha:Sapporo = 118.5:90.5 = 56.6:43.3）
let value2 = Datamate.rate('Sapporo', 0, 0, 100, Datamate.ROW); // Sapporoの0番目の値を取得 -> 43.3 （Naha:Sapporo = 118.5:90.5 = 56.6:43.3）
}
データを再生する
書式）指定したフレームレートの時間間隔で、データ位置を遷移させることを開始します（Datamate.current()と併用します）。
Datamate.play(フレームレート);例）指定したフレームレートの時間間隔で、データ位置を遷移させることを開始します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.play(1.0); // フレームレート1.0で再生（１秒ごとにデータ位置が１つ進む）
}
データを取り出す（再生中の値）
書式）現在のデータ位置の値を取り出します。
Datamate.current('データ名');書式）現在のデータ位置の値を取り出します。次のデータ位置の値との間を補間して取り出すか設定します。
Datamate.current('データ名', 補間設定);書式）現在のデータ位置の値を取り出します。次のデータ位置の値との間を補間して取り出すか設定します。値を最小値ー最大値の範囲にマッピングします。
Datamate.current('データ名', 補間設定, 最小値, 最大値);例）現在のデータ位置の値を取り出します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.play(1.0); // フレームレート1.0で再生（１秒ごとに取得する番号が１つ進む）
}
function draw()
{
let value = Datamate.current('一年間の降水量');
}
例）現在のデータ位置の値を取り出します。次のデータ位置の値との間を補間します。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.play(1.0); // フレームレート1.0で再生（１秒ごとに番号が１つ進む）
}
function draw()
{
let value = Datamate.current('一年間の降水量', true);
}
例）現在のデータ位置の値を取り出します。次のデータ位置の値との間を補間します。値は10-100の間にマッピングされます。
function setup()
{
Datamate.make('一年間の降水量', [118.5,194.5,69.5,92.0,163.5,893.5,337.5,109.5,241.0,107.5,92.5,66.0]); // データの作成
Datamate.play(1.0); // フレームレート1.0で再生（１秒ごとに番号が１つ進む）
}
function draw()
{
let value = Datamate.current('一年間の降水量', true, 10, 100);
}
表示エリアを作成する
書式）指定した矩形内に、指定した数のエリアを作成します。
Datamate.makeArea(x座標, y座標, 横幅, 高さ, 列の分割数, 行の分割数);例）４つのデータセットのために、キャンバスの範囲で2x2のエリアを作成します。
function setup()
{
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
makeArea(0, 0, width, height, 2, 2);
}
表示エリアを紐づける
書式）指定したエリアとデータセットを紐づけます。
Datamate.bindArea('データ名', 列位置, 行位置);例）４つのデータセットのために、キャンバスの範囲で2x2のエリアを作成し、それぞれのエリアを紐づけます。
function setup()
{
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
makeArea(0, 0, width, height, 2, 2); // 2x2のエリアを作成
bindArea('札幌の降水量', 0, 0); // 0,0のエリアと紐づけ
bindArea('東京の降水量', 0, 1); // 0,1のエリアと紐づけ
bindArea('名古屋の降水量', 1, 0); // 1,0のエリアと紐づけ
bindArea('京都の降水量', 1, 1); // 1,1のエリアと紐づけ
}
表示エリアを一括で紐づける
書式）指定したエリアとデータセットを一括で紐づけます。
Datamate.bindAreas([データセット番号, データセット番号,..]);例）４つのデータセットのために、キャンバスの範囲で2x2のエリアを作成し、それぞれのエリアを一括で紐づけます。
function setup()
{
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
makeArea(0, 0, width, height, 2, 2); // 2x2のエリアを作成
bindAreas([0,1,2,3]); // データセット0-3を各エリアに一括で紐づける
}
表示エリアを取り出す
書式）データセットと紐づけたエリア情報を取得します。
Datamate.area('データ名'（またはデータセット番号）);例）４つのデータセットのために、キャンバスの範囲で2x2のエリアを作成し、それぞれのエリアを一括で紐づます。描画時に'札幌の降水量'のエリアを取得します。
function setup()
{
Datamate.make('札幌の降水量', [90.5,78.5,79.5,112.0,76.5,50.5,7.5,108.5,73.0,150.5,153.5,108.5]);
Datamate.make('東京の降水量', [43.5,88.5,173.0,156.0,99.5,168.5,310.0,382.5,222.5,199.5,93.0,116.0]);
Datamate.make('名古屋の降水量', [56.5,46.5,203.5,192.0,254.0,137.0,312.5,347.0,224.0,65.0,71.5,89.0]);
Datamate.make('京都の降水量', [55.5,54.0,143.0,202.0,228.5,128.0,390.0,468.5,179.5,41.0,67.5,76.5]);
makeArea(0, 0, width, height, 2, 2); // 2x2のエリアを作成
bindAreas([0,1,2,3]); // データセット0-3を各エリアに一括で紐づける
}
function draw()
{
const area = Datamate.area('札幌の降水量'); // '札幌の降水量'のエリアを取得
rect(area.left, area.top, area.width, area.height); // エリアの各値から、矩形を描画
}