In March 2020, the Sugimotogumi, our zine publishing group was presented our zine “Visualized Nietzsche” at #MozFest Virtual Zine Exhibition.
This zine is an excerpted version of Part I, with notes in English.
https://schedule.mozillafestival.org/session/REZDJD-1
MozFest Zine Fair!
https://schedule.mozillafestival.org/session/GTVWQG-1
I was invited by @kiwakosakamoto, whom I met at SFPC in Yamaguchi.
このたび、流浪の編集部「すぎもと組」は、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判に縮小することにしました。それでも塗り足しの幅など調整する必要があり結構大変な作業でした。本文の文字が若干小さめに感じるのはそのせいです。
共著者の宮崎さん、関口さんに本書制作の感想を書いてもらいましたので紹介します。
はじめまして。第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 章 データ記事の事例紹介
データ可視化で見る東京都内の企画展傾向
日本における子どもの貧困と学力格差
執筆者
おわりに
すぎもと組の既刊もひきつづき頒布中です。こちらもどうぞよろしくお願いいたします。
2021年5月15日、オンラインで開催された情報通信学会モバイルコミュニケーション研究会に討論者として参加しました。貴重な事例報告をきく機会をいただきました。研究会のみなさん、ご縁をいただきありがとうございます。
アートグループGRINDER-MANのタグチヒトシさんが演出された現代芸能『獅子と仁人』の報告にコメントを寄せました。『獅子と仁人』は、沖縄の獅子舞、音楽、唄、ダンスパフォーマンスに加え、リアルタイムCGが合成されたライブ映像です。新型コロナウイルス感染拡大によって本来の公演は中止されたものの、ストリーミングライブ配信として新たなかたちでの公演が試みられたとのことです。
本作は、現代的な装いの獅子のパフォーマンスなど、見どころの多い作品です。それだけでなく、舞台上を動き回る大胆なカメラワークでライブ配信する意欲的な試みでもあります。2020年、コロナ禍で次々に舞台公演の場が失われていく大きな制約のなか、表現者が新しい見せ方をつかんでいく過程を見ることができ、勇気づけられました。また、テクノロジーを駆使しながらも誇示しない作品構成のバランス感覚にも唸らされました。とくに再撮影版ではCGの要素を減らしていることに感心しました。
沖縄の獅子舞という伝統文化に、現代的な技術が重なることで、あらたな魅力を獲得していました。コロナ禍で伝統文化の継承が危惧されているなか、このような試みで伝統が生き続けていることに注目します。ライブ配信では海外からのアクセスも多かったそうで、地理的な条件にしばられないグローバルな展開が期待できます。
わたしからはタグチさんに、今後の展開についてお訊ねしました。コロナ禍はいつか終息し、パフォーミングアーツの公演は息を吹き返すでしょう。ただし、長期間これまでの公演形態が制限され、ライブ配信が身近になったという大きな変化を存在しなかったことにはできません。今後は、劇場に足を運ぶ人だけでなく、スクリーン越しの観賞を求める人たちも増えていくのではないでしょうか。そのとき、多くの観客と同時に観賞するという体験がどのように変わるのかに興味を抱きました。その体験をデザインする演出家の果たす役割はより重要になりそうです。
もう一人の討論者の藤本憲一さんと司会の伊藤耕太さんからは、お二人とも本作の世界観や読み取れる物語からつぎのような指摘がありました。藤本さんは、本作から、「脱魔術化」（ウェーバー）した合理的社会ではなく、「再魔術化」した多神教的世界を見出したそうです。伊藤さんは、本作から読み取られる物語から、ベンヤミンが「複製技術時代の芸術作品」で論じた礼拝的価値から展示的価値への移行から、再び礼拝的価値へ回帰しているのが興味深いとおっしゃっていました。
今回の研究会がオフライン開催だったら、研究会メンバーの方々をまじえて議論が盛り上がったはずです。それがかなわなかったことは残念でしたが、つぎに直接お会いできる機会を楽しみに待つことにします。
『獅子と仁人』は、再撮影された映像版がVimeoでオンデマンド配信されています。レンタルまたは購入できますので、関心のある方はぜひご覧ください。
The Ancient Lion and Modern Man – 現代芸能『獅子と仁人』 | Facebook
テーマ： ネット時代のフォークロア創造〜リアルアイムCGを用いたAR表現を題材に
日時：2021年5月15日（土） 13：00～15：00
場所：オンライン開催
報告者：タグチヒトシ（演出家）
司会：伊藤耕太（マーケティングディレクター、関西大学非常勤講師）
討論者：藤本憲一（武庫川女子大学教授）・杉本達應（東京都立大学准教授）
概要
報告者であるタグチヒトシ氏がコロナ禍において演出を担当した現代芸能『獅子と仁人』（ししとひと）は、身体表現とデジタルテクノロジーの融合による、オンラインでのみ完成する舞台作品かつ映像作品として公演されました。獅子舞、ダンス、生演奏、CG合成によるAR表現がオンラインでリアルタイムに融合し、沖縄から世界への配信を通じて鑑賞する観客は、舞台上に立っているような臨場感の中で、しかも肉眼で見るのよりもリッチな映像として、作品世界を体感することができます。本研究会では、本作を中心としたタグチ氏の実践と、インターネットやデジタル技術や駆使した映像体験で試みるフォークロア（伝承）創造の可能性について議論したいと思います。
（報告者プロフィール）
タグチヒトシ（演出家）
1973年横浜市出身、筑波大学芸術専門学群総合造形学科卒。演出・振付を駆使して生みだすのは「いま・ここ」の身体表現。2008年に株式会社イッカクを設立。現代という時代を創造し、表現と社会の新たなかかわりあいについて、その考察と実践を進めている。文化庁芸術家海外研修でニューヨークに滞在（2016年）。文化庁メディア芸術祭審査委員会推薦作品「HERO HEROINE」（2019年）。
『獅子と仁人』は、沖縄県宜野座の創作エイサーLUCKと、アートグループGRINDER-MAN、ビジュアルデザインスタジオWOWのコラボレーションによって、2020年11月に宜野座村文化センターがらまんホールからストリーミング配信にて発表。2020年12月には文化庁芸術文化収益強化事業に採択され、2021年2月に再収録。2021年4月から新版「The Ancient Lion and Modern Man」がVimeo On Demandにてオンデマンド配信中。
https://www.facebook.com/shishitohito/
参加費： 無料
申込方法： 以下のサイトよりお申込みください。
（potariに寄稿した記事です）
東京都写真美術館で開催されているエキソニモの個展を堪能してきた。展覧会のビジュアルは、文字による構成が巧みな水戸部功のデザインだ。
エキソニモ UN-DEAD-LINK アン・デッド・リンク
インターネットアートへの再接続
東京都写真美術館（目黒区）
エキソニモをご存知だろうか。東京、福岡を経て、現在はニューヨークを拠点としている二人組のアーティストだ。活動する分野は脱領域的だが、一般的にネットアートやメディアアートとよばれる領域にちかい。
メディアアートはメディア技術を使っているために、ともすれば斬新な技術をいちはやく採用する「工学的」な表現や、エンターテインメント産業と結びついたサービスや商品の開発に向かいがちだ。メディアアート単体でマーケットが成り立ちにくい日本では、こうした傾向が顕著だ。そのなかでエキソニモは独自の活動をつづけていて異彩をはなっている。
エキソニモは、ネットやデジタル機器を表現の媒体にしながらも、決して仮構の世界にとどまろうとしない。むしろリアルな物質や身体、生死など、現実空間をつよく意識している。深刻な側面もありつつ、ユーモアもアイロニーもこめた絶妙なバランスのうえに成りたった作品が魅力だ。
こうしたエキソニモ作品の特徴は展覧会の会場構成にもあらわれていた。展示室の床面には5色のLANケーブルが床を這い回っている。5つの色は、作品のキーワードに対応し、それぞれインターネット、プラットフォーム、インターフェース、ランダム、境界をあらわしている。作品の展示場所まで到達したケーブルの色が、作品のタグを示しているという仕掛けだ。会場内を歩き回るには、床にあるケーブルをよけ、またがっていかなければならない。ふだんならスクリーン上の「リンク」をクリックやタップするだけで航行（ナビゲート）できる仮想的なサイバー空間が、ここでは足を使って慎重にたどる現実空間に置き換られている。
展覧会タイトルの「アン・デッド・リンク」には、古いWebページへの参照ができなくなった「デッドリンク」を再接続するという意味が込められている（ちなみに同名の作品もある）。このタイトルの通り、かなり古いものもふくめエキソニモの歴代の作品がよみがえっている。懐かしいブラウン管モニターも、ここでは何事もないように動作していてちょっとしたタイムスリップ感が味わえる。
ひとつだけ作品を紹介したい。《Natural Process》（2014）は、Googleのトップページを絵画にするプロセスを記録した作品だ。インターネットの象徴的イメージであるGoogleのトップページを、そっくり巨大絵画として描き、その制作過程をWebカムを通じてネット中継する。ネットのイメージをアナログ化すると同時に、デジタルの世界にふたたび戻している。完成した絵画は、Google社が購入し所有している。今回の展覧会で作品を借りようとしたが、新型コロナウイルスの影響でオフィスに立ち入ることができず、借りられなかったという。そのため展覧会には絵画そのものはなく、経緯を説明したテキストなどが掲示されている。
ところでGoogleは現在世界シェア1位のウェブブラウザ「Google Chrome」を公開している。しかしこの作品が作られた当時、Chromeは存在していなかった。現在結果的に、この絵画には競合製品である「Internet Explorer」のウィンドウが描かれたことになる。そのため、いまではGoogle社内でも展示されていないようだ。もともとこの作品はプロセスを記録したものであり、その旅に終わりはなく現在も進行している。サーチエンジンやウェブブラウザの浮沈とともに、作品の運命も変わっていくのかもしれない。
メディアアートは刻々と変化する時代状況を反映している。エキソニモのように存命の作家がつくる新しい作品を、同時代に体験できるのは貴重だ。今回の個展では、1990年代の作品から最新作までがならんでいる。世のなかのデジタル機器は変化し陳腐化をくり返しているのに、刹那的にもみえるエキソニモの作品がむしろ死なずに生き残っていることに気づかされた。
大規模な回顧展だが、すべての作品・プロジェクトが網羅されてはいなかった。可能ならば、個人的なメディア経験をふりかえりながら、エキソニモの完全な「アン・デッド・リンク」を一度に体験したくなった。
展覧会は10月11日まで開催中。ネット会場でも作品を体験できる。
このたび、すぎもと組では2冊目の技術同人誌『超ビジュアル訳 ニーチェの言葉：p5.jsでうたう「深夜の鐘の歌」』をつくりました。
特設ウェブサイトはこちら。
https://visualized-nietzsche.tumblr.com/
技術書典9で頒布します。
https://techbookfest.org/product/5727504515989504
ずばり！
・ニーズのない本です（明日の仕事に役立ちません）
・右綴じ・縦書きの本です
・ニーチェの入門になる本です
・p5.jsをすこし学べる本です
・紙で読んでいただきたい本です（電子版はおまけです）
……ようはヘンな本です。
超ビジュアル訳とは、テキストをビジュアルに翻訳すること。本書では、ニーチェの詩の一行一行を解釈し、想像したイメージをつくりあげました。どのイメージも文字を構成したタイポグラフィ作品です。
今回も編者のわたしの呼びかけに応じた学生といっしょに作りました。表紙、本文のイメージ、テキストは、ほとんど学生が制作しました。わたしはブックデザインに力をいれました。
まえがき
第一部 作品篇
深夜の鐘の歌
ひとつ！
ふたつ！
みっつ！
よっつ！
いつつ！
むっつ！
ななつ！
やっつ！
ここのつ！
とお！
じゅういち！
じゅうに！
第二部 解説篇
深夜の鐘の歌
「深夜の鐘の歌」解説
第三部 技法篇
p5.jsとは
作品概要とコード解説
あとがき
Zarathustra’s Rundgesang
ニーチェ略歴
ブックガイド
編著者かく語りき
さて、前回の技術書典8は急遽オンライン開催になりましたが、今回ははじめからオンラインイベントとして開催されます。
イベント運営の目玉として、作り手にも読み手にもやさしい変更がたくさんありました。出展料が無料、販売手数料ほとんどの場合無料、紙の本の送料も無料。前回、主催者にはおおきな損失があったはずなのに、こんなすぐに新機軸が発表されるなんてびっくりです。これでイベントが成り立つのか心配ですが、きっと大丈夫なのでしょう。ありがたくこの場を使わせていただきます。
すぎもと組の既刊『ばぶでもわかるおぶざばぶる D3.jsとObservableではじめるデータビジュアライゼーション超入門』もひきつづき頒布します。こちらもどうぞよろしくお願いします。特設ウェブサイトはこちら。
https://observable-babies.tumblr.com/
技術書典9のページはこちら。
https://techbookfest.org/product/5174238650564608
技術書典9にでているp5.js関連本は、レオナさんの2冊が注目です！
できるだけ毎日続けるためのデイリーコーディング戦略 [第2版]
https://techbookfest.org/product/6000948635762688
2時間でクリエイティブコーダーになる本 p5.jsではじめるアートプログラミング
https://techbookfest.org/product/5666883730669568
ニーチェ本は、あまり世の中に似たものがないヘンな本です。読んでくれる人がどれほどいらっしゃるか想像がつきません。興味をもたれた方はぜひお求めください。印刷費をたっぷりかけて紙の本をしっかり作りました。でも赤字覚悟でお安くしています。
お読みになった方から感想をいただけることをたのしみにしています。
このたび、すぎもと組は技術同人誌『ばぶでもわかるおぶざばぶる』をつくりました。すぎもと組とは、わたしが授業連絡などでつかっているSlackのワークスペース名です。決してあやしい団体ではありません。
#技術書典 応援祭に出品しています！『 #ばぶでもわかるおぶざばぶる :D3.jsとObservableではじめるデータビジュアライゼーション』（すぎもと組編・2020）。学部生と作ったJavaScriptで自由にチャートを作成したい初心者向けの解説本です。紙の本セットをおすすめ！ #ばぶ本https://t.co/yuK7YvQTy6 pic.twitter.com/dQurw4IsKb
— SUGIMOTO Tatsuo 杉本達應＠技術書典 応援祭 (@sugi2000) March 10, 2020
すぎもと組編，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章の内容や、タイトル、カバーデザイン、イラストなどは、どれも学生の発案です。
こんな本です。『 #ばぶでもわかるおぶざばぶる :D3.jsとObservableではじめるデータビジュアライゼーション』（すぎもと組編・2020） #ばぶ本 #技術書典 https://t.co/yuK7YvQTy6 pic.twitter.com/MhJpXDd1mh
— SUGIMOTO Tatsuo 杉本達應＠技術書典 応援祭 (@sugi2000) March 18, 2020
はじめに
第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など）があれば、ちょっとしたスケッチを描くように可視化できるので、ぜひ体験していただきたいです。
わたしのObservableノートブックは200個を超えています。
デザイナーの方でも、エンジニアの方でも、データの可視化にすこしでも興味のある方は、ぜひ読んでいただきたいです。また、学生やお子さんも、プログラミングの入門として気軽に読んでいただけます。
感想は、ハッシュタグ #ばぶでもわかるおぶざばぶる #ばぶ本 でお待ちしています。続編の希望があれば、動的なデータの取り扱いや、ボタンなどをつかったインタラクションなどについても書いてみたいです。
はじめて技術同人誌をつくってみて、よかったと思ったことがいくつかありました。
第一に、誰かといっしょにつくる楽しさがあります。今回は、学生といっしょに作ったことでなんとかできあがりました。ひとりでつくっていたらモチベーションを維持できず、途中で頓挫したかもしれません。
第二に、テーマとなる技術の勉強になります。執筆した学生は、「文章で伝えるって難しいですね」とつぶやいていました。何となく理解しているつもりのことでも、伝えるために文章に起こすと、意外と分かっていなかったりします。だれかに教えるためには、まず書き手が学ぶ必要があるんですね。わたしも内容に間違いがないように、D3.jsのソースコードを確認することがあり、大いに勉強になりました。
第三に、出版物の理解が深まります。同人誌でも商業書籍でも、1冊の本が生まれるまでには、企画、執筆、編集、デザイン、組版、印刷、製本、営業（宣伝）、流通、販売など、数多くのプロセスがあります。同人誌を作ることは、そのプロセス全部に関われます。世の中に流通している本にも、ひとつひとつ制作のストーリーがあることに思いをはせると、本が生まれることへの感謝の気持ちが生まれました。
今回、同人誌最大の醍醐味である対面販売の機会がなくなったのは残念ですが、同人誌づくりは楽しかったです。技術書典に関心のある人は、ぜひ何か作ってみてはいかがでしょうか。複数人で書くのが気楽でよいとおもいます。丸ごと1冊書ける人でも、デザインや校正など他者の協力をもらいながら作ることを強くおすすめします。その方が完成度も上がりますし、なによりつくる過程を楽しめますから。
制作プロセスについては、別途エントリーをあげる予定です。
2018年10月12〜14日に九州大学大橋キャンパスで開催された「2018年度日本デザイン学会秋季企画大会」で、2件の発表をしました。
1つ目は、10月13日のライトニングトーク発表です。
杉本達應「『仮想書棚』の試み」
2つ目は、10月14日の第5支部研究発表会の口頭発表です。
杉本達應「データ可視化の制作プロセスの共有を支援するツールの検討：『データ駆動型デザイン』を学習する技術的環境」
2018年9月16日、福岡県Ruby・コンテンツ産業振興センターで「DxD at Fukuoka データビジュアライゼーションを語る会」を開催しました。共催の「ももち浜TECHカフェ」さんに博多駅至近の会場をご提供いただきました。
開催概要
2018-09-16 「DxD at Fukuoka データビジュアライゼーションを語る会」を開催します – lab.sugimototatsuo.com
多様な領域からご参加いただき、ありがとうございました。昨年から主宰しているDxD研究会をはじめて公開しました。データビジュアライゼーション領域で活動されている山辺さん、矢崎さんをお招きして、それぞれの実践事例など話題提供いただきました。当日は時間が足りず、参加者をまじえた十分なディスカッションができなかったことを反省しています。またデータビジュアライゼーションをテーマのイベントが開催できればと思っています。
（写真：牛島清豪さん、矢崎裕一さん、杉本達應）
当日の発表資料を置いておきます。
データビジュアライゼーションの制作方法を学ぶ
杉本達應
アート+サイエンス、ビジュアライゼーションの現在―産学官連携と実践
山辺真幸さん
参加者限定で共有しました。
見えないものを見ようとして望遠鏡を覗き込んだ
矢崎裕一さん
こちらのリンクをご覧ください。
2018年9月1日、佐賀大学でSMAARTアートマネジメントセミナーを開催しました。今回は、わたしが企画を担当した講座です。
博報堂「生活圏2050」プロジェクトリーダー、鷲尾和彦さんをお招きし、「未来を育む都市：オーストリアの中規模都市の事例を通して」と題してレクチャーをしていただきました。
今回のテーマは、「アルスエレクトロニカ」です。アルスエレクトロニカは、世界中のメディアアート関係者が知る、その世界では有名な芸術祭です。先端的なアートや表現が集結するというイメージですが、今回のお話は文化政策や都市計画の側面が中心です。お話は多岐にわたりましたが、心に残ったポイントをこの記事でまとめます。
この芸術祭が開催されているのはオーストリアのリンツ市。人口約20万人の都市です。オーストリアは人気の観光地ですが、日本語の観光ガイドにリンツ市の情報はほとんど載っていません。もともと鉄鋼業が盛んな工業都市として発展してきたまちで、ウィーンやザルツブルクのような国際的知名度はありませんでした。ところが現在のリンツは、文化産業の都市へと政策転換しています。そのきっかけになったのが、1970年代に市民が主体的にはじめたテクノロジー・アートのお祭りだったそうです。
オーストリアはハプスブルク帝国でしたが、今では小国にとどまっています。リンツはヒトラーの故郷で、彼が都市改造を計画した町でもあります。第二次世界大戦中、近郊にはナチスのマウトハウゼン強制収容所があり、多くの収容者が過酷な労働を課されてしました。戦後は、鉄鋼業の大規模工場によって、ひどい公害問題に悩まされます。近年では、ヨーロッパの「玄関口」として多数の難民が入り込んできています。鷲尾さんによれば、個人の力ではどうにもならない、いわば「大きな力」に左右された「小さな」町であることが、この町の特徴なのです。そのなかで立ち上がった市民主体の芸術祭には、工業都市にいる技術者たちの矜持、反体制的な音楽が生まれる風土も関係しているといいます。芸術祭が、著名なアーティストや有名企業を起用するような「権威」や「抑圧的なパワー」の場に偏らないように、草の根的なプロジェクトも同時に展開し、参加者に「どちらの未来がよいとおもう？」と問いかけるような仕掛けをほどこすといったバランス感覚にも感心させられました。
アルスエレクトロニカでは、国際コンペティション「Prix」（プリ）など、いろいろな取り組みがあります。なかでも印象的なのが、アルスエレクトロニカ社という公社を設立し、事業もてがけていること。アルスエレクトロニカを地方再生の成功事例としてきくと、「日本（の行政の仕組み）ではできない」と感じてしまいます。表面的に「まねしよう」とすると確かにそうかもしれません。鷲尾さんは、安易に真似ようとする風潮に釘を刺し、地中の根を含めた樹の断面図をみせました。「外からおいしそうにみえる果実だけを採って移植しても、ちがう土地でうまく育つわけがない。その土地の土壌（歴史文化）にふさわしいものを根っこから育てていく必要がある」と。
「次の世代のために自分の町をどうしたいですか？」──最後の質問には、小さくても始められることがあるんじゃないですか、という呼びかけに聞こえました。
鷲尾さんは今年もアルスエレクトロニカ・フェスティバルに行かれるとのこと。渡航直前のお忙しいなか、佐賀で貴重なお話を聞かせていただきありがとうございました。
2018年9月16日、福岡県Ruby・コンテンツ産業振興センターでデータビジュアライゼーションに関するトークイベントを開催します。
杉本達應研究室と「ももち浜TECHカフェ」の共催です。
参加申し込みはこちらから。
https://tech-cafe.connpass.com/event/98246/
近年、多様なデータを起点にチャートなどの視覚的表現を生成する「データビジュアライゼーション」が注目されています。この領域をテーマにした「DxD研究会」が福岡で初のトークイベントを開催します。データビジュアライゼーションの教育、実践について話題提供し、この分野に興味をもつみなさんと意見交換します。
福岡県Ruby・コンテンツ産業振興センター 5階プレゼンルーム
福岡市博多区博多駅東1丁目17-1（福岡県福岡東総合庁舎5階）
※博多駅筑紫口から徒歩5分
参加無料
イベントページでお申込みください。受付の際に名刺を頂戴します。
データビジュアライゼーションの制作方法を学ぶ
杉本達應（佐賀大学芸術地域デザイン学部 准教授）
大量のデータが行き交う現在、デザインで学ぶべきものが大きく変化しました。初学者に向けた「可視化のガイドライン」(作成中)を紹介します。
アート+サイエンス、ビジュアライゼーションの現在―産学官連携と実践
山辺真幸（多摩美術大学情報デザイン学科 非常勤講師／慶應塾大学大学院 政策・メディア研究科 後期博士課程）
アートとサイエンスにまたがる２つの「データビジュアライズ」の現在について、大学・企業での取り組みや実践を交えて紹介します。
見えないものを見ようとして望遠鏡を覗き込んだ
矢崎裕一（Data Visualization Japan ファウンダー／Code For Tokyo 共同代表／多摩美術大学情報デザイン学科 非常勤講師）
人類が何を可視化してきたのか、過去の一部を駆け足で振り返りながら、今後の発展可能性について話題提供します。
主催 佐賀大学 芸術地域デザイン学部 杉本達應研究室
lab.sugimototatsuo.com
共催 システム開発技術カレッジ
（公益財団法人 福岡県産業・科学技術振興財団）
本研究会はJSPS科研費JP16K00462の助成を受けたものです。
