Processingによるカクテルの味と人気の可視化

概要

代表的なカクテルのwebサイト(カクテルタイプ：http://www.cocktailtype.com/)　での閲覧数の視覚化、

およびそれぞれのカクテルの味の視覚化

コード

import de.bezier.data.sql.*;

import controlP5.*;

MySQL mysql;

MySQL mysql2;

ControlP5 cp5;

String[] name = new String[100];

int[] id = new int[100];

int[] strength = new int[100];

int[] briskness = new int[100];

int[] sweetness = new int[100];

int[] rank = new int[100];

int[] refer = new int[100];

int i = 0;

int maxi = 0;

int clickid = 0;

void setup(){

size(700,600);

mysql = new MySQL(this,"localhost","cocktail","root","");

if(mysql.connect()){

mysql.query("select * from cocktail_table");

while(mysql.next()){

name[i] = mysql.getString("name");

id[i] = mysql.getInt("id");

strength[i] = mysql.getInt("strength");

briskness[i] = mysql.getInt("briskness");

sweetness[i] = mysql.getInt("sweetness");

println(name[i] + " " + id[i] + " " + rank[i] + " " + strength[i] + " " + briskness[i] + " " + sweetness[i]);

i = i + 1;

}

maxi = i;

mysql2 = new MySQL(this,"localhost","cocktail","root","");

mysql2.connect();

for(int u = 0;u < maxi;u++){

println("select * from ranking_table where name = \"" + name[u] + "\" ");

mysql2.query("select * from ranking_table where name = \"" + name[u] + "\" ");

mysql2.next();

rank[u] = mysql2.getInt("rank");

refer[u] = mysql2.getInt("refer");

println(name[u] + " " + rank[u] + " " + refer[u]);

}

cp5 = new ControlP5(this);

cp5.addButton("ALL")

.setId(0)

.setPosition(600,10)

.setSize(100,25);

for(int j = 0;j < maxi;j++){

cp5.addButton(name[j])

.setId(j+1)

.setPosition(600,j*20+35)

.setSize(100,20);

}

}

}

void draw(){

background(0, 0, 0);

fill(0,0,0);

stroke(255,255,255);

triangle(250,100,50,450,450,450);

fill(255,255,255);

text("strength",250,80);

text("briskness",400,475);

text("sweetness",0,475);

//(250,100 250,450) -> 250,333

fill(0,0,0);

ellipse(250,333,5,5);

if(clickid == 0){

for(int k = 0; k < (maxi); k++){

int st = strength[k];

int br = briskness[k];

int sw = sweetness[k];

int upx = 250;

int upy = 333+(100-333)*st/3;

int rightx = 250+(450-250)*br/3;

int righty = 333+(450-333)*br/3;

int leftx = 250+(50-250)*sw/3;

int lefty = 333+(450-333)*sw/3;

int centerx = upx+ ((leftx+(rightx-leftx)/2)-upx)*2/3;

int centery = upy+ ((lefty+(righty-lefty)/2-upy))*2/3;

int pointx = 255+(centerx-255)*2;

int pointy = 333+(centery-333)*2;

//fill(255,0,0);

//ellipse(centerx,centery,10,10);

fill(0,0,0);

if(refer[k] != 0){

ellipse(pointx,pointy,refer[k]/300,refer[k]/300);

}else{

ellipse(pointx,pointy,10,10);

}

//text(name[k],centerx,centery);

}

}else{

int k = clickid-1;

int st = strength[k];

int br = briskness[k];

int sw = sweetness[k];

int upx = 250;

int upy = 333+(100-333)*st/3;

int rightx = 250+(450-250)*br/3;

int righty = 333+(450-333)*br/3;

int leftx = 250+(50-250)*sw/3;

int lefty = 333+(450-333)*sw/3;

stroke(71,234,126);

fill(71,234,126);

triangle(upx,upy,leftx,lefty,rightx,righty);

int centerx = upx+ ((leftx+(rightx-leftx)/2)-upx)*2/3;

int centery = upy+ ((lefty+(righty-lefty)/2-upy))*2/3;

int pointx = 255+(centerx-255)*2;

int pointy = 333+(centery-333)*2;

//fill(255,0,0);

//ellipse(centerx,centery,10,10);

stroke(255,0,55);

fill(255,0,55);

if(refer[k] != 0){

ellipse(pointx,pointy,refer[k]/300,refer[k]/300);

}else{

ellipse(pointx,pointy,10,10);

}

}

}

void controlEvent(ControlEvent theEvent){

clickid = theEvent.controller().id();

}

データベース(MySQL)

cocktail_table

カクテルごとの味(Strength,briskness,sweetness)の値とid,nameからなる。

全25データ

元データはShotbarLAILA(http://laila.daa.jp)のmenuより。

ranking_table

Webサイト「カクテルタイプ」のカクテルページに対する閲覧数。

スクリーンショット

図１：ALL表示

図2：カクテル別表示

 

画面解説

左　メイン表示画面

右　UIボタン（ALL ,それぞれのカクテル名）

操作と挙動

ALL(図１)

カクテルの味の特徴─Strength(アルコールの強さ),Briskness(爽やかさ）,Sweetness(甘さ)の値によって形成される三角形の重心※─を座標とし、カクテルのwebサイトにおける閲覧数を直径とする円を全てのカクテルについて表示する。

それぞれのカクテル名(図2)

そのカクテルの味─Strength(アルコールの強さ),Briskness(爽やかさ）,Sweetness(甘さ)の値によって形成される三角形─と、味の特徴─三角形の重心─を表示する。

工夫点

全てのカクテルに対する四つのパラメータ(Strength,Briskness,Sweetness,閲覧数)を１画面で俯瞰できるように可視化方法を工夫した。味の特徴として、三角形の重心を利用することでパっと見て分かりやすくデータの閲覧ができるようにした。

単純に三角形の重心を表示するだけではベースの三角形の中心部分に必然的に集約されてしまい、差異がわかりにくいので、座標を分散させるため、ベースの三角形の重心を原点として、味の重心の位置ベクトルを定数倍している。

また、味の特徴と同時に閲覧数を円の大きさとして表示することで、どういった味の特徴をもつカクテルが人気であるか一目で分かるようにした。(図１から、味のバランスが良い物が比較的閲覧数が多いことが分かる)

また、デザインに関して、見た目の美しさにこだわった。

今回のデータがカクテルであることから、

ALL(図１)では白いラインの円を用いて炭酸の泡を表現し、

それぞれのカクテルの個別表示では、味の三角形でカクテルグラス、特徴の円でマラスキーノ・チェリーを表現し、全体でカクテルを表現している