日本がデータビジュアライゼーションにもたらしたもの

この記事は、各種チャートのカタログサイトThe Data Visualisation Catalogueのブログ記事の日本語訳です。翻訳にあたっては、訳注やリンクなどを補いました。原著者の許諾を得て公開しています。転載はご遠慮ください。

2023-02-01更新 本翻訳の訳注での指摘を受けて、原記事を修正していただきました。そのため、一部訳注を削除しました。

Original post: Japanese Contributions to Data Visualisation
by Severino Ribecca, The Data Visualisation Catalogue Blog
Published: December 29, 2021
Translation: SUGIMOTO Tatsuo

はじめに

欧米のデータビジュアライゼーションコミュニティの人たちは、データビジュアライゼーションを欧米を中心に生まれた分野だと考えているでしょう。データビジュアライゼーションの歴史上、主要な実践者を挙げるとすれば、ミナール(Charles Joseph Minard)やナイチンゲールFlorence Nightingale)、プレイフェアWilliam Playfair )、デュパン(Charles Dupin )といった名前が思い浮かびます。

ところが、日本人が19世紀から市場取引を支援するためにチャートを使っていたことは、あまり知られていません。20世紀の日本においても、美しく複雑なビジュアライゼーションやインフォグラフィックが作られています。

20世紀の日本のビジュアライゼーション

1926年の作品例に、長瀬鳳輔(ながせほうすけ)による『世界各国興亡表』と題されたチャートがあります。〔京都大学吉田南総合図書館所蔵〕

japanese data visualisation

1935年、東京市は、当時の東京市の統計地図である『東京市勢圖表』を刊行しました。これは、大橋光吉(おおはしこうきち)率いる共同印刷株式会社が印刷しています(デザイナーは不明)。この図表は、アイソタイプを使って、戦前の東京を詳細に描いた素晴らしい地図からなります。デイビッド・ラムゼイ(David Rumsey)が大橋の作品をオンラインで公開していて、ここで詳細を見ることができます。

japanese data visualisation
japanese data visualisation
japanese data visualisation
japanese data visualisation

これまで、データビジュアライゼーションの歴史研究では、欧米各国の制作者の作品を中心に記録されてきました。この問題は、データ可視化史への関心が最近の現象であり、研究者がほとんどいないといった、いくつかの要因によって起こっています。

言語も研究の障壁になっています。日本語は、特に英語圏の人びとにとっては習得がむずかしい言語です。日本のデータビジュアライゼーションの歴史を研究するには、日本出身者や日本在住の日本語が堪能な人の協力が必要です。

古いグラフを調べるには、図書館や公文書館に出向いて資料を渉猟する物理的な時間もかかります。インターネットとGoogle翻訳で調べるだけでは不十分なのです。

そうした制約がありながらも、なんとか日本の才能について価値のある情報を発見して、皆さんにお伝えすることできます。それでは、日出ずる国で生まれたいくつかのタイプのビジュアライゼーションを見ていきましょう。

ローソク足

(キャンドルスティックチャート)

このタイプの視覚化は、取引や時系列の値動きの分析によく使われているツールで、金融取引のプラットフォーム、アプリ、ウェブサイトでよく目にします。ローソク足は、このチャートに関連する酒田市にちなんで「酒田罫線法」としても知られています。

japanese data visualisation

ローソク足は、1991年にスティーブ・ニソン(Steve Nison)が著書『Japanese Candlestick Charting Techniques』で広めるまで、西洋ではほとんど知られていませんでした(もっともニソンは、1989年にローソク足を紹介したと述べています*)。
* Japanese Candlestick Charting Techniques, Second Edition, p. 5

本間宗久(ほんま そうきゅう〈むねひさ〉)は山形県酒田市の米穀商で、「ローソク足の生みの親」とされています。しかし、本間がこのチャートを使っていたという証拠は見つかっていません。ローソク足や日本のチャートについて深く研究しているスティーブ・ニソンは、次のように言っています。

ローソク足の起源ははっきりしないが、明治時代の初期に使われはじめたようだ。
 
– Beyond Candlesticks, 1994, p. 18

本間は1724年に生まれ1803年には没しているため、この時期は彼の死後ずっと後のことです。また、ニソンは次のようにも言っています。

私たちが今日知っているローソク足と関連技術は、何世代にもわたり何人かの人たちが改良を積み重ねてきた可能性が高い。
 
– Beyond Candlesticks, 1994, p. 14

したがって、本間が開発した原理は、ローソク足の誕生に多大な影響を与えてはいるものの、今のところ、たったひとりの「発明者」を示す証しはありません。

ローソク足については、こちらのページで詳しく解説しています。

いかり足

(アンカーチャート)

この視覚化は、ローソク足の前身と考えられますが、あまり知られていません。

japanese data visualisation

ニソンは、いかり足の背景と構造を説明しています。

いかり足は、錨(いかり)のように見えるので、この名前がついた。このチャートは、享保年間(1716年~)に使われはじめ、当時の米穀商が港町で待ち合わせしていたことに由来していると言い伝えられている。

いかり足は、チャートの進化において重要な出来事だった。このチャートでは、始値が加えられ、始値、高値、安値、終値を示すチャートが作成された。日本のチャートの独自性でもあるが、始値と終値の関係を絵で表したところが重要である。いかりの縦線の上端と下端は、場の高値と安値である。いかりの水平線は、始値である。いかりの矢印は、終値である。終値が始値より高ければ、矢印は上向きになり、終値が低ければ、矢印は下向きになる。

