bit sized

Just another WordPress.com weblog

‘processing’ タグのついている投稿

Processingでグラフ

コメントなし

前から少し気になっていたProcessingという言語について、ちょうど本屋におもしろそうなオライリー本が出ていたので買ってみました。

ビジュアライジング・データ ―Processingによる情報視覚化手法

簡単な例としてグラフの作成があったので、自分でも日本の人口統計を使ってグラフを書いてみました。

Population growth in Japan

Population growth in Japan

  1. FloatTable data;
  2. PFont plotFont;
  3. float plotX1,plotY1;
  4. float plotX2,plotY2;
  5. float labelX,labelY;
  6. float dataAreaWidth;
  7. float dataAreaHeight;
  8. final float dataOffsetY = 30;
  9. float volumnInterval = 10000;
  10. float dataCeil;
  11. int []years;
  12. int yearMin;
  13. int yearMax;
  14. int yearInterval;
  15. float dataMin;
  16. float dataMax;

  18. void setup(){
  19. plotFont = createFont(“SansSerif”,20);
  20. textFont(plotFont);
  22. //load csv file
  23. data = new FloatTable(“ppl1920-1990-grs-t.csv”);
  25. years = int(data.getRowNames());
  26. yearMin = years[0];
  27. yearMax = years[years.length -1];
  28. yearInterval = 10;
  30. dataMin = data.getColumnMin(0);
  31. dataMax = data.getColumnMax(0);
  32. println(ceil(dataMax/volumnInterval));
  33. dataCeil = ceil(dataMax/volumnInterval) * volumnInterval;
  35. size(600,400);
  36. smooth();
  38. plotX1 = 160;
  39. plotY1 = 80;
  40. plotX2 = width - plotX1/2;
  41. plotY2 = height - plotY1;
  42. labelX = plotX1 -110;
  43. labelY = plotY2 +40;

  45. dataAreaWidth = plotX2 - plotX1;
  46. dataAreaHeight = plotY2- plotY1;
  47. }
  49. void draw(){
  50. background(022); // (1)background color
  51. fill(044);
  52. rectMode(CORNERS);
  53. noStroke();
  54. rect(plotX1,plotY1,plotX2,plotY2);
  55. strokeWeight(0.4);
  56. stroke(254);
  58. drawDataArea();
  60. stroke(112);
  61. strokeWeight(0.1);
  62. drawLabels();
  63. }

  65. void drawLabels(){
  66. drawTitleLabel();
  67. drawAxisLabels();
  68. drawYearLabels();
  69. drawYearGrid();
  70. drawVolumnLabels();
  71. }
  73. void drawTitleLabel( ) {
  74. fill(112);
  75. textSize(15);
  76. textAlign(CENTER,CENTER);
  77. text(“Population growth in Japan\n 1920 to 2000″,(plotX1+plotX2)/2,plotY1 - 40);
  78. }
  80. void drawAxisLabels( ) {
  81. fill(112);
  82. textSize(13);
  83. textLeading(15);
  84. textAlign(CENTER, CENTER);
  85. text(“Total \npopulation\n(Thousand)”, labelX, (plotY1+plotY2)/2);
  86. textAlign(CENTER);
  87. text(“Year”, (plotX1+plotX2)/2, labelY);
  88. }

  90. void drawYearLabels(){
  91. fill(112);
  92. textSize(12);
  93. textAlign(LEFT);
  94. int rowCount = data.getRowCount();
  95. for(int i=0;i < rowCount;i++){
  96. if(years[i] % yearInterval ==0){
  97. String yearText = data.getRowName(i);
  98. float x = map(int(yearText),yearMin,yearMax,plotX1,plotX2);
  99. text(yearText,x,plotY2+12);
  100. }
  101. }
  102. }

  104. void drawYearGrid(){
  105. int rowCount = data.getRowCount();
  106. for(int i=0;i < rowCount;i++){
  107. if(years[i] % yearInterval ==0){
  108. float x = float(data.getRowName(i));
  109. x = map(x,yearMin,yearMax,plotX1,plotX2);
  110. line(x,plotY2,x,plotY1);
  111. }
  112. }
  113. }

  115. void drawVolumnLabels(){
  116. fill(112);
  117. textSize(10);
  118. textAlign(RIGHT);
  119. float x = plotX1;
  120. float y;
  121. for(float v = floor(dataMin/volumnInterval)*volumnInterval;v <= dataCeil;v+= volumnInterval){
  122. y = map(v,floor(dataMin/volumnInterval)*volumnInterval,dataCeil,plotY2,plotY1);
  123. line(x-10,y,x,y);
  124. //println(v);
  125. text(floor(v),x-20,y+4);
  126. }
  127. }

  129. void drawDataArea(){
  130. beginShape();
  131. int rowCount = data.getRowCount();
  132. for(int i=0;i < rowCount;i++){
  133. float value = data.getFloat(i,0);
  134. float x = map(years[i],yearMin,yearMax,plotX1,plotX2);
  135. float y = map(value,floor(dataMin/volumnInterval)*volumnInterval,dataCeil,plotY2,plotY1);
  136. vertex(x,y);
  137. }
  138. endShape();
  139. }

  141. void keyPressed( ) {
  142. saveFrame(“japan_pl_##.png”);
  143. }

processing実行後に何かキーを押すと、連番で”japan_pl_01.png”という画像が保存されます。FloatTableというクラスは本のサンプルコードに含まれているものですが、http://benfry.com/writing/archives/3 からダウンロードできます。人口のCSVは統計局からダウンロードしたものをタブ区切りのcsvにしてます。

こんな感じで

  1. Year    Total
  2. 1920 55963
  3. 1921 56666
  4. 1922 57390
  5. 1923 58119
  6. 1924 58876
  7. 1925 59737
  8. 1926 60740.9
  9. 1927 61659.3
  10. 1928 62595.3
  11. 1929 63460.6
  12. 1930 64450
  13. 1931 65457
  14. 1932 66434
  15. 1933 67432
  16. 1934 68309
  17. 1935 69254
  18. 1936 70114
  19. 1937 70630
  20. 1938 71013
  21. 1939 71380
  22. 1940 71933
  23. 1941 71933
  24. 1942 71933
  25. 1943 71933
  26. 1944 73064
  27. 1945 71998
  28. 1946 73114
  29. 1947 78101
  30. 1948 80002
  31. 1949 81773
  32. 1950 83200
  33. 1951 84573
  34. 1952 85852
  35. 1953 87033
  36. 1954 88293
  37. 1955 89276
  38. 1956 90259
  39. 1957 91088
  40. 1958 92010
  41. 1959 92973
  42. 1960 93419
  43. 1961 94285
  44. 1962 95178
  45. 1963 96156
  46. 1964 97186
  47. 1965 98275
  48. 1966 99054
  49. 1967 100243
  50. 1968 101408
  51. 1969 102648
  52. 1970 103720
  53. 1971 105014
  54. 1972 107332
  55. 1973 108710
  56. 1974 110049
  57. 1975 111940
  58. 1976 110089
  59. 1977 114154
  60. 1978 115174
  61. 1979 116133
  62. 1980 117060
  63. 1981 117884
  64. 1982 118693
  65. 1983 119483
  66. 1984 120235
  67. 1985 121049
  68. 1986 121672
  69. 1987 122264
  70. 1988 122783
  71. 1989 123255
  72. 1990 123611
  73. 1991 124043
  74. 1992 124452
  75. 1993 124764
  76. 1994 125034
  77. 1995 125570
  78. 1996 125864
  79. 1997 126166
  80. 1998 126486
  81. 1999 126686
  82. 2000 126926

Processingを一言で説明しようとすると、Javaの描写機能を使用しやすいインタフェースで提供する言語環境（なのかな？）でしょうが、なんでProcessingに興味をもっていたかというと、これを使用した作品（っていうのがいいですね）に興味深いというか斬新なものが多かったからな訳です。

MusicBox: a truly powerful visualization of your music library:http://www.crunchgear.com/2008/12/15/musicbox-a-truly-powerful-visualization-of-your-music-library/
音楽のライブラリを可視化するソフト。ファイルのメタデータ（作者やジャンルなど）のみではなく、実際の音声データをスキャンしてマッピングする。

Aligning humans and mammals:http://benfry.com/infoseed/
人間とほ乳類の遺伝子配列をならべて描写した画像

Base26:http://toxi.co.uk/p5/base26/
英語の言葉同士の慣例性を表現した図。

仕事ではほとんどCRUDなWEBアプリケーションしか見ないのですが、こういうデータの重要性もさることながらどう見せるかでどれだけ印象や理解度が変わるかという事を考えるとおもしろい。色々遊んでみようと思います。

投稿者: t4ku

2月 3, 2009 3:44 am

Programming, Technology への投稿

タグ: