感染症の伝播と集団免疫効果を視覚化する。
先日、たまたま見つけて購入した「Nature in Code」に掲載されていた、感染症シミュレーション(SIRモデル)が面白そうだったので作成してみた。 demo 白いセルが感染可能者（感染する前の健康な人）、赤いセルが感染者、緑のセルが隔離者（死亡、もしくは快復して免疫を獲得した人）となる。 参考書のコードを少しカスタマイズして、感染率や隔離率を調整できるようにした。 感染率が高いと早く広範囲に感染が広がり、隔離率が高いと早く収束する。 数値は、「初期感染者」以外は、０〜１の値で割合を示す。例えば、感染率が1の場合、隣接する感染可能者は100%感染する。 初期免疫保持者率は、感染が広がる前に免疫を獲得している人（灰色）の割合。 初期免疫保持者が多いと、拡散せずに早期に収束する。（集団免疫効果） このシミュレーターだと初期隔離者がランダムに配置されるため、集団免疫率は入力した数値より低くな
データビジュアライゼーションにおける「わかりやすい」という偏見。あるいは、ベジータ ピンクシャツ問題。
データビュジュアライゼーションでは「分かりやすく伝える」ということが重要になりますが、時としてその分かりやすさがステレオタイプやジェンダースキーマなどと結びついている場合があります。 最近、「ステレオタイプに基づいた”わかりやすさ”は、アリなんだろうか？」という点にについて色々と調べてみたりしているので、とくに結論は出ていないのですが参考とした資料などを載せておきます。 主に、色に関して調べた内容となっています。 男の子が選ばない色としてのピンク 幼児が色を選択する際のジェンダースキーマの影響を研究した論文があります。 CiNii 論文 – 幼児の色彩選好と親のジェンダー意識 : ピンク色選好にみられるジェンダー・スキーマー 幼稚園・保育園児310名に14色「赤色・ピンク色・オレンジ色・黄色・黄緑色・緑色・水色・青色・紺色・紫色・茶色・自色・黒色・灰色」の中から好きな色とその選好理由の回
D3.jsの参考書、２０冊。
ebook D3.jsの奥深くまで辿ったD3マニアのためのマニア本。サテライトプロジェクションの解説とか、おそらく他の参考書には載っていません。 ほぼ全域をカバーしていますが、「業務でダッシュボードを作る必要があって……」とか、ベーシックなチャートの作り方などを知りたい方には過負荷かも。 コンテンツとしてデータビジュアライゼーションを作製する必要があり、オリジナリティが求められるためD3を使いたいという人や、「D3好きすぎるのでなんでも知りたい」という人向けですね。 あとは、D3の地図描画機能の詳細な解説やcanvas上へのチャート描画の方法など、他にはあまり掲載されていない手法について解説されているので、そこらへん知りたい方にオススメ。
D3.jsとHummer.jsを組み合わせてスマートフォン対応を行う
もともと、D3ではdragビヘイビア／zoomビヘイビアがスマートフォンの操作に対応していますし、touchstart、touchmove、touchendなどのDOMイベントを利用すればスマートフォンの操作に対応することはできるのですが、スワイプの判定などを独自に実装するのは結構面倒だったりします。 そこで、タッチ操作対応ライブラリとして有名なHummer.jsを利用してD3で作成したチャートをタッチ操作に対応させてみました。 サンプル Force Layoutで生成したノードにスワイプイベントのリスナーを設定しています。ノードをタッチしたりスワイプするとアラートがでます。 example スマートフォンでアクセスし、「Open in a new window.」のリンクをクリックして試してみてください。 （Chromeの開発者ツールにあるエミュレータ機能を使えばPCでもスワイプイベント
悲劇的なデータを美しく視覚化することの是非
HIROSHIMA VISUALIZED 広島市への原子爆弾投下を視覚化したデータビジュアライゼーションが、興味深い議論を巻き起こしていたので紹介します。 Why You Don’t Make A Mindlessly Beautiful Visualization Of A Horrific Event データの視覚化は、時として冷たい印象を与えてしまうことがあります。 上記記事では、特に悲劇的なデータ(今回の場合は広島市への原子爆弾投下について)を美しく表現することの是非についてTwitterで生まれた議論を掲載しています。 問題点としては、「美しい」ということより、美しく表現することが目的化してしまっているように見えるデータビジュアライゼーションは、戦争被害などのデータを視覚化する際の表現として適切なのか？ が焦点となっています。 自分自身としては、ビジュアルを主軸としたメディアアー
ハッカソン向けD3リソース集。
D3の絡みでハッカソン等によばれたとき、リソースについての質問が結構あったのでまとめてみました。 ハッカソン前に目を通しておくと時間の短縮になるかも。 公式 とりあえず公式サイト D3.js – Data-Driven Documents APIリファレンス サンプル Gallery(公式) d3のメソッド名などからサンプルを検索できる。 bl.ocksplorer.org – Learn d3.js by Example ドキュメント D3 入門 | スコット・マレイ 逆引きで調べたいときはこちら D3.js例文辞典 その他、もろもろ。 データビジュアライゼーション（D3.js）を学ぶための教材まとめ SVG svg要素の基本的な使い方まとめ プラグインその他 欲しいものがみつかるかも。 D3.js プラグインまとめ 場合によっては、D3を直接弄るより圧倒的に早くチャートを表示できる。
ブラウザおよびnode.jsのための高度な地理空間データ分析ライブラリ「turf.js」
選択した範囲内の家賃相場を求めるとかいろんなことに使えます。 example Turf.jsはMapbox社謹製の地理空間データ分析ライブラリです。ピュアJavaScriptで作成されていてフロントエンドでもサーバーサイドでも動作します。 Turfの特徴としては、対応するデータ形式をGeoJSONを絞っており、基本GeoJSONで受け取ったデータを分析して分析結果をGeoJSONで返すといったライブラリになっています。 そのため、GeoJSONに対応した地図ライブラリと組み合わせることで、分析結果を簡単に視覚化することができます。もちろんD3.jsと組み合わせて使うのも簡単！ いろいろな可能性を秘めた今後が楽しみなライブラリです。 今回は入門編として、Leaflet上で選択した範囲内のデータの基本統計量を計算します。 マーカーのプロパティには、それぞれ「value」値が設定されていて、選択
Excel上でD3.jsを使ったグラフを表示する「E2D3」を使ってオリジナルなグラフを表示してみた。
※記事内の情報が古くなっています。 ファーストインプレッション！ E2D3 ver. 0.2 (Excel to D3) | MA【エム・エー】 by Mashup Awards Excelでいつも作っているグラフをもっと恰好良くしたくないですか？でも，デザインソフトを自分で習得するには時間がかかりますし，グラフ作成をデザイナーに依頼にはお金がかかります．そこで我々は，ExcelからD3ライブラリーを簡単に呼び出せるOffice用アプリE2D3（Excel to D3）を開発しました．D3は2014年，世界で最も注目されているグラフィックライブラリーです．E2D3を使えば，D3の詳細な中身を理解する必要なく，簡単なExcel操作のみでビジュアルインパクトが強烈なグラフを作成できるようになります！ 以前から注目していた「E2D3」がリリースされたそうなので使ってみました。 詳しい内容は以下の
目的別お勧めプログラミング言語
いまやプログラミング言語は百花繚乱の戦国時代。あまりにも選択肢が多すぎて入門者なにを選んでいいのかさっぱりわからないという状態になっています。 そこで、やりたいことに合わせてオススメのプログラミング言語を紹介してみることにしました。 目的に合わせて、適切なプログラミング言語を選択しましょう！ Webサイトを作る HTML + CSS + JavaScript フロントエンドプログラミング JavaScript サーバーサイドプログラミング node.js デスクトップアプリ作りたい Electron node-webkit , Rhino, HTA+JScript モバイルアプリ作成
【D3.js】 LeafletにSVGをオーバーレイする。
Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。 今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。 (まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません) サンプル D3.jsとともにLeaflet.jsとleaflet.cssを読み込んでください。 <!-- leafletのcssを読み込む --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6H
ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ
「データビジュアライゼーション（D3.js）を学ぶための教材まとめ」も大分量が増えてきて、初めてD3.jsを学ぶという人にはどこから手をつけて良いものか解りづらくなってきました。 そこで、ゴールデンウィーク中にD3.jsを学んでみたいという方に、いくつか厳選してお勧めしてみたいと思います。 スライドを眺める まずはD3.jsがどんなライブラリなのか把握しましょう。 ・about d3.js チュートリアルを学ぶ とりあえず分量・内容的に下記のチュートリアルがお勧めです。 ・D3 チュートリアル｜スコット・マレイ｜alignedleft 余裕があっていろんなレイアウトのグラフを描いてみたいなら、下記サイトを。 ・svg要素の基本的な使い方まとめ コード共有サイトを使って実践 チュートリアルを手軽に試すなら、コード共有サイトを利用するのが楽チンです。 jsdo.it, jsfiddle, Tr
iPhoneやiPadで気軽にD3.jsを試せる開発環境「Procoding」
Procoding Processing.jsやPaper.jsなどのグラフィックライブラリを利用したプログラミングを気軽に行えるアプリ「Prociding」が、バージョンアップしてD3.jsにも対応しました。 Procodingは、エディタとプレビュー機能を備えた開発環境です。 エディタには構文強調表示、自動補完などの機能が備わっており、常時JSHintによってシンタックスのチェックが行われます。プレビュー画面にはエラーコンソールついているので、エラーを確認するのも簡単です。 これでDOMの状態を確認できる機能などがあればかなり便利なのですが、残念ながら今のところありません。 手軽にiPhoneを使ってD3.jsプログラミングが楽しめるのでお勧めです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