– Beyond Candlesticks (1994), p.17

ニソンの書籍以外で、ネット上でいかり足の例を見つけることはできませんでした。この視覚化の実例を教えてもらえると嬉しいです。 

〔訳注:いかり足は現在では使われていないようですが、証券関係の書籍などに登場していることを確認しました。〕

カギ足

カギチャート

これもトレーディングツールとして開発された日本の視覚化です。ただローソク足チャートとは異なり、カギ足は時間軸を無視するため、ノイズが少なく、価格の大きな変動だけに注目することができます。視覚的にもカギ足は、ローソク足とは全く異なる構造をしています。

japanese data visualisation

カギ足の起源について、スティーブ・ニソンは次のように述べています。

カギ足は、1870年代に日本の株式市場が取引を開始した頃に作られたと考えられている。

カギ足という名前の由来は、日本語の「鍵」で、頭がL字型になっている昔ながらの鍵のことだ。このため、一部の日本人はカギ足のことをキーチャートと呼んでいる。カギ足は、値幅チャート、フックチャート、デルタチャート、ストリングチャートなどの名前でも呼ばれる。

– Beyond Candlesticks (1994), p. 213

カギ足については、こちらのページで詳しく解説しています。

練行足

レンコチャート

カギ足と同様に、練行足も取引のためのツールです。時間軸を無視し、ローソク足でよく見られるノイズを除去します。練行足は、互いに45度の角度で配置した一連のカラーブロックを使って、値動きを視覚化しています。

japanese data visualisation

Source: Investopedia

「練行」という名前の由来について、ニソンは次のように説明しています。

レンコチャートを形成する個々のブロックは、レンガと呼ばれることもある(レンコという言葉は日本語の「煉瓦(れんが)」から来ているのかもしれない)。
 
– Beyond Candlesticks (1994), p. 197

練行足については、次の記事をご覧ください。

新値三本足

スリーラインブレイクチャート

この取引ツールも、スティーブ・ニソンが日本から輸入したもので、ローソク足と練行足の中間にあたるものです。

japanese data visualisation

Source: Stockcharts

japanese data visualisation

Source: Financial-Bet Spreading.com

新値三本足についての詳細はこちらをご覧ください。

パレート図と日本

これまで紹介してきたチャートとは異なり、この視覚化は市場分析や取引のためのものではありません。パレート図は、品質管理や最適化のための意思決定ツールとして使用されています。パレート図は、ある工程の要因を減らして改善することを目的とする場面でも採用することができます。

japanese data visualisation

ところで、この視覚化と日本にどんな関係があるのでしょうか。パレート図は、イタリアの土木技師、社会学者、経済学者、政治学者、哲学者であるパレートVilfredo Pareto)が考案したのではないのでしょうか。

実はそうではないのです。ただ、彼が大きな影響を与えたことは間違いありません。

パレートはエリート論の発展に貢献したことで知られ、イタリアの富の80%は人口の約20%によって所有されていると述べています。

経営コンサルタントのジュラン(Joseph M. Juran)は、この政治学の見解を品質管理に応用できることを発見しました。そしてジュランは、「80:20の法則」とも呼ばれる「パレートの法則」という言葉を提案し、パレートの発見を次のように再定義したのです。

「ある状況やシステムから得られる出力の80%は、入力の20%によって決定される」。

ジュランは、この概念を品質管理の文脈で展開したことで知られ、パレート図の発明者とも言われています。しかし、そうではないという意見もあり、今日私たちが「パレート図」として知っている棒グラフと累積折れ線グラフの組み合わせを最初に発表したのは、ジュランではないという主張が提示されています。

そこで代わりに評価されているのが、日本の組織論者で工学博士の石川馨(いしかわかおる)です。石川の編著書『現場のQC手法』(1968年)には、パレート図の例がはじめて掲載されています。石川は、フィッシュボーン図を開発したことでも知られています。

japanese data visualisation

〔訳注:文中に挙げられている書籍に掲載されているパレート図と特性要因図を以下に掲載した。出典:FQC誌編集委員会,1968,『現場のQC手法:やさしい解説と演習』日科技連出版社,p.41, 26.〕

パレート図
特性要因図

ジュランは生涯にわたりたびたび日本を訪れ、石川と親交があったことから、彼がパレート図をまったくのゼロから着想したとはおもえません。ローソク足と同じように、パレート図もパレート、ジュラン、ローレンツ(Max Otto Lorenz)、石川馨が積み重ねた努力の末に完成したものなのです。

ソーシャルな可視化 2022年度「ネットワーク演習II」オンライン成果集

2022年度のネットワーク演習IIでは、パーソナルな可視化、ソーシャルな可視化に取り組みました。前半のパーソナルな可視化は手書きでZINEにまとめました。

ここでは後半課題の最終成果物をご紹介します。制作には、JavaScriptやMarkdownを書いて共有できるノートブックサービスObservableとJavaScriptライブラリのD3.jsを利用しました。制作期間は2ヶ月ほどです。

受講生にはデータジャーナリストになったつもりで、関心ある社会的なテーマを設定し、データを集め、データ可視化をふくむ記事を制作してもらいました。調査・分析は十分とはいえないものもありますが、それぞれが、わかりやすい「見せ方」「伝え方」を追求しています。

