2016-02-29

2月21日 プレゼン大会開きました

2016年2月21日

概要

身近な友人の研究や仕事をよく知らないことが多いので、そのための機会を作って各自で発表しあうことにしました。初めて発表した人や、うまくいった人や、大失敗した人もいましたが、次回もやってほしいと大好評でした。企画してよかった。

モチベーション

よく会う友人でも、彼らが何を研究や仕事しているのか、何に関心があるの か、よく知らないことが多いものです。お酒の席で聞いても、話がまとまらない。そこで、改めて場を設定することにしました。せっかくなので、人を集めて発表してもらうことにしました。
発表というとジョブズやTEDのようにかっこよくなければならないと思う人もいるかもしれませんが、そんなことはないです。かっこよくても中身が空っぽの発表だってあります。「これを伝えたい!」という気持ちが大事です。今回は、誰でも気軽に発表できるような場を作ることに専念しました。発表するのは偉い必要もないし、先生である必要もないのです。誰も傍観者とならず、気軽に積極的に発表や質問をできるアクティブな雰囲気にしたかったです。

参加者の反応

発表3日前までは参加者が5人ほどしかいなかったが、当日は10人以上も参加者が集まった。発表を前日まで嫌がっていた人も、発表後は「やってよかった、またひらいて!次回は何を話そう」などと話し、自分が人に伝えられるものを意外と持っていることに気づいて嬉しそうでした。大変よかった。発表がうまくいかなかった人も、次回こそはと意気込んでいました。発表後には次回に向けての反省会まで開いてました。

企画してわかったこと

  • 「気軽に発表できる場をもうける」というコンセプトは大成功。「発表するモノ何もないし」という人だって、根掘り葉掘り聞けば、人が聞きたくなる何か出てくる。
  • 「人に教えることで一番学ぶのは自分」という言葉があるように、人に話す覚悟を決めると、それなりに準備して内容を整理する。発表し質問受けることで、一人で学んでいては気がつかないことにも気が付く。
  • 簡単にマネできないようなおもしろく印象的なプレゼンをさらりとする人がいる。本当に尊敬する。
  • 科学プレゼンと異なり、大衆向けのプレゼンで大事なのは発表者の人格や伝え方だ。内容ではない。中身が比較的空っぽでも、人柄やパフォーマンスがよくて、プレゼンのゴールが示されると、安心して聞ける。たとえ科学的に未発見のことでも淡々と話すと、聞く人は寝る。
  • 「これを伝えたい!」という気持ちが大事。気持ちがあれば、プレゼンが下手でも何とかなる。熱のないプレゼンを前にすると人は寝る(大学のマスプロにありがち)。
  • ジュネーブのラーメン一杯3500円は強烈。
  • 「企画する!」と言って周囲に助けを求めれば、みな意外と協力してくれて、無料で場所まで見つかる。
  • 質問があると、ちゃんと話を聞いてくれているんだと発表者は安心する。質問がないと、発表した意味なかったのと不安になる。発表者の心のためにも、質問した方がいい。

反省点/課題

  • 今回は発表が大幅に長引いた。発表者がパンクチュアルになるよう、発表者の目の前にタブレットでタイマーを掲示する。
  • オーディエンスの反応や感想がわかるよう、リアクションペーパーを配る。
  • 道に迷う人が多かったので、初めて来た人にもわかる案内をする。看板作る。
  • 発表も質問もしない人を減らす。内容のいい、悪いに関わらず、とにかく発表してみたいと思わせる。質問が盛んに出ることで、ディスカッションに近い会にしたい。 5 . ぼくのことを知らない人でも参加しやすくすること
  • オーディエンスに様々な人がいて、プレゼンの対象者が判然とせず、資料を作りづらい。この問題は難しい。

2016-02-17

javascript nvd3 グラフ描画

時系列データを描画しました。マウスカーソルに合わせて滑らかに凡例も動きます。chart.xScale(d3.time.scale())として時系列データとして読み込ませないと、座標は全て数字にしないといけない点、chart.xAxis.tickFormat()の引数にd3.time.months()は使えないこと(nvd3に非対応)などは注意です。


データは、
D3.js チュートリアル:基本9 – csvとJSONファイルの読み込み - Data is fun.
にある
csvファイルをお借りしました。





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
</head>

