民主と自民の支持率は完全に逆転してしまった。いま解散すれば自民の単独過半数は確実だ。振り返ったとき、麻生首相の支持率急落のきっかけが「漢字」だったように、民主党内閣の背骨を折ったのは柳田法相の軽卒発言だったということになるだろう。
手法については「社会科学のベイズ統計 動的線形モデルDLM」と同じ。
政党支持率の動的線形モデル:updated
民主と自民の支持率は完全に逆転してしまった。いま解散すれば自民の単独過半数は確実だ。振り返ったとき、麻生首相の支持率急落のきっかけが「漢字」だったように、民主党内閣の背骨を折ったのは柳田法相の軽卒発言だったということになるだろう。
手法については「社会科学のベイズ統計 動的線形モデルDLM」と同じ。
大リーグ60年分のデータ
ニューヨークのインタラクティブ・デザイナーStephen Vargaが、過去60年分の大リーグの全試合を網羅したデータアプリを発売した。iPad用で4.99ドル。
The New School for Design出身で、使える技術はPhotoshop, Illustrator, InDesign, Quark, Final Cut Pro, Flash Design/Animation,HTML, CSS, AS2, openFrameworks (C++), AS3, PHP/MySQL, Arduino, Python, Processing, Physical Computingらしい。こんな若者がアメリカにはわんさかいるのだ。
The New School for Design出身で、使える技術はPhotoshop, Illustrator, InDesign, Quark, Final Cut Pro, Flash Design/Animation,HTML, CSS, AS2, openFrameworks (C++), AS3, PHP/MySQL, Arduino, Python, Processing, Physical Computingらしい。こんな若者がアメリカにはわんさかいるのだ。
国勢調査のビジュアル化コンテスト
6月に開かれるビジュアル化の祭典「eyeo Festival」が、2010年アメリカ国勢調査の結果を使ったビジュアル化作品を募集している。締め切りは5月16日、発表は6月1日。賞品はeyeo Festivalへの顎足招待。数日で売り切れたイベントだからpricelessの価値がある。
国勢調査の結果は4月にかけて各州で五月雨のように公開されるから、データとインターフェイスを区切って開発しないと間に合わないかもしれない。
問題は、すでに米国勢調査事務所のサイトがフラッシュを公開していることで、単純な調査結果をマッピングしただけでは本家にさえ劣ることになりかねない。公的機関には立場上できない視点で何らかの発見を示さないと勝ち目はない。
とはいえ、国会議員の議席配分(apportionment)というテーマも境取りされている。
しかし、さすがアメリカ。全ての州の調査区（基本的はカウンティー）のシェープファイル（MAF/TIGER database）が公開されている。
国勢調査局：American FactFinder
国勢調査の結果は4月にかけて各州で五月雨のように公開されるから、データとインターフェイスを区切って開発しないと間に合わないかもしれない。
問題は、すでに米国勢調査事務所のサイトがフラッシュを公開していることで、単純な調査結果をマッピングしただけでは本家にさえ劣ることになりかねない。公的機関には立場上できない視点で何らかの発見を示さないと勝ち目はない。
とはいえ、国会議員の議席配分(apportionment)というテーマも境取りされている。
しかし、さすがアメリカ。全ての州の調査区（基本的はカウンティー）のシェープファイル（MAF/TIGER database）が公開されている。
国勢調査局：American FactFinder
国連水の日でビジュアル化コンテスト
世界の水問題に関する記者、学者などのネットワーク「Circle of Blue」とVisualizing.orgが、22日の「国連水の日」に向けてビジュアル化コンテストを開いている。締め切りは3月15日、結果発表は22日。賞金はGEから5000ドル。
Circle of Blue:The Visualizing Challenge
基本的なデータをGoogleFusionTableで提供しているのが画期的。ただし、使えるデータがこれに限られる訳ではない。
The Google Public Data Explorer makes large datasets easy to explore, visualize and communicate.
Circle of Blue:The Visualizing Challenge
- テーマは「都市化と衛生」で
- 都市の水とインフラ能力の関係
- 都市の水供給への地球温暖化のインパクト
- 都市水供給のシステムと水源
- 水の質と価格設定
- 水とエネルギーと食料と気候の関係
- イノベーションなど
- 安全な水へのアクセスと、教育やGDPとの関係
- 五大湖周辺の気候変動マップ
- 都市の水供給：大都市の水供給のライブデータ
- ヒマラヤの氷河が解けるとアジアの水はどうなるか
- 病気と水の関係
基本的なデータをGoogleFusionTableで提供しているのが画期的。ただし、使えるデータがこれに限られる訳ではない。
 Google Fusion Tables is a modern data management and publishing web application that makes it easy to host, manage, collaborate on, visualize, and publish data tables online. | |