完成前のタイミングで、ゲスト講師としてスマートニュースの荻原和樹さんをお招きしました。荻原さんにそれぞれ講評コメントをいただいたことで、ブラッシュアップにつながりました。ありがとうとざいました。

授業の概要

開講時期:2022年後期(最初の数回以外はオンライン)
授業科目:ネットワーク演習II・実習II
東京都立大学システムデザイン学部インダストリアルアート学科
担当教員:杉本達應

以下、成果の紹介です。サムネイルをクリックすると各記事にとべます。

from City to Airport 都市から空港へ

全国各地の空港と都市のアクセス状況を見せています。都市圏の規模や便数などの要素も見れるとより面白くなりそうです。

Why are the strongest schools always the strongest?

女子高校バスケットボールの強豪校はなぜ強いのか。10年間にわたるデータを地道に調べ上げています。強い選手がいるだけでは、上位をキープできないことが明らかになっています。

外来生物の被害度、知名度などに相関はあるのか。

外来の動植物の被害度や知名度などを組み合わてみて相関を見たもの。データが少なくて作るのに苦労したようです。

画像3

日本の花火文化はどのように広がったのか?

全国各地の花火大会の歴史や観客数などを見ています。歴史ある花火の町は全国にありますが、都道府県での色分けだけでは十分に伝えきれていないのが惜しいです。

画像4

政府の10万円給付について考える 一律所得制限に注目して

2021年度、政府の子育て世帯への臨時特別給付金について、所得制限への批判の声がありました。都市部と地方の所得の違いが不満の要因のひとつだと考えられます。

画像5

なぜ人々の新聞離れは止まらないのか?

読めと言われても若者は新聞を読まなくなりました。世代間の隔たりが明らかに見えます。

画像6

デジタルメディア芸術分野における地域格差とは?

ゲームやアニメーションを学べる大学は全国各地にありますが、就職先は都市圏に集中していると指摘しています。業種によっては、こうした地域の偏りが大きいことがわかります。

画像7

VTuber_Music 推しの再生回数はなぜ伸びないのか?

Vチューバーの「歌ってみた」動画の投稿タイミング、再生数、いいね数、コメント数などを丹念に調べたユニークな調査です。所属事務所による傾向の違いなどが読み取れます。

画像8

日本の老人福祉施設は高齢化社会に追いついているのだろうか?

家族の介護が必要になったとき、調べることになる福祉施設について、その数が十分なのか、費用がいくらかかるのか、具体的な地域に絞って調査しています。

画像9

以上です。最後までお読みいただきありがとうございました。

Kirk, Andy,黒川利明訳,2021,『データビジュアライゼーション ―データ駆動型デザインガイド―』朝倉書店.

版元の朝倉書店からご恵投いただきました。

『データビジュアライゼーション』は、Andy KirkのData Visualization第2版の邦訳です。本書は、特定のツールに依存せず、データ可視化における技術やプロセスに重点を置いています。約270ページ、フルカラーです。
https://www.asakura.co.jp/books/isbn/978-4-254-10293-2/

Andy Kirkはイギリスのデータ可視化の実務家でトレーナーです。彼のサイトは、データ可視化プロジェクトの好事例を定期的に紹介していて参考になります。
https://www.visualisingdata.com/

以前、彼のブログ投稿を翻訳して紹介したことがあります。

2016年前半のビジュアライゼーション10選
https://lab.sugimototatsuo.com/2016/08/10-significant-visualisation-developments-january-june-2016/

本書の特徴を3つとりあげます。

ひとつ目は、多くのチャートを分類したカタログ(第6章)があることです。棒グラフから方眼地図まで49種のチャートを5つのカテゴリで紹介しています。あらゆるチャートを網羅しているわけではありませんが、これを眺めるだけでいろんなアイディアが浮かんできます。

チャートの分類(杉本作成)

ふたつ目は、データ可視化プロジェクトにおける要綱作成、データ処理、編集的思考をまとめていることです(第2部)。この内容は、とくにメディアとしてデータ可視化を公開する方にとって力強い指針となりそうです。

みっつ目は、ページのところどころに、数多くの実務家や研究者の言葉が掲載されているところです。短いテキストなので警句集のように読むこともできるでしょう。人名で検索すると、さらに背景情報を得られます。ひとつだけ紹介しましょう。

「すべてに理由がなければならない」。
グラフィックデザイナーとして私が学んだ原則はデータ可視化にも当てはまります。
本質的に、すべてが合理的に説明され、なぜデザイン/ビジュアライゼーションでそうなっているのか、そうなっていないのかを示すロジックがなければなりません。

Stefanie Posavec

【目次】
日本語版によせて
はじめに
謝辞
著者紹介

第I部 基礎
1章 データ可視化の定義
データ可視化とは何か/相違と特徴/まとめ
2章 可視化デザインプロセス
デザインプロセス/デザイン原則/まとめ

第II部 背後の思考
3章 要綱を作成する
プロジェクトの文脈を定義する/プロジェクトのビジョンを確立する/まとめ
4章 データの処理
データ取得/データ検査/データ変換/データ探索/まとめ
5章 編集的思考の確立
編集的思考とは何か/編集的思考の影響/まとめ