<body>
  <svg id="chart" style="width:500; height:500;"></svg>    
</body>

<script type="text/javascript">

    d3.csv("timeseries.csv", function(error, data){
        console.log(data)
        // create an empty object that nv is expecting
        var exampleData = [
            {
                key: "Closing Prices",
                // bar:true,
                values: []
            }
        ];

        // populate the empty object with your data
        data.forEach(function (d){
            var date = d3.time.format('%d-%b-%y').parse(d.date);
            var dateVal = Number(new Date(date.getTime()));
            var close = Number(d.close);
            exampleData[0].values.push({x:dateVal, y:close});
        });
        
        exampleData[0].values = exampleData[0].values.sort(function(a,b){
            return a.x-b.x;
        });

        var data =exampleData[0].values;

        nv.addGraph(function(){
            var chart = nv.models.lineChart()
                .margin({left:80, right:20, bottom:100, upper:20})
                .useInteractiveGuideline(true)
                .showLegend(true)
                .xScale(d3.time.scale())
                // .x(function(d){
                //     return exampleData[0].values.indexOf(d);
                // })
                .showYAxis(true)
                .forceY([50,700])
                .showXAxis(true)
                .noData('No data to display.')
                ;


            chart.xAxis
                .scale(d3.time.scale()
                              .domain([data[0].x, data[data.length-1].x])
                              .range([0,1024]))
                .orient("bottom")
                // .tickValues(data.map(function(d){return d.x;}))
                // .ticks(d3.time.months, 3)
                .rotateLabels(-30)
                .showMaxMin(false)
                .tickPadding(10)
                .axisLabel('Date')
                .tickFormat(function(d){
                    return d3.time.format('%b. %d, %Y')(new Date(d));
                    // return d3.time.format('%b. %d, %Y')(new Date(exampleData[0].values[d].x));
                })
                // .tickValues(d3.time.month.range(new Date("2007/07/01"), new Date("2012/05/01"), 3))
                ;
              
            chart.yAxis
                .axisLabel('USD ($)')
                .orient("left")
                .tickFormat(d3.format('.1f'));
             
            d3.select('#chart')
                .datum(exampleData)
                // .attr("id", function (d) { console.log(d); })
                // .transition()
                // .duration(500)
                .style({'width':1024,'height':768})
                .call(chart);
         
            nv.utils.windowResize(function() {
                chart.update();
              });

        return chart;
   });
 });

</script>
</html>



chart.xAxis.ticks(d3.time.monday)
が使えないとき。nvd3ではd3.time.monthsなどに対応していない。
d3.time.scale compatibility · Issue #145 · novus/nvd3 · GitHub



interective guidelineが末端しかポイントしないとき
chart.xのx座標配列には、x座標の配列の添字のみをいれ、chart.xAxis.tickFormat()でその添字を使ってx座標の配列から取得してくる。
javascript - NVD3 linechart tooltips not following the mouse - Stack Overflow

グラフとソースコードの例
Time series done right with NVD3 - JSFiddle

[Raspberry Pi] 無線LAN子機 (BUFFALO WLI-UC-GNME) を接続してssh通信する

Raspberry Pi Type Bを無線LANに接続する。無線LAN親機はY!MobileのPocket Wi-Fi

BUFFALO WLI-UC-GNMEを買う。

当初, ELECOMの「小型無線LAN子機 SDC-150SU2MWH」を購入したが、Raspberry Piが認識しなかった。

接続を確認

Raspberry Pi に BUFFALOの子機を指す。ターミナルにlsusbと入力すれば、BUFFALOのデバイスが接続されていることがわかる。


無線LAN設定


sudo wpa_passphrase SSID PSWD | sudo tee -a /etc/wpa_supplicant/wpa_supplicant.conf

を入力する。SSID, PSWDは自身のWi-Fiを指定する。そして, 生成された /etc/wpa_supplicant/wpa_supplicant.conf を下記のように編集する