| |
The Google Public Data Explorer makes large datasets easy to explore, visualize and communicate.
バークレーの国勢調査ワークショップ
Knight Digital Media Centerで2010年12月に開かれた国勢調査ワークショップの様子が公開されている。
データジャーナリズムの最先端を引っ張る人たちで、「とにかく作れ」という実践主義と「大量の本を買ってきて新しい手法を開拓する」という独学主義が印象的だ。
Shan Carter(NYTimes)：Processingを使った投球マップの解説など。「100個つくって最良のものを出せ」と電通のコピーライターのようなアドバイスをしている。
Geoff Mcghee(Stanford Fellow):物語のあるグラフィックスについて。
ビジュアル化ツールの比較表。
データジャーナリズムの最先端を引っ張る人たちで、「とにかく作れ」という実践主義と「大量の本を買ってきて新しい手法を開拓する」という独学主義が印象的だ。
Shan Carter(NYTimes)：Processingを使った投球マップの解説など。「100個つくって最良のものを出せ」と電通のコピーライターのようなアドバイスをしている。
Geoff Mcghee(Stanford Fellow):物語のあるグラフィックスについて。
ビジュアル化ツールの比較表。
ビジュアル化のフレームワーク:Protovis1
ProtovisはStanford Visualization GroupのMike BostockとJeff Heerによって提案されたビジュアル化フレームワーク。JavascriptとSVGで動くのでiPadなどにも使える。（むしろ、SVGを生成するJavascriptのライブラリと考えた方が正確）
宣言型（declarative）な記述方法に慣れる必要がある。Areas、Bars、Dots、Images、Labels、Lines、Rules、Wedges、Anchors、Colors、Data、Scalesという部品を次々に加えて、望むグラフを作る。すべての関数がオブジェクトを返すので、メソッドを連鎖させることができる。また、追加されたMarkは既存Markの性質を受け継ぐので、繰り返し設定する必要がない。
ただし、このフレームワークがすごいのはこれから。
宣言型（declarative）な記述方法に慣れる必要がある。Areas、Bars、Dots、Images、Labels、Lines、Rules、Wedges、Anchors、Colors、Data、Scalesという部品を次々に加えて、望むグラフを作る。すべての関数がオブジェクトを返すので、メソッドを連鎖させることができる。また、追加されたMarkは既存Markの性質を受け継ぐので、繰り返し設定する必要がない。
| グラフのベースになるクラス。めんどくさいことに、ここに追加される立場のpv.Barとpv.Markから継承している属性が多数ある。実際にはBarを継承したオブジェクト（基本的にsvgのrectangle）のコンテナに過ぎないからだ。Protovisは必ず１つ以上のPanel(root)を要求する。root.render()を最後に呼ばなければならない。 | |
| 属性 | 関数 |
| canvas,children, defaults, overflow, transform pv.BarからfillStyle, height, lineWidth, strokeStyle, width pv.Markからbottom, childIndex, cursor, data, events, index, left, parent, proto, reverse, right, root, scale, title, top, type, visible | add(type),anchor(name) pv.MarkからanchorTarget, def, event, extend, margin, mouse, render |
var obj = new pv.Panel().width(280) .height(200).fillStyle(rgb(0, 0, 255)) .root.render(); | |
| この結果、以下のようなSVGが挿入される。 <svg font-size="10px" font-family="sans-serif" fill="none" stroke="none" stroke-width="1.5" width="200" height="200"><rect width="200" height="200" fill="rgb(0,0,255)"> </rect> </svg> | |
var obj = new pv.Panel() .width(150) .height(150) .add(pv.Bar) .data([1, 1.2, 1.7, 1.5, .7]) .bottom(0) .width(20) .height(function(d) d * 80) .left(function() this.index * 25) .root.render(); | |
| この結果、以下のようなSVGが挿入される。 <svg font-size="10px" font-family="sans-serif" fill="none" stroke="none" stroke-width="1.5" width="150" height="150"><g><rect y="70" width="20" height="80" fill="rgb(31,119,180)"></rect><rect x="25" y="54" width="20" height="96" fill="rgb(31,119,180)"></rect><rect x="50" y="14" width="20" height="136" fill="rgb(31,119,180)"></rect><rect x="75" y="30" width="20" height="120" fill="rgb(31,119,180)"></rect><rect x="100" y="94" width="20" height="56" fill="rgb(31,119,180)"></rect></g></svg> | |
| pv.Markから継承している属性が多数ある。widthなど4つを指定しなければならない。 | |
| 属性 | 関数 |
| defaults, height, width, lineWidth, fillStyle, strokeStyle pv.BarからfillStyle, height, lineWidth, strokeStyle, width pv.Markからbottom, childIndex, cursor, data, events, index, left, parent, proto, reverse, right, root, scale, title, top, type, visible | add(type),anchor(name) pv.Markからadd, anchor, anchorTarget, def, event, extend, margin, mouse, render |
var obj = new pv.Panel() .width(150) .height(150) .add(pv.Bar) .data(["red", "orange", "yellow", "green", "blue", "purple"]) .left(0) .right(0) .height(25) .top(function() this.index * 25) .fillStyle(function(d) d) .root.render(); | |
| この結果、以下のようなSVGが挿入される。 <svg font-size="10px" font-family="sans-serif" fill="none" stroke="none" stroke-width="1.5" width="150" height="150"><g><rect width="150" height="25" fill="rgb(255,0,0)"></rect><rect y="25" width="150" height="25" fill="rgb(255,165,0)"></rect><rect y="50" width="150" height="25" fill="rgb(255,255,0)"></rect><rect y="75" width="150" height="25" fill="rgb(0,128,0)"></rect><rect y="100" width="150" height="25" fill="rgb(0,0,255)"></rect><rect y="125" width="150" height="25" fill="rgb(128,0,128)"></rect></g></svg> | |
var obj = new pv.Panel() .width(150) .height(150) .add(pv.Bar) .data([[0, 1], [.5, 1.2], [.9, 1.7], [.2, 1.5], [.7, 2.2]]) .height(20) .bottom(function() this.index * 25) .width(function(d) (d[1] - d[0]) * 50) .left(function(d) d[0] * 50) .root.render(); | |
| この結果、以下のようなSVGが挿入される。 <svg font-size="10px" font-family="sans-serif" fill="none" stroke="none" stroke-width="1.5" width="150" height="150"><g><rect y="130" width="50" height="20" fill="rgb(31,119,180)"></rect><rect x="25" y="105" width="35" height="20" fill="rgb(31,119,180)"></rect><rect x="45" y="80" width="40" height="20" fill="rgb(31,119,180)"></rect><rect x="10" y="55" width="65" height="20" fill="rgb(31,119,180)"></rect><rect x="35" y="30" width="75.00000000000001" height="20" fill="rgb(31,119,180)"></rect></g></svg> | |
| pv.Mark:抽象クラス。後続するAreaなどの基盤になっているだけで、カスタムマークを作るときしか使わない。 | |
| 属性 | 関数 |
| bottom,left,childIndex,cursor,data,defaults,events, index,parent,proto,reverse,root,scale,title,visible | add(type),anchor(name),anchorTarget(), def(name, v),event(type, handler) extend(proto),margin(n),mouse(),render() |
| pv.Area:上下２本の線で囲まれたAreaChartで使う。bottomとheightを指定してやればいい。 | |
var obj = new pv.Panel() .width(150) .height(150) .add(pv.Area) .data([[0, 1], [.5, 1.2], [.9, 1.7], [.5, 1.5], [.4, .7], [.3, .5], [.1, .2]]) .bottom(function(d) d[0] * 80) .height(function(d) (d[1] - d[0]) * 80) .left(function() this.index * 25) .root.render(); | |
| セグメント化できる。 var obj = new pv.Panel() .width(150) .height(150) .add(pv.Area) .segmented(true) .data([1, 1.2, 1.7, 1.5, .7, .5, .2]) .bottom(0) .height(function(d) d * 70) .left(function() this.index * 20 + 15) .fillStyle(function(d) "hsl(" + (d * 180) + ",50%,50%)") .root.render(); | |
| 内挿もしてくれる。 var obj = new pv.Panel() .width(150) .height(150) .add(pv.Area) .data([1, 1.2, 1.7, 1.5, .7, .5, .2]) .bottom(0) .height(function(d) d * 80) .left(function() this.index * 20 + 15) .interpolate("cardinal") .root.render(); | |
| pv.Bar:省略 | |
| pv.Dot:点というより円 | |
var obj = new pv.Panel() .width(150) .height(150) .add(pv.Dot) .data([[.1, 1, .4], [.5, 1.2, .3], [.9, 1.7, .1], [.4, 1.5, 1], [.3, 1.4, 4], [.7, 2.2, 1]] .sort(function(a, b) b[2] - a[2])) .left(function(d) d[0] * 100) .bottom(function(d) d[1] * 50) .size(function(d) d[2] * 200) .strokeStyle("white") .fillStyle("rgba(30, 120, 180, .4)") .root.render(); | |
var obj = new pv.Panel() .width(150) .height(150) .add(pv.Dot) .data([1, 1.2, 1.7, 1.5, .7, .2]) .bottom(function(d) d * 80) .left(function() this.index * 25 + 10) .add(pv.Rule) .height(function() this.proto.bottom() - 5) .bottom(0) .root.render(); | |
| pv:Line:折れ線 | |
var obj = new pv.Panel() .width(150) .height(150) .add(pv.Line) .data([1, 1.2, 1.7, 1.5, .7, .5, .2]) .bottom(function(d) d * 80) .left(function() this.index * 20 + 15) .add(pv.Dot) .root.render(); | |
| Areaと同様、セグメントと内挿が用意されている。 var obj = new pv.Panel() .width(150) .height(150) .add(pv.Line) .data([1, 1.2, 1.7, 1.5, .7, .5, .2]) .bottom(function(d) d * 80) .left(function() this.index * 20 + 15) .interpolate("step-after") .root.render(); | |
| 起点に戻れば多角形になる。 var obj = new pv.Panel() .width(150) .height(150) .add(pv.Line) .data(pv.range(0, 2 * Math.PI, .01)) .left(function(d) Math.cos(d) * (Math.cos(d * 5) + 5) * 10 + 75) .top(function(d) Math.sin(d) * (Math.cos(d * 5) + 5) * 10 + 75) .fillStyle("orange") .root.render(); | |
| pv.Wedge:扇もしくはドーナツの一部 | |
var data = [1, 1.2, 1.7, 1.5, .7], sum = pv.sum(data); var vis = new pv.Panel() .width(150) .height(150); vis.add(pv.Wedge) .data(data) .left(75) .bottom(75) .innerRadius(50) .outerRadius(70) .angle(function(d) d / sum * 2 * Math.PI); vis.render(); | |
var obj = new pv.Panel() .width(150) .height(150) .add(pv.Wedge) .data(pv.normalize([1, 1.2, 1.7, 1.5, .7])) .left(75) .bottom(75) .innerRadius(51) .outerRadius(70) .angle(function(d) d * 2 * Math.PI) .add(pv.Wedge) .data(pv.normalize([.3, .2, 1, 1.5, .4])) .innerRadius(30) .outerRadius(49) .root.render(); | |
| 開始角や終了角を指定することもできる。 var obj = new pv.Panel() .width(150) .height(150) .add(pv.Wedge) .data([1, 1.2, 1.7, 1.5, .7]) .left(75) .bottom(75) .startAngle(Math.PI) .innerRadius(function() this.index * 10 + 20) .outerRadius(function() this.index * 10 + 30) .angle(function(d) d * 2) .root.render(); | |
| pv.Rule:軸やグリッドに使う線 | |
var vis = new pv.Panel() .width(150) .height(150); vis.add(pv.Bar) .data([1, 1.2, 1.7, 1.5, .7]) .bottom(10) .width(20) .height(function(d) d * 70) .left(function() this.index * 25 + 15); vis.add(pv.Rule) .data(pv.range(0, 2, .5)) .bottom(function(d) d * 70 + 9.5) .strokeStyle(function(d) d ? "white" : "black"); vis.render(); | |
| 目盛りも同様。 var vis = new pv.Panel() .width(150) .height(140) .bottom(10); vis.add(pv.Bar) .data([1, 1.2, 1.7, 1.5, .7]) .bottom(0) .width(20) .height(function(d) d * 70) .left(function() this.index * 25 + 15); vis.add(pv.Rule) .bottom(0.5) .add(pv.Rule) .data(pv.range(.5, 2, .5)) .bottom(function(d) d * 70 + .5) .left(0) .width(5); vis.render(); | |
| pv.Image:外部画像 | |
| pv.Label:文字列 | |
| 目盛りの作り方 var vis = new pv.Panel() .width(150) .height(150); vis.add(pv.Bar) .data([1, 1.2, 1.7, 1.5, .7]) .bottom(10) .width(20) .height(function(d) d * 70) .left(function() this.index * 25 + 24); vis.add(pv.Rule) .data(pv.range(4)) .bottom(function(d) d / 2 * 70 + 10) .left(24) .right(6) .strokeStyle(function(d) (d > 0) ? "white" : "black") .add(pv.Label) .textAlign("right") .textBaseline("middle") .text(function(d) (d / 2).toFixed(1)); vis.render(); | |
| 個別値の表示１ var vis = new pv.Panel() .width(150) .height(150); var bar = vis.add(pv.Bar) .data([1, 1.2, 1.7, 1.5, .7, .2]) .bottom(0) .width(20) .height(function(d) d * 80) .left(function() this.index * 25); bar.add(pv.Label) .top(function() bar.top()) .left(function() bar.left() + bar.width() / 2) .textAlign("center") .textBaseline("top") .textStyle("white"); vis.render(); | |
| 個別値の表示２ var data = [1, 1.2, 1.7, 1.5, .7], sum = pv.sum(data); var vis = new pv.Panel() .width(150) .height(150); var wedge = vis.add(pv.Wedge) .data(data) .left(75) .bottom(75) .outerRadius(70) .angle(function(d) d / sum * 2 * Math.PI); wedge.add(pv.Label) .left(function() 45 * Math.cos(wedge.midAngle()) + 75) .bottom(function() -45 * Math.sin(wedge.midAngle()) + 75) .textAlign("center") .textBaseline("middle"); vis.render(); | |
ただし、このフレームワークがすごいのはこれから。
ビジュアル化のフレームワーク:Protovis2
ProtovisがSVG生成以上の機能を持つのは以下の点。
by関数について:関数を直接渡すことができる
.height(pv.Scale.linear(0, 1).range(0, 480).by(function(d) d.score))
これは以下と等価
var y = pv.Scale.linear(0, 1).range(0, 480);
...
.height(function(d) y(d.score))
同様に以下のプロパティは右側に等価。
pv.index - function() this.index
pv.parent - function() this.parent.index
pv.child - function() this.childIndex
For example, the default fill color for bars is
例えば、
pv.Colors.category20().by(pv.parent)
| anchor:マークの位置を言葉で指定することができる | |
var vis = new pv.Panel() .width(150) .height(150); var area = vis.add(pv.Area) .data([1, 1.2, 1.7, 1.5, .7, .5, .2]) .bottom(10) .height(function(d) d * 60) .left(function() this.index * 20 + 10); area.anchor("top").add(pv.Dot) .fillStyle("green"); area.anchor("bottom").add(pv.Dot) .fillStyle("red"); vis.render(); | |
| 下向きに積み上げることができる。extend関数は継承を参照 var vis = new pv.Panel() .width(150) .height(150); var area = vis.add(pv.Area) .data([1, 1.2, 1.7, 1.5, .7, .5, .2]) .bottom(function(d) d * 10 + 55) .height(function(d) d * 30) .left(function() this.index * 22 + 10) .fillStyle(pv.Colors.category20().by(pv.child)); area.anchor("bottom") .extend(area) .add(pv.Area) .data([.4, .2, .8, 1.2, 1.5, 1.1, .8]); vis.render(); | |
| anchorがあるのはMarkの種類によって異なる。 var vis = new pv.Panel().width(150).height(150); var dot = vis.add(pv.Dot).left(75).top(75).size(1000); dot.anchor("top").add(pv.Label).text("top"); dot.anchor("left").add(pv.Label).text("left"); dot.anchor("right").add(pv.Label).text("right"); dot.anchor("bottom").add(pv.Label).text("bottom"); dot.anchor("center").add(pv.Label).text("center"); vis.render(); | |
| Scale:数値変換関数。pv.Scale.linear, pv.Scale.root, pv.Scale.logは連続変換。pv.Scale.ordinalは離散値に変換する | |
var data = pv.range(100).map(Math.random), w = 250, h = 250, x = pv.Scale.linear(0, 100).range(0, w), y = pv.Scale.linear(0, 1).range(0, h), c = pv.Scale.linear(data).range("#1f77b4", "#ff7f0e"); var vis = new pv.Panel() .width(w) .height(h) .margin(20) .strokeStyle("#ccc"); vis.add(pv.Rule) .data(x.ticks()) .strokeStyle("#eee") .left(x) .anchor("bottom").add(pv.Label) .text(x.tickFormat); vis.add(pv.Rule) .data(y.ticks()) .strokeStyle("#eee") .bottom(y) .anchor("right").add(pv.Label) .text(y.tickFormat); vis.add(pv.Dot) .data(data) .left(function() x(this.index)) .bottom(y) .strokeStyle(c) .fillStyle(function(d) c(d).alpha(.2)); vis.render(); | |
var data = [1, 1.2, 1.7, 1.5, .7]; var vis = new pv.Panel() .width(150) .height(150); vis.add(pv.Wedge) .data(data) .left(75) .bottom(75) .innerRadius(50) .outerRadius(70) .angle(pv.Scale.linear(0, pv.sum(data)).range(0, 2 * Math.PI)); vis.render(); | |
| 対数軸の作り方 var data = pv.range(100).map(Math.random), w = 250, h = 250, x = pv.Scale.linear(0, 100).range(0, w), y = pv.Scale.log(0.01, 1).range(0, h), c = pv.Scale.log(data).range("#1f77b4", "#ff7f0e"); var vis = new pv.Panel() .width(w) .height(h) .margin(20) .strokeStyle("#ccc"); vis.add(pv.Rule) .data(x.ticks()) .strokeStyle("#eee") .left(x) .anchor("bottom").add(pv.Label) .text(x.tickFormat); vis.add(pv.Rule) .data(y.ticks()) .strokeStyle("#eee") .bottom(y) .anchor("right").add(pv.Label) .text(y.tickFormat); vis.add(pv.Dot) .data(data) .left(function() x(this.index)) .bottom(y) .strokeStyle(c) .fillStyle(function(d) c(d).alpha(.2)); vis.render(); | |
| 棒グラフの等幅配置する var categories = "ABCDEFGHIJK".split(""), data = categories.map(function(c) [c, Math.random()]), w = 160, h = 360, x = pv.Scale.ordinal(categories).splitBanded(0, w, 4/5), y = pv.Scale.linear(0, 1).range(0, h), c = pv.Colors.category19(categories); var vis = new pv.Panel() .width(w) .height(h) .margin(20) .strokeStyle("#ccc"); vis.add(pv.Bar) .data(data) .left(function(d) x(d[0])) .width(x.range().band) .bottom(0) .height(function(d) y(d[1])) .fillStyle(function(d) c(d[0])) .anchor("bottom").add(pv.Label) .textBaseline("top") .text(function(d) d[0]); vis.add(pv.Rule) .data(y.ticks()) .strokeStyle("rgba(255, 255, 255, .5)") .bottom(y) .anchor("right").add(pv.Label) .text(y.tickFormat); vis.render(); | |
by関数について:関数を直接渡すことができる
.height(pv.Scale.linear(0, 1).range(0, 480).by(function(d) d.score))
これは以下と等価
var y = pv.Scale.linear(0, 1).range(0, 480);
...
.height(function(d) y(d.score))
同様に以下のプロパティは右側に等価。
pv.index - function() this.index
pv.parent - function() this.parent.index
pv.child - function() this.childIndex
For example, the default fill color for bars is
例えば、
pv.Colors.category20().by(pv.parent)
ビジュアル化のフレームワーク:Protovis3
Protovisについて、OECDの統計担当Jerome Cukierが解説を書いている。
もっとも難しいデータ発生部分が重点的に解説されている。
Working with data in protovis – interlude: protovis nesting vs tableau
もっとも難しいデータ発生部分が重点的に解説されている。
- Arrays, arrays, how do they work?
- Multi-dimensional arrays, associative arrays and protovis
- Short interlude: what can be done with arrays in javascript?
- Reshaping complex arrays
- Working with layouts
Working with data in protovis – interlude: protovis nesting vs tableau
Appleが定期刊行物購読モデル
アップルが、TheDailyで採用した、AppStore経由で定期刊行物（ビデオ配信も含む）を配信するモデルを公表した（プレスリリース）。売り上げの30％を差し引く基本路線は変えないものの、新聞雑誌発行者がiTunesの枠外で獲得した読者（自らのHPや既存購読者）については、売り上げの分け前を求めない（認証も決済もしない）。ただし、アップルはiTunesの外部で提示する条件より有利、もしくは同等な条件でiTunesでも販売しなければならない。
契約者情報についても、読者の了解があった場合に限り、氏名・住所・郵便番号・メールアドレスを提供する。
すなわち、日経のiPhone版は存続できることになったが、iTunesでも4000円以下で販売しなければならなくなった。（毎月1200円も上納させられる）
アップルの立場では、30％はITunesでの集客（販売促進）と簡単決済（集金）の手数料だということで、当然の要求だと思う。
NYTimesが計画しているメーター式有料化が、AppStoreが認めていないTrial版にあたるのではないかという懸念もあるらしい。また、アップルがiPhone5で計画している「お財布ケータイ」機能との関係も注視されている。
いずれにしても、これほど配信に制約があるプラットフォームに新聞・雑誌が依存することは危険すぎるだろう。Flash＆Androidしかないような気がする。
契約者情報についても、読者の了解があった場合に限り、氏名・住所・郵便番号・メールアドレスを提供する。
すなわち、日経のiPhone版は存続できることになったが、iTunesでも4000円以下で販売しなければならなくなった。（毎月1200円も上納させられる）
- NYT：Apple Offers Subscriptions for All iPad Publications
- REFLECTIONS OF A NEWSOSAUR：The gotchas in Apple’s app-subscription plan
- Advertising Age:Apple's Steve Jobs Finally Makes iPad Subscription Offer to Wary Publishers
- NJL:What Apple’s new subscription policy means for news: new rules, new incentives, new complaints
アップルの立場では、30％はITunesでの集客（販売促進）と簡単決済（集金）の手数料だということで、当然の要求だと思う。
NYTimesが計画しているメーター式有料化が、AppStoreが認めていないTrial版にあたるのではないかという懸念もあるらしい。また、アップルがiPhone5で計画している「お財布ケータイ」機能との関係も注視されている。
いずれにしても、これほど配信に制約があるプラットフォームに新聞・雑誌が依存することは危険すぎるだろう。Flash＆Androidしかないような気がする。
アルジャジーラの時
アルジャジーラは11日、ムバラク大統領辞任を報道。数分間のライブ画像を流し、初めてキャスターがしゃべった。興奮で現在完了型を間違えているということは、要するにこんな英語達者なキャスターでもネイティブではないということだ。
NYTは女性のNadia記者がTwitterアカウントで現場の様子を報告するよう、アラビア語で呼びかけた。
25日から始まったエジプトの反政府デモは、27日にエルバラダイ氏帰国で一気に緊張が高まり、政府はインターネットの国際回線と携帯電話を停止。外国人特派員や観光客のカメラを没収して、強行制圧に備えた。
BBCの記者が治安部隊に屠殺用の鉄棒で殴られ、カメラを没収された。CNNも政府職員からカメラを没収されそうになった。AFPのカメラマンはメモリーカードを没収された。NBCなどもカイロ以外の都市からの情報が取れず、CNNは「バックアップ回線」を使わざるをえなかった。
そんな中で、アルジャジーラは２人のカイロ駐在記者を中心に、各地の電話レポートを交えて放送し続けた。アラビア語とイギリス風英語が機関銃のように話す記者は、なんというか、圧倒的だった。英語版ウェブTVのトラフィックは通常の200倍を記録した（45％はアメリカからだったらしい）。
CNNは駐在記者３人体制だが、FoxとNBCは特派員がいなかった。（急派したようだが、Foxにアラビア語が分かる記者なんているはずがない）
チュニジアと同様、FacebookやTwitterが連絡手段として使われたので、政府はインターネット回線を切断した。
その直前、NYTimesはSkypeでエジプトの女性ブロガーに質問している映像を記録した。ハイテク革命ならハイテク取材をしなければならない。
エジプト政府がネット回線を切ったのは、27日22時半ごろ（世界標準時）で、IPS10社のうち、１社を除き、段階的に閉鎖されたため、政府が（いきなり中継装置の電源を抜いたのではなく）予め切断手順を決めていて、電話で次々に切断を指示したと推測されている。
Trend Microのエンジニアは、エジプトのトップドメイン.egのDNSを切ったあと、（ipアドレスを直打ちされた場合に備えて）経路情報を交換するBGPを段階的に切断したと分析している。
唯一残ったISPはテレコムイタリアの運営する地中海ケーブルで接続されていたNoor社で、エジプト株式市場が （バックアップ回線で）使っていたため、意図的に維持されたという。
Telegraph:How Egypt shut down the internet
renesys:Egypt Leaves the Internet
NYTは女性のNadia記者がTwitterアカウントで現場の様子を報告するよう、アラビア語で呼びかけた。
25日から始まったエジプトの反政府デモは、27日にエルバラダイ氏帰国で一気に緊張が高まり、政府はインターネットの国際回線と携帯電話を停止。外国人特派員や観光客のカメラを没収して、強行制圧に備えた。
BBCの記者が治安部隊に屠殺用の鉄棒で殴られ、カメラを没収された。CNNも政府職員からカメラを没収されそうになった。AFPのカメラマンはメモリーカードを没収された。NBCなどもカイロ以外の都市からの情報が取れず、CNNは「バックアップ回線」を使わざるをえなかった。
そんな中で、アルジャジーラは２人のカイロ駐在記者を中心に、各地の電話レポートを交えて放送し続けた。アラビア語とイギリス風英語が機関銃のように話す記者は、なんというか、圧倒的だった。英語版ウェブTVのトラフィックは通常の200倍を記録した（45％はアメリカからだったらしい）。
CNNは駐在記者３人体制だが、FoxとNBCは特派員がいなかった。（急派したようだが、Foxにアラビア語が分かる記者なんているはずがない）
チュニジアと同様、FacebookやTwitterが連絡手段として使われたので、政府はインターネット回線を切断した。
その直前、NYTimesはSkypeでエジプトの女性ブロガーに質問している映像を記録した。ハイテク革命ならハイテク取材をしなければならない。
エジプト政府がネット回線を切ったのは、27日22時半ごろ（世界標準時）で、IPS10社のうち、１社を除き、段階的に閉鎖されたため、政府が（いきなり中継装置の電源を抜いたのではなく）予め切断手順を決めていて、電話で次々に切断を指示したと推測されている。
Trend Microのエンジニアは、エジプトのトップドメイン.egのDNSを切ったあと、（ipアドレスを直打ちされた場合に備えて）経路情報を交換するBGPを段階的に切断したと分析している。
唯一残ったISPはテレコムイタリアの運営する地中海ケーブルで接続されていたNoor社で、エジプト株式市場が （バックアップ回線で）使っていたため、意図的に維持されたという。
Telegraph:How Egypt shut down the internet
renesys:Egypt Leaves the Internet
ナイト財団が編集局に技術者派遣
ナイト財団が250万ドルを使って、FireFoxを作っているMozilla財団の協力でニュース部門の技術革新コンテストを開き、優秀者をBBCやBostonGlobe、英ガーディアンや独ツァイトの編集局に派遣する。
ナイト財団：Mozilla, Knight create $2.5M initiative to embed technologists in newsrooms
ナイト財団は、大学のジャーナリズム研究者を取材現場に派遣したり、現場記者を大学に派遣したりする交換プロジェクトを続けてきたが、今回はその技術者版。
AOLが7日、新興ニュースサイトのHuffington Postを3億1500万ドルで買収することに合意した。買収するとはいえ、主宰のHuffington女史と編集長契約を結び、ニュースサイト部門の経営を委ねるので、換金を手伝っただけのようにもみえる。
WSJ：AOL Makes an Expensive Bet With Huffington Post Deal
![[HUFF-jump]](http://si.wsj.net/public/resources/images/MK-BJ713A_HUFFj_NS_20110207180003.jpg)
12月のユニークユーザー数上位10サイトすでに買収したEngadgetやTechCrunchの運営も委ね、少数のプロの編集者とブロガー＋新人記者という組み合わせを適用する。
AOLのホームページの広告は１日20万ドル（2000万円）で、ハフィントンポストは10万ドル前後。AOLは買収にも関わらず広告収入が激減していた。
AOLは、Mark Burnettというリアリティー番組のプロデューサーと組んで格安のコメディー動画を制作しようとしている。
Huffington Postは今年5000万ドルの収入があり、黒字に転換する公算。しかし、買収価格は「高すぎる」という声も多い。主要株主のHuffington女史、共同創業者のケネス・レーラー、ソフトバンク・キャピタルやオーク・インベストメントが過半数を握っていた。
ナイト財団：Mozilla, Knight create $2.5M initiative to embed technologists in newsrooms
ナイト財団は、大学のジャーナリズム研究者を取材現場に派遣したり、現場記者を大学に派遣したりする交換プロジェクトを続けてきたが、今回はその技術者版。
AOLがハフィントンポストを買収
AOLが7日、新興ニュースサイトのHuffington Postを3億1500万ドルで買収することに合意した。買収するとはいえ、主宰のHuffington女史と編集長契約を結び、ニュースサイト部門の経営を委ねるので、換金を手伝っただけのようにもみえる。
WSJ：AOL Makes an Expensive Bet With Huffington Post Deal
AOLのホームページの広告は１日20万ドル（2000万円）で、ハフィントンポストは10万ドル前後。AOLは買収にも関わらず広告収入が激減していた。
AOLは、Mark Burnettというリアリティー番組のプロデューサーと組んで格安のコメディー動画を制作しようとしている。
Huffington Postは今年5000万ドルの収入があり、黒字に転換する公算。しかし、買収価格は「高すぎる」という声も多い。主要株主のHuffington女史、共同創業者のケネス・レーラー、ソフトバンク・キャピタルやオーク・インベストメントが過半数を握っていた。
生物多様性の可視化コンテスト
国連の研究調査グループ「ビジネスのための生態系と生物多様性の経済学」(The Economics of Ecosystems and Biodiversity for Business, TEEB)が、visualizing.orgと共同で「自然の価値」に関するインタラクティブ・ビジュアル化コンテストを開いている。締め切りは21日で、賞金5000ドル。
TEEBは、生物多様性喪失による損失を経済学的アプローチで評価しているグループで、去年名古屋であった生物多様性会議（CPO10）に報告書を出している。コンテストのテーマはその報告書のデータを新しい可視化手法で表現すること。
visualizing.org:TEEB Visualizing the Value of Nature Challenge
TEEB:Visualise the Value of Nature
参考データはにある。ビデオ以外ならHTML+Javascriptでもフラッシュでも何を使っても可。
TEEBは、生物多様性喪失による損失を経済学的アプローチで評価しているグループで、去年名古屋であった生物多様性会議（CPO10）に報告書を出している。コンテストのテーマはその報告書のデータを新しい可視化手法で表現すること。
visualizing.org:TEEB Visualizing the Value of Nature Challenge
TEEB:Visualise the Value of Nature
参考データはにある。ビデオ以外ならHTML+Javascriptでもフラッシュでも何を使っても可。
Unequal pair of Dice 日本語版
以下はVisualizing.orgとGEによるグラフィックスコンテスト「RCMI Data Visualization Challenge on Health Disparity」で優勝したフラッシュ作品の日本語訳。
- Visualizing.org:Visualizing Health Disparities
- GE Reports:Depicting Race & Disease in Visualizing.org’s Challenge (Graphic)
This content use Flash. Please install the latest version of Adobe Flash Player
ある病気で死ぬかどうかはサイコロを振るような偶然だろうか？
その通りかもしれない。
問題は、そのサイコロが、あなたに不利に作られているかもしれないということだ。
確率過程の可視化
10万人のうち、１年間にある病気で死ぬ人は何人だろうか？10個のサイコロを同時に振った時、何個の１が出るだろうか？
この２つの問題は、統計的には同じ構造、二項分布で表すことができる。
10個のサイコロの１を数えることは簡単に思い描くことができる。しかし、1万の面があるようなサイコロが10万個も同時に振られるような事態は想像できない。
この確率過程を可視化するため、ある病気で死ぬ確率のグラフを30個のサイコロを投げたときの確率のグラフに投影してみる。
たとえば、１年間に乳がんで死亡する黒人女性は10万人あたり31.2人、アジア太平洋系女性（API）は12.1人だ。つまり、予想死亡率は0.0312%と0.0121%ということになる。このような確率の場合、無作為に選んだ10万人の中で１年に死亡する人は、以下のグラフのようにばらつきがあるはずだ。（たまたま死ぬ人が多い10万人のグループもあるし、たまたま少ないグループもある）
比較するグループの死亡率の比率を維持したまま、病気の実際の分布をサイコロによる可視化されたシミュレーションの分布に対応させるため、このフラッシュでは、平均からの散らばり（分散）が調整されている。
望みの確率のサイコロ
細工されたサイコロの目がどのような確率で出るのかを計算で求めるのは難しい。だから、英オックスフォードの研究者は多くのコンピュータでサイコロ振りをシミュレートして統計データを集めようとしたこともある。.このフラッシュでは、20個の直方体サイコロを同時に振る物理シミュレーションを行っている。事前の実験から、1）物理計算エンジンには非対称になるクセがある（例えば、１の方が正反対の面にある６よりも出やすい） 2)同時に投げた場合は、あるサイコロが別のサイコロを”倒す”影響がかなりある、などの問題が分かった。
このため、全く同じ設定のサイコロ投げフラッシュを作り、自分のブログに貼付けて、結果を送信してもらうことにした。得られた確率分布は以下のようになった。
この結果、このフラッシュでは経験的な公式として以下の計算式を使うことにした。(x:height and y:width are relative to z:depth ):
p(x,y) = 10(x-0.35)(y-0.35)/8(x2+y2+1) , 0.25 < x,y < 2.5
略号とデータ
API:アジア系太平洋島嶼部住民AI/AN:インディアン系とアラスカ原住民系
The Dailyが創刊
News Corpが100人以上の社員を投入して開発してきたiPad専用新聞が2日に創刊された。NYで行われたお披露目の発表会は動画で生中継されたが、悲しいくらい地味で、怪しい雲行きを暗示していた。
１面は雑誌風。週0.99ドル、年間39.99ドル。当面アメリカのみ。
めくり方は想像通り。
タッチ操作で360度パノラマ写真。
当然ビデオも組み込み。
カバーフローでページを読み飛ばしできる。
女性アナウンサーが「きょうのニュース(wrap up)」を読み上げてくれる。
ファッション面の写真をクリックするとアクセサリーなどの商品情報が出る。
芸能人インタビュー時期にはtwitterのアカウントを覗ける機能もある。
スポーツ欄は、各チームの統計データ面などがあり、登録しておけば、それが毎日表示されるようになる。
記事はFacebookやtwitterにも投稿できる。DailyのWeb版はないので、記事をそのまま貼付けることになる。
大量データをどう扱ったか
英ガーディアンのデータブログが、ウィキリークス本の発売に合わせて、膨大な電子データをどのように処理したかを報告している。
すでに出ている話で、つまるところ、出版プロモーションにデータ部門も参加したかっただけかもしれない。
Guardian DataBlog:Wikileaks data journalism: how we handled the data
データ処理チームには、国会議員経費不正請求事件の経験があった。目的は、１）記者がデータを探しやすいこと、２）データを分析すること、３）読者に公開すること。
１）アフガン文書
アフガン文書では、軍事作戦を記録したSIGACTSデータがエクセルシートで92201行あった。この時はWikileaksが独自公開していたので、我々は情報提供者の個人名などを明かさないように気をつけた。担当したのはDavid Leigh記者とNick Davies記者。
我々が注目したのはIED(手製爆弾)で、データにフィルターをかけて抽出したが、それでも襲撃関係で7500件、爆弾除去関係で8000件あった。このデータは時系列で変化していく様子を調べた。
死傷者データは不正確かつ不十分な場合が多く、NATOの記録と照らし合わせて、正確度を調べた。
２）イラク文書
すでに出ている話で、つまるところ、出版プロモーションにデータ部門も参加したかっただけかもしれない。
Guardian DataBlog:Wikileaks data journalism: how we handled the data
データ処理チームには、国会議員経費不正請求事件の経験があった。目的は、１）記者がデータを探しやすいこと、２）データを分析すること、３）読者に公開すること。
１）アフガン文書
我々が注目したのはIED(手製爆弾)で、データにフィルターをかけて抽出したが、それでも襲撃関係で7500件、爆弾除去関係で8000件あった。このデータは時系列で変化していく様子を調べた。
死傷者データは不正確かつ不十分な場合が多く、NATOの記録と照らし合わせて、正確度を調べた。
２）イラク文書