第III部 デザインソリューションの開発
6章 データ表現
ビジュアル・エンコーディングとチャート/影響要因と考慮点/まとめ
7章 インタラクティブ機能
インタラクティブな諸機能/影響要因と考慮点/まとめ
8章 注釈
注釈機能/影響要因と考慮点/まとめ
9章 色
色モデルの概要/色のフィーチャー/影響要因と考慮点/まとめ
10章 構成
構成のフィーチャー/影響要因と考慮点/まとめ

エピローグ
参考文献
訳者あとがき
索引

Kirk, Andy,黒川利明訳,2021,『データビジュアライゼーション ―データ駆動型デザインガイド―』朝倉書店.[ISBN: 9784254102932] https://amzn.to/3eZTaaX

テック・ジン『データビジュアリスト宣言』をつくりました

このたび、流浪の編集部「すぎもと組」は、3冊目のテック・ジンとなる『データビジュアリスト宣言:Observable/D3.jsではじめるデータ記事発信』をつくりました。

特設ウェブサイトはこちら。

https://data-visualist-manifesto.tumblr.com/

技術書典11で頒布しています。

https://techbookfest.org/product/4641141578268672?productVariantID=5767041485111296

どんな本か

この本で紹介しているのは、JavaScriptやMarkdownが書ける共有ノートブック共有サービスのObservableと、JavaScriptのライブラリD3.jsです。データからビジュアルをつくってみたい初学者のためのガイドブックです。そのため本書で取り扱っているのは、棒グラフなどの基本的なチャートです。複雑なデータビジュアライゼーションではありませんが、データセット(CSVやJSONなど)があれば、ちょっとしたスケッチを描くように可視化できるので、ぜひ体験していただきたいです。

データビジュアリストって何?

タイトルにあるデータビジュアリストは、造語です。公開されている統計情報などを分析し可視化した記事をまとめて発信する人のことを意味しています。Observableを使えば、このようなデータ記事を簡単につくることができます。

既刊とのちがい

この本は『ばぶでもわかるおぶざばぶる』の続編にあたります。『ばぶ』本との違いは、次の通りです。

– ローカル開発の解説を省略
– Observableの最新版に対応
– D3.jsの最新版バージョン7に対応
– データ記事発信の心得を追加

今回一緒に作った学生はふたりとも社会的なテーマとデータ可視化の組み合わせに関心をもっていることから、データ記事発信の心得について調べて書いてくれました。

組版トラブル発生

毎回どのように組版するかで悩みますが、今回はCSSで組版できるVivliostyleを使用しました。最初はまったく使い方が分かりませんでしたが、さわっているうちに徐々に理解できました。Markdownから直接PDFが変換できるので便利です。

https://techbookfest.org/product/4671178121674752?productVariantID=6052525503414272

ところが入稿直前におおきなミスに気がつきました。A5判のつもりが、B5判でつくっていたのです。急遽、設定をA5に変えたもののエラーが出てしまいます。判型を変えてしまうと、各ページの細かい調整をすべてやりなおす必要があります。入稿締切が迫っていて、作りなおす時間はとれません。結局、B5判のPDFをA5判に縮小することにしました。それでも塗り足しの幅など調整する必要があり結構大変な作業でした。本文の文字が若干小さめに感じるのはそのせいです。

PDFのプリフライトチェックでページサイズがおかしいことが判明!

共著者の宮崎さん、関口さんに本書制作の感想を書いてもらいましたので紹介します。

「実用的」が難しい(宮崎)

はじめまして。第3章と第4章の執筆を担当しました、宮崎仁美です。杉本先生と本を作らせていただいたのは、今回で2度目になります。今回制作した本は、前回制作した本とは内容も方向性もまったく異なったものになりました。前回の『超ビジュアル訳 ニーチェの詩:p5.jsでうたう「深夜の鐘の歌」』は、いわゆる作品集に近いものです。私自身の趣味(嗜む程度ですが)でもあるp5.jsで思ったように表現しました。非常に楽しかったことをよく覚えています。

『データビジュアリスト宣言』は、「今度は実用的な本を作ってみよう」ということで制作しました。この「実用的」という部分は、私が思っていた以上に考えることが多く、非常に難しかったです。まず、「Observableで記事を作成するときに、どのようなことがすぐにわかると嬉しいだろうか」と考えながら執筆を始めました。しかし書けば書くほど、「この言葉は誤解を招かないだろうか」「本当にこれは正しいのだろうか」「この情報って要るのだろうか」と答えのない問いが沸いてきました。結果、筆が遅くなり、さらに焦って全然書けなくなる、というとても綺麗な負のスパイラルが生まれました。やはり、焦って力が入っているとあまり良い文章が書けないもので、もう少し肩の力を抜いて書いてしまえばよかったな、と今になって反省しています。共同制作者の皆さん、大変ご迷惑をおかけしました。

前回同様、一度も顔を合わせずに制作した本ですので、私はまだ完成した本を手に取ってはいません。今から完成した本に触れるのが楽しみです。私は紙の本の手触りが大好きですし、やはり紙の本は格別だなと思っているので、待ち遠しく思っています。

はじめて本を売ってみた(関口)

はじめまして。関口太樹です。第3章と第5章の執筆、表紙のデザイン、当日の売り子を担当しました。杉本先生と本をつくるのはこれで2度目になります。幸運にも、今回はオフラインの即売会に参加することができました。本の即売会に出店したのは初めてのことだったので、本の制作時のことに加えて、本を実際に売った時の感想をお伝えしたいと思います。

本をつくること〜技術書における書き手のスタンス〜