ctrl_interface=DIR=/var/run/wpa/supplicant GROUP=netdev # 追加
update_config=1 # 追加
network={
        SSID="SSID" # 先ほど指定したSSID。
        #psk="PSWD" # 先ほど指定したPSWD。コメントアウトされている。
        proto=WPA WPA2 # 追加
        key_mgmt=WPA-PSK # 追加
        pairwise=CCMP TKIP # 追加
        group=CCMP TKIP # 追加
        priority=2 # 追加
        psk=123456789abc... #先ほど指定したPSWDにもとづいて生成された暗号化パスワード
}

ブログによって、指定がCCMPのみだったり、proto=RSNだったりする。


インターフェース設定

/etc/network/interfaces

を開き, wlan0の項目を次のように編集する。eth0やwlan1には手を加えない。これで、Raspberry Piを立ち上げるとWi-Fiを探索するようになる。

auto wlan0
    allow-hotplug wlan0
    #iface wlan0 inet manual
    iface wlan0 inet dhcp
    wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
    iface default inet dhcp

ここでは動的にIPアドレスを割り振っており (DHCP, Dynamic Host Configuration Protocol), 接続するたびにIPアドレスは変わる。IPアドレスは

ifconfig

で確認できる。


再起動


sudo service networking restart

とする。ここで、もし

"Warning: Unit File of networking.service changed on disk, 'systemctl daemon-reload' recommended."

と表示された場合、

ctrl_interface=DIR=/var/run/wpa/supplicant GROUP=netdev
update_config=1

の二行を書き忘れていないか確認する。もしくは、他に何か間違いがあると思われる。

ネットワークの再起動ではなく、次のようにしてRaspberry Piを再起動してもよい。

reboot

とする。

確認

有線LANケーブルを抜き, もしくは抜かれていることを確かめ,

sudo ping www.google.com

のようにどこかへ ping を飛ばして無線確認する。自分の環境では, pingにsudoが必要だった。

Y!Mobile Wi-Fi ルーター につながった端末同士で通信させる

場合によっては、まだ端末間のpingやsshが使用できない。
Wi-Fiルーターのプライバシーレセプターを無効にする必要がある。
305ZTの場合、Wi-Fiルーターに繋がった端末から

http://192.168.128.1/

もしくは

http://web.setting/

にアクセスする。これは、Wi-Fiルーターの設定画面に記載されている。

アクセスしたら、設定をひらく。パスワードを求められる。初期設定ではadminがパスワードである。
プライバシーレセプターを無効にする。
設定を保存する。Wi-Fiルーターに繋がった各端末は自動的に再接続される。



他の端末からRaspberry Piにsshでログインする

Raspberry Piと同じWi-Fiルーターに繋がった端末からRaspberry Piにログインする。
Raspberry Piの側で

ifconfig

とすると、IPアドレスがわかる。wlan0の項目から
inet addr 192.168.xxx.xxx
のように書いてある。

他のWindowsやLinuxから
ping 192.168.xxx.xxx
とすると、pingを打てる。また, 初期設定のままであれば
ssh pi@192.168.xxx.xxx
パスワードはraspberryとして、sshでログインできる。Windowsの場合はCygwinを導入するとよい。ここでは、二通りの方法を示す。IPアドレスを固定する方法と、AvahiとBonjourを使う方法だ。どちらも試したので載せる。

i) IPアドレスを固定する
このままでは、IPアドレスが変わってしまう恐れがあるので、固定する。

/etc/wpa_supplicant/wpa_supplicant.conf

は次のようにした。

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
        ssid="305ZTa-7C1347"
        #psk="ぱすわーど"
        proto=WPA WPA2
        key_mgmt=WPA-PSK
        pairwise=CCMP TKIP
        group=CCMP TKIP
        priority=2
        scan_ssid=1
        psk=暗号化されたぱすわーどのながい英数字の列
}

また、

/etc/network/interfaces

は次のようになった。Raspberry Pi のIPアドレスは 192.168.128.204 に固定した。直前にdhcpで割り振られていたものを採用した。


# interfaces(5) file used by ifup(8) and ifdown(8)

# Please note that this file is written to be used with dhcpcd
# For static IP, consult /etc/dhcpcd.conf and 'man dhcpcd.conf'

# Include files from /etc/network/interfaces.d:
source-directory /etc/network/interfaces.d

auto lo
iface lo inet loopback

iface eth0 inet dhcp

auto eht0
allow-hotplug eth0
iface eth0 inet manual

