p5.js 外部データの入力

CSVを読み込んで、イチローの打率の変遷をグラフにする

CSVファイル の所在

code: graph.js

let stats;

const graph = [];

function preload() {

//ファイルの読み込み

stats = loadTable('ichiro.csv');

}

function setup() {

createCanvas(400, 400);

const rowCount = stats.getRowCount();

for (let i = 0; i < rowCount; i++) {

}

}

function draw() {

background(200);

//罫線

stroke(220);

line(20, 380, 380, 380);

for (let i = 0; i < graph.length; i++) {

const wx = map(i, 0, graph.length - 1, 20, 380);

line(wx, 20, wx, 380);

}

//グラフ

noFill();

stroke(100);

beginShape();

for (let j = 0; j < graph.length; j++) {

const x = map(j, 0, graph.length - 1, 20, 380);

vertex(x, y);

}

endShape();

}

自治体の緯度経度を点描して、アメリカの地図を書く

CSVデータの所在

code: us_map.js

let cities;

function preload() {

cities = loadTable('cities.csv', 'header');

}

function setup() {

createCanvas(800, 800);

stroke(0, 100);

}

function draw() {

background(220);

for (let i = 0; i < cities.getRowCount(); i++) {

const latitude = cities.getNum(i, 'lat');

const longitude = cities.getNum(i, 'lng');

setXY(latitude, longitude);

}

}

function setXY(lat, lng){

const x = map(lng, -180, -60, 0, 800);

const y = map(lat, 130, 10, 0, 800);

point(x, y - 200);

}

参考文献

「Processingをはじめよう 第2版」

ヒムカンパニー 「11_1：表データ p5.js JavaScript」

p5.js Reference & Examples

https://gyazo.com/73af86b6fc90d5b630a82027e32c20a5