前回制作した『超ビジュアル訳 ニーチェの詩』は、解説書というよりは作品の作り方を紹介する本でした。それは、サービスや言語について概要を解説するというよりも、こういうコードの書き方をすると、こういう表現が生まれるということを書いた本です。

今回制作した本は、ObservableとD3.jsという、日本ではあまり知名度の高くないサービスやライブラリをこれから使う人のために紹介し、解説する内容でした。なので前回よりも、事実に基づいた文章を書くことが求められます。

しかし、私自身がこれらのものに触れはじめてからまだ日が浅く、文章を書きながら自分自身も初心者であるという感覚がありました。初心者なのに一人前の顔をして、解説を書くのはどうなんだろうか、と戸惑いながら文章を書いていました。初心者である私が正しいことを書けているか、読む人の役に立つだろうか、という悩みがあったのだと思います。

今思えば、もう少し肩の荷をおろして執筆すればよかったです。リアルイベントで他の方が制作した本をいくつか購入しましたが、文章に「私なりに考えたこと」「正確な記述に努めましたが、もしかしたら間違えているかもしれません」といった枕が付いていることが多かったです。これらの本の著者も書かれていることの正しさについては気を使っているのでしょう。ですが、気を使いすぎると書けないので、そこは折り合いをつけて文章を書いたり、本を執筆しているのだと思います。そして、読む方も少なからず、そのことを了解しているんじゃないのかな、とそう思います。そうでないと、同人誌なんて生まれませんよね。

本を売ること〜即売会で販売するということ〜

技術書典11では、コロナ対策のもと、オフラインイベントが開催されました。今回はそこに、出店してお客さんの前で本を並べて、売ってきました。本の即売会に参加したこと自体これが初めてです。

前回の技術書典ではオンラインマーケットだったので、買い手の存在が見えずに、いつの間にか売れていく……というものでした。オフラインイベントでは、買い手の人たちが目の前にいるので、本を売ることの楽しさ、売れることの嬉しさを体で感じました。もちろん、かなり緊張もしましたが。

本の売りかたを当日いろいろと試しました。「本の概要をざっくり説明してあげた方がどんな本か伝わる」、「実際に見せられるものがあったらスマホなどでサービスを見せた方がいい」、「歩いている人は大体上を見ているのでPOPは目線の高さにあった方がいいかも」といったように、自分なりに工夫して学んでいきました。

ただ、そうやって「販売促進行為」をしながら、話しかけることが本を買わせるためのプレッシャーになっていたらなんか嫌だな、とも考えていました。せっかく作った本ですし、杉本先生には出版費用をいつも肩代わりしていただいているため赤字は避けたい、売れてほしいという気持ちはもちろんあります。ただ「本って売る人が稼ぐために売るもの?」とためらう気持ちがちらちらとあらわれていました。

その裏には、読者に対する尊敬と期待があります。本をつくる限りは、何らかの形でその人の役に立ってほしい。消費財として終わらずに、その人が次に何かをするための原動力となってほしい。そういう思いがあります。なので「仕方なく買った」という事態を招くのはやっぱり残念なことだと思います。

それから本そのものに対する畏敬の念もあります。本というものがこれまで歴史上でなしてきたことを思うと、本はそれ自体が尊敬されるべきものだとなんとなく思うのです。私の尊敬する編集者の松岡正剛さんは、『千夜千冊エディション 本から本へ』の後書きに「本は交際である」とタイトルをつけ、「本とは、人類の歴史文化の中で最高無二の知的情報体となってきた柔らかいパッケージである。この連中とはひたすら交際することが一番だ」と述べています。この文章で言われているように、本とは単なるモノとしての消費財ではなく、人間と特殊な関係を結んでいるものである、と私は感じます。なので、本をつくることで本の歴史に関わる限りは、本を粗雑に売るべきではないと思うのです。

だいぶ話が脱線しました。とにかく、本を作って自分の手で読者の人に渡すという行為は、いろいろと感じること、考えなければいけないことが多く、学びの機会になりました。今回も本づくりに関われてよかったです。

目次

第 1 部 入門編
第 1 章  Observable をはじめよう
 Observable とは
 Observable をはじめる
第 2 章  D3.js を使ってみよう
 D3.js とは
 Observable で D3 を使う
 はじめての D3
 D3 vs. jQuery vs. JavaScript
 コミュニティと情報源
第 3 章 基本的なグラフをつくろう
 棒グラフ
 折れ線グラフ
 ドーナツチャート
 散布図
 ヒートマップ
 地図
第 2 部 活用編
第 4 章 デザイン
 こんなときはどんなグラフ?
 見やすい記事のポイント
 色を活用する
 見せ方とミスリード
第 5 章 活用
 データ可視化の構成要素
 データ可視化記事の制作手順
 Observable を使った授業の事例
 ノートブックを公開する前に
第 6 章 データ記事の事例紹介
 データ可視化で見る東京都内の企画展傾向
 日本における子どもの貧困と学力格差
執筆者
おわりに

既刊もどうぞ

すぎもと組の既刊もひきつづき頒布中です。こちらもどうぞよろしくお願いいたします。

https://techbookfest.org/organization/5752355920281600

技術同人誌『ばぶでもわかるおぶざばぶる』をつくりました

このたび、すぎもと組は技術同人誌『ばぶでもわかるおぶざばぶる』をつくりました。すぎもと組とは、わたしが授業連絡などでつかっているSlackのワークスペース名です。決してあやしい団体ではありません。

