Material DesignBuild beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
データ視覚化のデザイン #1｜Go Ando / PREDUCTS / THE GUILD
こんにちは、THE GUILDの @goando です。 私はTHE GUILDの中でもデータを扱う仕事を中心に活動しており、「UXの改善をデータでサポートする」をミッションに取り組んでいます。 ざっくり言うと、THE GUILDのクライアント企業が運営するサービスのログを分析してユーザーの行動傾向からUXの改善点を見つけ出したり、マーケットの市場リサーチを通じてサービスの戦略の策定を支援したり、と言った内容です。 こうした活動を通じて、データ分析の結果をグラフ等のレポートに落とし込むという事を数多く行ってきました。 試行錯誤を繰り返しつつ、データをどのようなデザインで視覚化するとメッセージが伝わりやすいのか、逆にどういう点に気をつけないと誤解を与えやすいのか、といったノウハウを少しずつ蓄積してきました。 データ分析を台無しにするダメグラフかく言う私もかつて、そのグラフから何が言いたいのか
pythonでデータを可視化したいならseabornを使おう！ - Qiita
pythonでデータを可視化するのにmatplotlibを使う人は多いと思いますが、seabornというmatplotlibのラッパーが素晴らしく便利です。 インストール まずはseabornをインストールします。pipもしくはcondaでインストールできます。
機械学習手法を用いてブログの文章を分析・可視化（テキストマイニング） - karaage. [からあげ]
自分のブログのテキストを分析・可視化してみたい 以前自分のブログの分析を「内部リンク」や「はてブ情報」の観点で行ってみました。 ただ、目的無く分析してしまったので、結局イマイチどう活用してよいかよく分からない結果しか得られませんでした。 そんな前回の反省を全く活かすことなく、また何の目的もなくブログを分析してみることにしました。今回は以前から興味のあった機械学習を用いたブログの文章の分析・可視化（テキストマイニングと呼ばれるらしいです）にチャレンジしてみることにしました。どちらかというとテキストマイニングが主で、使用する素材（学習データ）に困ったので仕方なく自分のブログを使ってみたというのが正直なところです。 ネットでコピペすりゃ簡単にできるだろと思っていたのですが、自分のやりたいことするのはそれなりに大変だったので、知見としてやり方とどんなことが分かるのかを残しておきます。 ブログのテキ
![機械学習手法を用いてブログの文章を分析・可視化（テキストマイニング） - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4526bda35cd6dd1d734fd58bf28151217deccc11/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20180208%2F20180208010932.png)
2017年後半に感動したビジネスモデルまとめ10個｜チャーリー
チャーリーです。 ビジネスモデルを図解するシリーズを息抜きにはじめました。ひとまず10個まで書いたので、noteにまとめておきます。 100の事例を図解した「ビジネスモデル2.0図鑑」という本を発売しています（本記事の事例ふくむ）。予約開始と同時にnoteで全文無料公開という試みをやっています。本記事に興味を持ったらそちらもどうぞ！ ビジネスモデル図解シリーズを始めるきっかけになったサービス、Lemonade。 AMPの記事にわかりやすく詳細が書かれてるので引用。 ソーシャルインシュランスにおいて重要になるのが、どのようにしてグループを組めば、グループ内での保険の請求額が、そのグループにプールされている金額を超えないかだ。 Lemonadeでは、サービスに加入する際に、自身が関心のある社会課題を選ぶ。社会課題の中には支援や病児支援などが存在する。その社会課題に基づいてグループ分けが行われ、
Pythonの可視化ツールはHoloViewsが標準になるかもしれない - Qiita
HoloViewsとは HoloViews は砕けた表現をすると、matplotlibやBokehなどの可視化ツールを使いやすくしたラッパです。 どのバックエンド(matplotlib, Bokehなど)を用いても統一されたコードかつ簡素な記述で可視化を実装することができます。 可視化にかかる学習コストは結構ばかにならないので、HoloViewsを使うことで「可視化のコードを書くことに時間を浪費するのではなく、本来のデータ分析などの業務に集中しましょう」といった感じのコンセプトのようです。 特にmatplotlibのシンタックスは難解なものが多いので、「もう少しシンプルにならないの？」と思っている方は多いのではないでしょうか。 バックエンド 下記の可視化ツールがバックエンドとして使えます。 matplotlib Bokeh Plotly(experimental) インストール conda
なぜ二次元のグラフにするか
先日，「宿題をするのにコンピュータをどれほど使うか」という問いに対する回答の国際比較グラフをツイッターで発信したところ，多くの方に興味を持っていただきました。 横軸に「全く or ほとんど使わない」，縦軸に「ほぼ毎日 or 毎日使う」の回答比率をとった座標上に，世界各国を配置した二次元のグラフです。 https://twitter.com/tmaita77/status/844103078437502977 日本は圧倒的に前者が多く後者がほぼ皆無なので，右下の外れた位置にあります。日本の学校教育のICT化の遅れはよく言われますが，それが怖いくらいに可視化されているので，「おお」と思われた方が多かったのでしょう。 一方，疑問も呈されました。「なぜ二次元の散布図にするのか。普通は棒グラフだろう」と。なるほど，もっともな疑問ですが，何でもかんでもオーソドックスな棒グラフにすればいいってものでもあ
感染症の伝播と集団免疫効果を視覚化する。
先日、たまたま見つけて購入した「Nature in Code」に掲載されていた、感染症シミュレーション(SIRモデル)が面白そうだったので作成してみた。 demo 白いセルが感染可能者（感染する前の健康な人）、赤いセルが感染者、緑のセルが隔離者（死亡、もしくは快復して免疫を獲得した人）となる。 参考書のコードを少しカスタマイズして、感染率や隔離率を調整できるようにした。 感染率が高いと早く広範囲に感染が広がり、隔離率が高いと早く収束する。 数値は、「初期感染者」以外は、０〜１の値で割合を示す。例えば、感染率が1の場合、隣接する感染可能者は100%感染する。 初期免疫保持者率は、感染が広がる前に免疫を獲得している人（灰色）の割合。 初期免疫保持者が多いと、拡散せずに早期に収束する。（集団免疫効果） このシミュレーターだと初期隔離者がランダムに配置されるため、集団免疫率は入力した数値より低くな
小学生のプアとリッチの比較
11月5日の記事では，中年男性のプアとリッチで，属性，読書嗜好，自己イメージなどがどう違うかを比較しました。どの項目も大きな差があり，たとえば「今の生活に満足している」の割合は，プアが21.4％に対し，リッチは62.1％です。 しからば，子どもではどうか。自我が未熟で稼得能力のない子どもの場合，生活行動や意識は家庭環境に強く規定されるとみられます。 たとえば，勉強の得意度（自己評定）の一つをとっても，家庭の年収と非常に強く相関しています。国立青少年教育振興機構の『青少年の体験活動等に関する実態調査』（2014年度）では，小4～小6の対象児童に限り，家庭（世帯）の年収も把握しています。保護者調査票の問14です。 http://www.niye.go.jp/kenkyu_houkoku/contents/detail/i/107/ これを，勉強の得意度（本人回答）とクロスさせると，結果は下図の
Google の可視化ツールの Data Studio を試してみた - 唯物是真 @Scaled_Wurm
Google Data Studio (データスタジオ) という可視化サービスがベータ版で使えるようになっていたので試してみた 見たい数値を一覧するためのダッシュボード的なものを作るためのサービスなので、いろんな場所からデータを取ってきて一箇所でまとめて確認するのが用途っぽい(今のところ似たようなサービス・ツールの方が機能が多そう データソース データソースとしてGoogle AnalyticsやBigQuery、Google Spreadsheet、MySQLなどを選んでデータを取ってこれる データソースを選んでGUIでグラフやテキストを配置していく データの既存のフィールドに関数を適用した結果の値を使うこともできる 使える関数のリスト 下の画像ではGoogle Analyticsの「ブラウザ」(Chrome, Firefoxなど)と「ブラウザのバージョン」(バージョンの番号)をCONC
データビジュアライゼーションにおける「わかりやすい」という偏見。あるいは、ベジータ ピンクシャツ問題。
データビュジュアライゼーションでは「分かりやすく伝える」ということが重要になりますが、時としてその分かりやすさがステレオタイプやジェンダースキーマなどと結びついている場合があります。 最近、「ステレオタイプに基づいた”わかりやすさ”は、アリなんだろうか？」という点にについて色々と調べてみたりしているので、とくに結論は出ていないのですが参考とした資料などを載せておきます。 主に、色に関して調べた内容となっています。 男の子が選ばない色としてのピンク 幼児が色を選択する際のジェンダースキーマの影響を研究した論文があります。 CiNii 論文 – 幼児の色彩選好と親のジェンダー意識 : ピンク色選好にみられるジェンダー・スキーマー 幼稚園・保育園児310名に14色「赤色・ピンク色・オレンジ色・黄色・黄緑色・緑色・水色・青色・紺色・紫色・茶色・自色・黒色・灰色」の中から好きな色とその選好理由の回
聞いてはいけない 残酷すぎるデータ4
自殺率 昭和30年代は20代が高かったが、今世紀は…… いつの間にか、本連載も18回目になりました。「データで社会を読み解く論稿」ということで、自由奔放に書かせていただいていますが、「たまには、読者のビジネスマンの参考になるようなネタを……」というのが編集部さんのホンネでしょう。 私はビジネスのノウハウなど微塵も知りませんが、データを効果的に表現するユニークなグラフ技法の紹介はどうかな、と考えました。現代は「エビデンス」の時代。企画立案の会議などでは、データを交えたプレゼンテーションが求められることが多いでしょう。 その時に力を発揮するのがグラフですが、このような見せ方のグラフ技法はどうか、という提案をしてみようと思います。私のエゴが入った作品ばかりで、皆さんの参考になるか分かりませんが、気軽に読んでいただければ幸いです。 まずは、自殺率のグラフです。 初っ端から物騒な話題ですが、社会病理
カッコいいグラフがむちゃくちゃ簡単に描ける！Chart.js 2.0がスゴい
データビジュアライゼーション系のライブラリーといえば、D3.jsが有名。でも、シンプルなグラフをWebで描くだけなら、もっと手軽なChat.jsを使ってみてもいいかもしれません。 Webサイトのデータ量が多いときは、データを見やすくするための方法を見つけなければなりません。なんだかんだと、人間は数値データの長いリストを理解するのが得意ではありません。 そこで、チャートやグラフが役に立ちます。チャートやグラフを使えば、 複雑な統計関連のデータが分かりやすく直観的に理解できるようになるのはもちろんのこと、英語を話さない人でも利用可能になります。基本的なチャートであればみな同じスピードで理解できますが、専門用語が散りばめられた文章ではそうはいきません。 必要に応じてチャートを使えば、Webサイトは理解しやすくなり、見た目ももっと魅力的になります。 本記事ではChart.jsと呼ばれるJavaSc
【Slack×Re:dash】リアルタイムKPI通知をコード0行で実現する - Gunosyデータ分析ブログ
データ分析部で部長をしている@cou_zです。最近はLIBROのマイクロフォンコントローラーをよく聴いています。 Gunosyにおけるプロダクト改善は、データ可視化による現状把握から始まると考えています。 ログを収集して、ダッシュボードでKPI(重要業績指標)を可視化することは、今では当たり前のことになっていると思います。深夜バッチでKPIを集計して、翌朝に確認することは重要ですが、KPIをリアルタイムに知ることによって、現状把握がさらに進むことがあります。 しかし、リアルタイムにKPIを集計できたとしても、実際にそれらを確認するとは限りません。頻繁にダッシュボードを見るのはとても億劫で、次第に見なくなってしまいがちです。そこで、日常的に開いているチャットにKPIがリアルタイムに通知されると、確認の際の負担を軽減することができます。 Gunosyでは、チャットツールにSlackをダッシュボ
JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Visualize Your Website Structure in 7 Steps
Data visualization platform | Observable
7 data visualization techniques for location
最近「インフォグラフィックス」をよく見かけるのはなぜ？ | ライフハッカー・ジャパン
どのグラフを使えば良いか提案してくれるサイト「The Data Visualisation Catalogue」 | ライフハッカー・ジャパン