auto wlan0
    allow-hotplug wlan0
    #iface wlan0 inet manual
    #iface wlan0 inet dhcp
    iface wlan0 inet static
    address 192.168.128.204
    network 192.168.128.0
    netmask 255.255.255.0
    gateway 192.168.128.1
    broadcast 192.168.128.255
    wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
    iface default inet dhcp
    dns-nameservers  192.168.128.1

allow-hotplug wlan1
iface wlan1 inet manual
    wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf



ii) Avahiを導入する。
Raspberry Piで

sudo apt-get install avahi-daemon

としてインストール。sshする側のパソコンでは、Macなら何もしなくてよいが、WindowsならiTunesをインストールする。というのも、このホスト名によるアクセスはzeroconfという標準仕様によるもので、LinuxならAvahiを、MacならBonjourを使えばその標準仕様にしたがったホスト名によるアクセスが可能になるからだ。Windowsの場合は、iTunesをインストールすればBonjourがついてくる。ホスト名に.localがつくことに注意。初期設定のログインIDはpi, パスワードはraspberryなので、

ssh pi@rasybeprrypi.local
PW: raspberry

でsshログインできる。次の通りだ。

$ ssh pi@raspberrypi.local
pi@raspberrypi.local's password:

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Wed Jan 20 18:17:19 2016

参考

Raspberry Pi 無線 LAN 設定おぼえ書き - 離島プログラマの雑記
RaspberryPi - Raspberry PiをWLI-UC-GNMEで無線LANに接続する - Qiita

2016-02-08

久々にホームレスになりました

諸事情により一週間だけ家ありません。一年前の極貧ホームレス時代よりは明るい。友人のお世話になろう。人に「助けてください」と言えることが自立なのです。このことは、また改めて。

2016-02-04

nvd3を使ってjavascriptでグラフを表示


nvd3を使うと簡単にかける。データは次のJSON形式でつくる。

[{
  key:'Label',
  values:[{x:0,y:0},{x:1,y:1}]
}]

main.html
<html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My chart</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
        <script src="chart.js"></script>
      </head>
      <body>
        <!-- D3 will use this "svg" tag to render the chart! -->
        <svg></svg>
      </body>
</html>



chart.js
/*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
nv.addGraph(function() {
  // Creates a new Line chart.
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    .showLegend(true)
    .showYAxis(true)
    .showXAxis(true);
 
  // Tells NVD3 to display values with two decimal places.
  chart.xAxis
    .axisLabel('x')
    .tickFormat(d3.format('.2f'));
 
  chart.yAxis
    .axisLabel('y')
    .tickFormat(d3.format('.2f'));
 
  // Select the "svg" tag and render the chart.
  d3.select('svg')
    .datum(sinAndCos())
    .call(chart);
 
  // This will render the chart every time the
  // window is resized, so it will always fit the
  // screen.
  nv.utils.windowResize(function() {
    chart.update()
  });
 
  return chart;
});
/**************************************
 * Simple test data generator
 */
function sinAndCos() {
  var sin = [],sin2 = [],
      cos = [];

  //Data is represented as an array of {x,y} pairs.
  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
    sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }
  //Line chart data should be sent as an array of series objects.
  return [
    {
      values: sin,      //values - represents the array of {x,y} data points
      key: 'Sine Wave', //key  - the name of the series.
      color: '#ff7f0e'  //color - optional: choose your own line color.
    },
    {
      values: cos,
      key: 'Cosine Wave',
      color: '#2ca02c'
    },
    {
      values: sin2,
      key: 'Another sine wave',
      color: '#7777ff',
      area: true      //area - set to true if you want this line to turn into a filled area chart.
    }
  ];
}

bibliography
Simple Line Chart - NVD3 
NVD3を使って、AngularJSで作ったハイブリッドアプリのグラフを統合しよう : アシアルブログ 

アクアリウムはじめました

通りすがりのアクアリウムショップで、ボトルアクアリウムを衝動買いしました(2月5日)。アカヒレ二匹がいます。コンラッド・ローレンツが『ソロモンの指輪』の中でアクアリウムをおすすめしていたので、試してみたかったのです。今回が初めてのアクアリウムなので簡単なものにしたく、また手間をか...