すぎもと組編,2020,『ばぶでもわかるおぶざばぶる : D3.jsとObservableではじめるデータビジュアライゼーション』すぎもと組.

技術書典応援祭(オンライン開催、2020年3月日−4月5日)

つくった経緯

この同人誌は、「技術書典8」にはじめて出展する予定でした。新型コロナウイルス感染症のため開催中止となり、代わりに開催されている技術書典応援祭に出展しています。

技術書典は、来場者1万人規模の大きな技術同人誌の即売会イベントです。2018年秋、わたしは出張の合間に技術書典5に参加者として訪れました。開場前からの長蛇の列に、身動きがとれないほどの会場内の混雑ぶりに驚きながら、こんな場に参加するなら、出展者として参加したほうが楽しいだろう。そう思いましたが、地方在住者(当時は佐賀在住)としては、東京でしか開催されない技術書典への出展は現実的ではありませんでした。もちろん地方から参加しているサークルも多数あるとはおもいますが。

それから1年──。2019年の秋、わたしは東京に引っ越していました(!)。メールマガジンで技術書典8サークル参加申込みの締切が迫っていることを知り、出展することを思いついたのです。締切前日(2019年11月30日)に、いっしょに同人誌作ってみないかとデータ可視化の演習授業の受講生に呼びかけました。すると数人の学生が手をあげたので、翌日ぎりぎりに申し込みました。12月15日、当選発表があり、参加費を支払って制作をはじめました。

2月中旬にできあがったので、制作期間は約3か月です。ただし実質はもっと短い短期集中で作りました。学生は第2章の作例を担当し、わたしは前半の第1章を担当しました。第2章の内容や、タイトル、カバーデザイン、イラストなどは、どれも学生の発案です。

目次

はじめに
第I部 入門編
第1章 D3.js をはじめよう
 1.1 D3.jsとは
 1.2 はじめてのD3
 1.3 D3 vs.jQuery vs. JavaScript
第2章 Observable 入門
 2.1 Observableとは
 2.2 ノートブックの編集
第3章 Observable の JavaScript
第4章 ノートブック・ギャラリー
第II部 実践編
第5章 シンプルな表
 5.1 ここで作れる表
 5.2 2次元配列の場合
 5.3 オブジェクトの配列の場合
第6章 ロリポップチャート
 6.1 ここで作れるグラフ
 6.2 データの準備
 6.3 チャートの作成
第7章 折れ線グラフ
 7.1 ここで作れるグラフ
 7.2 データの準備
 7.3 チャートの作成準備
 7.4 チャートの作成
第8章 ドーナツチャート
 8.1 ここで作れるグラフ
 8.2 データの準備
 8.3 チャートの作成
第9章 箱ひげ図
 9.1 ここで作れるグラフ
 9.2 データの準備
 9.3 チャートの作成
第10章 ヒートマップ
 10.1 ここで作れるグラフ
 10.2 データの準備
 10.3 チャートの作成
第11章 地図
 11.1 ここで作れる地図
 11.2 データの準備
 11.3 地図の作成
著者紹介
おわりに

誰のための本か

この本で紹介しているのは、JavaScriptのライブラリD3.jsと、JavaScriptの共有ノートブックWebサービスのObservableです。データビジュアライゼーション超入門と謳ったとおり、はじめてデータからビジュアルをつくってみたい初学者のためのガイドブックです。そのため本書で取り扱っているのは、棒グラフなどの基本的なチャートです。複雑なデータビジュアライゼーションではありませんが、データセット(CSVやJSONなど)があれば、ちょっとしたスケッチを描くように可視化できるので、ぜひ体験していただきたいです。

Image from Gyazo
わたしのObservableノートブックは200個を超えています。

デザイナーの方でも、エンジニアの方でも、データの可視化にすこしでも興味のある方は、ぜひ読んでいただきたいです。また、学生やお子さんも、プログラミングの入門として気軽に読んでいただけます。

感想は、ハッシュタグ #ばぶでもわかるおぶざばぶる #ばぶ本 でお待ちしています。続編の希望があれば、動的なデータの取り扱いや、ボタンなどをつかったインタラクションなどについても書いてみたいです。

同人誌づくりは楽しい!

はじめて技術同人誌をつくってみて、よかったと思ったことがいくつかありました。

第一に、誰かといっしょにつくる楽しさがあります。今回は、学生といっしょに作ったことでなんとかできあがりました。ひとりでつくっていたらモチベーションを維持できず、途中で頓挫したかもしれません。

第二に、テーマとなる技術の勉強になります。執筆した学生は、「文章で伝えるって難しいですね」とつぶやいていました。何となく理解しているつもりのことでも、伝えるために文章に起こすと、意外と分かっていなかったりします。だれかに教えるためには、まず書き手が学ぶ必要があるんですね。わたしも内容に間違いがないように、D3.jsのソースコードを確認することがあり、大いに勉強になりました。

第三に、出版物の理解が深まります。同人誌でも商業書籍でも、1冊の本が生まれるまでには、企画、執筆、編集、デザイン、組版、印刷、製本、営業(宣伝)、流通、販売など、数多くのプロセスがあります。同人誌を作ることは、そのプロセス全部に関われます。世の中に流通している本にも、ひとつひとつ制作のストーリーがあることに思いをはせると、本が生まれることへの感謝の気持ちが生まれました。

今回、同人誌最大の醍醐味である対面販売の機会がなくなったのは残念ですが、同人誌づくりは楽しかったです。技術書典に関心のある人は、ぜひ何か作ってみてはいかがでしょうか。複数人で書くのが気楽でよいとおもいます。丸ごと1冊書ける人でも、デザインや校正など他者の協力をもらいながら作ることを強くおすすめします。その方が完成度も上がりますし、なによりつくる過程を楽しめますから。

制作プロセスについては、別途エントリーをあげる予定です。

『Dear Data』日常生活のデータが綴られたビジュアルな文通

2016年の書きかけの書評。ブログにアップしていたとおもっていたけど、アップしていなかったようなので、ここにあげておく。


Lupi, Giorgia, and Stefanie Posavec. Dear data

Dear Data
Dear Data

posted with amazlet at 16.11.11
Giorgia Lupi Stefanie Posavec
Princeton Architectural Press
売り上げランキング: 30,680

↑米国版

Dear Data
Dear Data

posted with amazlet at 16.11.11

売り上げランキング: 1,992,209

↑英国版

本書は、ニューヨークとロンドンに住む同い年の女性デザイナー、ジョージア・ルピとステファニー・ポザベックのふたりが1年間文通した記録だ。葉書の内容は、文字で書かれたメッセージではなくデータをあらわすグラフィック。52週にわたって綴られた量に圧倒されるだけでなく、毎週あらたな表現にチャレンジしていることに驚かされる。本書のさいごに「そんなに難しくないよ」と、つくる手順が紹介されているが、しっかり取り組むとこれだけで1週間が終わってしまいそうだ。

  1. データ収集家として世界を見よう
  2. 問いからはじめよう
  3. データを集めよう
  4. データをじっくり見よう
  5. まとめて分類分けしよう
  6. メイン・ストーリーを見つけよう
  7. ビジュアルをひらめいて、自分らしいボキャブラリーをつくろう
  8. 最初のアイディアでスケッチして実験しよう
  9. 最終版のスケッチを描こう
  10. 凡例を描こう
  11. 最後に投函しよう

交わされた葉書はすべてWebサイトで見ることができるが、細部までじっくり眺めることができる本をおすすめする。

本書は、ジョージアとステファニーが、日常生活の細かなことを相手に見せながら仲良くなった物語です。といってもカフェやバー、ソーシャルメディアでおしゃべりしたのではありません。その代わり、時代遅れの通信に変わった工夫をほどこしました。1年のあいだ毎週ポストカードを送りあい、その週の出来事を相手に説明するのです。出来事を「書く」のではなく「描く」ことにしました。すべての出来事は描かずに毎週テーマを決めました。

毎週月曜日、その週の自分に関するデータを集めるテーマを決めます。文句を言う頻度、嫉妬にかられる回数、いつだれの身体と接触するか、聴こえてくる音。葉書サイズの紙に、こうしたデータをあらわすスケッチを描き、ステファニーは「ポストボックス」(英国)に、ジョージアは「メールボックス」(米国)に投函しました。

[……]私たちは「ビッグデータ」の時代に生きていると言われています。そこではアルゴリズムと計算が普遍的な問いへの新たな鍵であり、無数のアプリケーションが私たちのデータを発見し、収集し、ビジュアライズすることで、人間を超人にしようとしてくれます。私たちは、もっとゆっくり、よりアナログな方法でデータに近づくことにしました。「Dear Data」は、自分を定量化するプロジェクトではなく、「パーソナル・ドキュメンタリー」だと考えています。これは微妙だけれど決定的な違いです。ただ効率化するためにデータを使うのではなく、より人間的になり、他者と深いレベルでつながるために、データを使うことができると思うのです。

(はじめに)

二人はビッグデータ時代の功利的なデータ活用が盛んに広まっている潮流に抗い、あえてデータをテーマにしたパーソナルなドキュメンタリーに取り組んでいることがわかる。もっとも彼女たち自身はデザイナーとして、ふだん商業的なプロジェクトに携わっているはずだ。そうした合間に、みずからの好奇心とスキルをいかしながら個人的な表現活動を続けている。そのことに表現者としての矜持を感じた。

書誌情報

Lupi, Giorgia, and Stefanie Posavec. 2016. Dear data. New York : Princeton Architectural Press.
Lupi, Giorgia, and Stefanie Posavec. 2016. Dear data. London: Particular Books.

目次

  • 序文 Maria Popova(米国版のみ)
  • はじめに
  • 本文

リンク

ビデオ

Eyeo 2015 – Giorgia Lupi and Stefanie Posavec from Eyeo Festival // INSTINT on Vimeo.

2018-10-13「2018年度日本デザイン学会秋季企画大会」で発表しました

2018年10月12〜14日に九州大学大橋キャンパスで開催された「2018年度日本デザイン学会秋季企画大会」で、2件の発表をしました。

1つ目は、10月13日のライトニングトーク発表です。

杉本達應「『仮想書棚』の試み」

2つ目は、10月14日の第5支部研究発表会の口頭発表です。

杉本達應「データ可視化の制作プロセスの共有を支援するツールの検討:『データ駆動型デザイン』を学習する技術的環境」

2018-09-16 「DxD at Fukuoka データビジュアライゼーションを語る会」を開催しました

2018年9月16日、福岡県Ruby・コンテンツ産業振興センターで「DxD at Fukuoka データビジュアライゼーションを語る会」を開催しました。共催の「ももち浜TECHカフェ」さんに博多駅至近の会場をご提供いただきました。

開催概要
2018-09-16 「DxD at Fukuoka データビジュアライゼーションを語る会」を開催します – lab.sugimototatsuo.com

多様な領域からご参加いただき、ありがとうございました。昨年から主宰しているDxD研究会をはじめて公開しました。データビジュアライゼーション領域で活動されている山辺さん、矢崎さんをお招きして、それぞれの実践事例など話題提供いただきました。当日は時間が足りず、参加者をまじえた十分なディスカッションができなかったことを反省しています。またデータビジュアライゼーションをテーマのイベントが開催できればと思っています。

(写真:牛島清豪さん、矢崎裕一さん、杉本達應)

当日の発表資料を置いておきます。

データビジュアライゼーションの制作方法を学ぶ
杉本達應

アート+サイエンス、ビジュアライゼーションの現在―産学官連携と実践
山辺真幸さん

参加者限定で共有しました。

見えないものを見ようとして望遠鏡を覗き込んだ
矢崎裕一さん

こちらのリンクをご覧ください。

2018-09-16 「DxD at Fukuoka データビジュアライゼーションを語る会」を開催します

2018年9月16日、福岡県Ruby・コンテンツ産業振興センターでデータビジュアライゼーションに関するトークイベントを開催します。
杉本達應研究室と「ももち浜TECHカフェ」の共催です。

参加申し込みはこちらから。
https://tech-cafe.connpass.com/event/98246/

近年、多様なデータを起点にチャートなどの視覚的表現を生成する「データビジュアライゼーション」が注目されています。この領域をテーマにした「DxD研究会」が福岡で初のトークイベントを開催します。データビジュアライゼーションの教育、実践について話題提供し、この分野に興味をもつみなさんと意見交換します。

福岡県Ruby・コンテンツ産業振興センター 5階プレゼンルーム
福岡市博多区博多駅東1丁目17-1(福岡県福岡東総合庁舎5階)
※博多駅筑紫口から徒歩5分
参加無料
イベントページでお申込みください。受付の際に名刺を頂戴します。

プログラム

データビジュアライゼーションの制作方法を学ぶ
杉本達應(佐賀大学芸術地域デザイン学部 准教授)
大量のデータが行き交う現在、デザインで学ぶべきものが大きく変化しました。初学者に向けた「可視化のガイドライン」(作成中)を紹介します。

アート+サイエンス、ビジュアライゼーションの現在―産学官連携と実践
山辺真幸(多摩美術大学情報デザイン学科 非常勤講師/慶應塾大学大学院 政策・メディア研究科 後期博士課程)
アートとサイエンスにまたがる2つの「データビジュアライズ」の現在について、大学・企業での取り組みや実践を交えて紹介します。

見えないものを見ようとして望遠鏡を覗き込んだ
矢崎裕一(Data Visualization Japan ファウンダー/Code For Tokyo 共同代表/多摩美術大学情報デザイン学科 非常勤講師)
人類が何を可視化してきたのか、過去の一部を駆け足で振り返りながら、今後の発展可能性について話題提供します。

主催 佐賀大学 芸術地域デザイン学部 杉本達應研究室
lab.sugimototatsuo.com
共催 システム開発技術カレッジ
(公益財団法人 福岡県産業・科学技術振興財団)

本研究会はJSPS科研費JP16K00462の助成を受けたものです。

2017-10-14 Geoアクティビティコンテストでデザイン賞を受賞しました

IMG_2863

2017年10月12日から14日まで、日本科学未来館で開催された「G空間EXPO 2017」Geoアクティビティコンテストに出展しました。

出展したのは、開発中のWebアプリ「DataMapp」(現在公開準備中)です。統計データを地図上にビジュアライズするシンプルなWebアプリです。13日のプレゼンテーション審査で評価いただき、「デザイン賞」を受賞しました。ありがたいことに、公開を期待する声など、多くの反響をいただきました。DataMappにご関心のある方は、杉本までご連絡ください。今後の動きをお知らせいたします。

これまでつながりのないイベントでしたが、人工衛星からドローン、GIS、AR、VRなど、地理空間情報にかんする産官学のさまざまな展示があり、勉強になりました。

展示では多くの地理空間情報業界のみなさんに声をかけていただきました。いただいたご意見やご感想は、つぎのように要約できるとおもいます。地図、とりわけ「主題図」と呼ばれる特定主題を詳細に表現した地図が、分析や意思決定に活用される場面が増えていて、データを効果的に表現するデザインの需要が高まっている。そのため、DataMappのようなデザイン主導の取り組みに期待しているということでした。

メインステージが展示場所にちかかったため、講演プログラムもたのしみました。

このコンテストに出展していたプロジェクトは、最優秀賞を受賞したドローンを利用した水田分析(なんと高校生!)など、いずれもとても面白かったです。わたしがとくに興味をひかれたのは、MIERUNE社の地図配信サービス「MIERUNE地図」です。これはOpenStreetMapをベースにした地図で、スタイルデザインが抜群に美しく、すばらしかったです。このような美しい地図が、Web上の地図の標準になってほしいなと感じました。

関連リンク
G空間EXPO2017|2017年10/12(木)・13(金)・14(土)開催!
【地図ウォッチ】 「Geoアクティビティコンテスト」最優秀賞は、愛媛・伊予農業高校の2年生 – INTERNET Watch