tag:blogger.com,1999:blog-59032160821948519062024-03-19T04:17:09.380-07:00Toshi's NoteBooktoshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-5903216082194851906.post-53608140669242462412015-03-17T22:00:00.000-07:002015-03-25T03:30:36.991-07:00チャートアセンブル!【翻訳】<div style="padding:10px; background: #f6f6f6; border-radius: 2px;">
<span style="color: #666666;">この記事は作者</span><a href="https://twitter.com/jcukier" target="_blank">Jerome</a><span style="color: #666666;">さんの同意を得て翻訳したもので5つの一連の記事の5つ目です。</span><br />
<span style="color: #666666;">SOURCE: </span><a href="http://www.jeromecukier.net/blog/2015/02/07/charts-assemble/" target="_blank">Charts, assemble!</a><br />
<span style="color: #666666;">1. <a href="http://toshiha.blogspot.com/2015/03/dashboards-ahoy.html">ハロー、ダッシュボード!</a></span><br />
<span style="color: #666666;">2.<a href="http://toshiha.blogspot.com/2015/03/charts-in-the-age-of-the-web.html">Web時代のチャート</a></span><br />
<span style="color: #666666;">3.<a href="http://toshiha.blogspot.com/2015/03/dashboards-versus-data-visualization.html">ダッシュボード vs データビジュアライゼーション</a></span><br />
<span style="color: #666666;">4.<a href="http://toshiha.blogspot.com/2015/03/dashboards-as-products.html">プロダクトとしてのダッシュボード</a></span><br />
<span style="color: #666666;">5.チャートアセンブル!</span><br />
</div>
<br />
<a href="http://toshiha.blogspot.com/2015/03/dashboards-as-products.html">前回</a>の記事から 、ダッシュボードは、特定の問題を解決するためのツールであることが分かっていただけたかと思います。これらはまた、個々のチャートとデータから構成されます。<br />
<br />
<h3>
情報を選択する</h3>
<div>
ダッシュボードが特定の目的に特化しているのは望ましいです。なぜなら、解決しようとしている問題があるからこそ「1.情報の取捨選択」、「2.優先順位付け」ができるからです。それはダッシュボードデザインの本質的な2つのタスクです。繰り返し言いますが、我々が持っているすべてのデータポイント表示する必要はありません。</div>
<div>
<br /></div>
<div>
これらの2つのタスクを行うのにユーザー調査は大変役立ちます。デザイナーとして、我々は正しいメトリックを選んだと思うかもしれませんがユーザーにきちんと響く必要があります。私達は比較的取得やすいデータだったり、自分たちにとってうなずけるデータを好む傾向があります(つまり楽をする)。しかしユーザーによって意味のあるデータはもっと複雑で洗練されていて、でもデータを集めるのが難しいものかもしれません。</div>
<div>
<br /></div>
<div>
以下はその実例です。<br />
<br /></div>
<div>
私がFacebookでAudience Insightsに携わっていた時、私達はマーケターのために、あるグループがFacebookの中である事に対してどのように興味を持つことが出来たか?、という理解をサポートする<a href="https://www.facebook.com/ads/audience_insights/activity?age=18-&country=US&interests=6003349754405" target="_blank">ページ</a>をデザインしました。(リンク/スクリーンショットは、 Golden State Warriorのファンの例)。私たちはFacebookのユーザーを分類する主な方法の1つは、直近の4週間のうち、何日Facebookにいたか?ということです。それは、L28と呼ばれるメトリックでFacebookが人々を理解しているハイレベルのメトリックの1つです。私たちは、このページの最初のバージョンでそれをインテグレートしました。しかしそれはFacebookだけのユニークなメトリックではないにも関わらず(よくあるメトリックなのに)、ユーザーにとって有益なものではなく、もっと適切なメトリックよりも場所をとっていました。<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jeromecukier.net/projects/dashboards/AI%20activity.png" imageanchor="1"><img alt="" border="0" src="http://jeromecukier.net/projects/dashboards/AI%20activity.png" title="" width="750" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
その代わりに目前のタスクにもっと関連の高いメトリックを組みこみました。(ユーザーのアクティビティのプリズムを通してよりユーザーの感覚が得られるような)例えば、Warriorsのファンは一般的なFacebookユーザーに比べて、PCのみという人がかなり少ないです。彼らはアプリよりもモバイルwebでサイトをちら見する傾向があり、またAndroidを使っているユーザーが多いです。彼らはShare、Comment、Likeなどでよりアクティブに行動しています。(訳者注:グレーのエリアが一般的なFacebookユーザー)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
情報ハイラルキー</h3>
<div>
情報が選択され、どの情報が他よりも大事か分かれば、それをビジュアルに表現することができます。ここでは、いくつかのチョイスを紹介します。</div>
<div>
<br /></div>
<h4>
いくつかのメトリックスを他の物より上部に、もしくは大きく表示します</h4>
<div>
ハイラルキーと優先順位付けのことを考えればこれは当然のことと言えるでしょう。一般的にユーザーに覚えてほしい最も重要なことを表す1〜3の変数を考えましょう。もし、3つ以上思いつくのであれば、タスクを精査し、そのタスクを2つに分割する必要があります。</div>
<div>
<br /></div>
<div>
変数の残りの部分はこれらのスーパーハイレベルのメトリックをサポートします。ここでも、典型的な状況では、(3以上は再考する余地があります)最大3つのレベルを思い付くことができます。一部のメトリックは、ハイレベルのメトリックをサポートすることができます(すなわち、異なる角度でそれらを表示したり、それらを説明します)と、いくつかの測定基準は、順番にそれらをサポートすることができます。</div>
<div>
<br /></div>
<h4>
一緒にいくつかのメトリックを一緒に表示する</h4>
<div>
Stephenはダッシュボードは1ページにフィットすべきと主張しています。ダッシュボードの美徳は情報を一緒に表示することだからです。しかし、モダンなWebの柔軟性、モバイルの制約を考慮するとこれは絶対的ではないでしょう。しかし、複数の変数を同時に見ることは価値があることもあるというのもまた事実です。そういう意味で、cssのfixedを用いて、常に画面上に表示する要素を持つことも意味があると思います。</div>
<div>
<br /></div>
<h4>
いくつかのメトリックを2つ目のカードに(マウスオーバー、ポップアップ、またはドリルダウンビュー)</h4>
<div>
情報のハイラルキーは、単に重要な情報を格上げするということではありません。情報の格下げもまた重要です。インタラクティブなダッシュボードの素晴らしいところは、そのための多くのメカニズムがあることです。一部の情報は、「オンデマンド用の詳細」として保持し、必要なときにのみ表示することができます。</div>
<div>
<br /></div>
<h4>
データに与えるフォームを見つけ出す</h4>
<div>
あなたはデータを持っています。それはおそらく、時間とともに変化する(そしてヒストリーデータもあるでしょう)。そしてそれはいかに重要であるかもご存知のとおりです。</div>
<div>
<br /></div>
<div>
静的数値として表す(そして、さらに、その数値の精度を調整する)ことができ、または時系列として(すなわち、折れ線チャート、エリアチャート、棒チャートなど)、またはその両方も可です。</div>
<div>
<br /></div>
<div>
答えるためのキーとなる質問は最新の図表に対して、ヒストリー全体とある時間の中で変化したメトリックのどちらが重要で関連性があるか?ということです。もし、ヒストリーが常に重要、もしくはいかなる文脈においても害がないと思っているのであれば、もう一度考えてください、その重要性が明確に証明されない限り、それはただの要約されたビジュアルエレメントですし、誤解されやすいものでもあります。たとえそれはちいさなスパークラインでも、です。(訳者注:時系列のヒストリーをただ出せばよいというものではなく(ダッシュボードらしくはみえるけれども)、その変化に意味がないのであれば出す必要はないということです)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i0.wp.com/www.jeromecukier.net/projects/dashboards/jl-facebook-insights-overview.png?resize=482%2C492" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i0.wp.com/www.jeromecukier.net/projects/dashboards/jl-facebook-insights-overview.png?resize=482%2C492" /></a></div>
<br />
これは私がFacebookで関わった適切なハイラルキー構造を適用した別の例です。<br />
<br />
Page InsightsはFacebook PageにおけるGoogle Analyticsのようなものです。当然のことながら、左上に置くメトリックは、Page Likesです。全体のポイントは、人々に何がすの数字に影響を与えたか、どのように成長したかを理解させることです。2つのハイレベルのメトリックが右側のカードの同じ列に表示されています。Post Reach for the week(今週、このFacebook Pageからコンテンツ見ている人の数)とEngagement(コンテンツにアクションした人々の数 - Like、Comment、Share、クリックなど)です。<br />
<br />
The number of new Page Likesはラインチャートと数字の両方で表示されており、レベル2のメトリックの例です。それはトップメトリックであるTotal Page Likesをサポートしてます。折れ線グラフはメトリックレベル3のメトリックとして表示されています。それは今週のものと比較されており、それにより先週は良い週であったことを理解するのを助けてくれます。<br />
<br />
<h3>
点をつなげる</h3>
</div>
<div>
最終的には、ダッシュボードはチャートの集合以上のものです。これは、アンサンブルともいえます:チャートとデータが秩序と構造によって全体として順序と構造で、全体として消費されることを意味します。一緒に表示されているチャートは一緒に見られるべきです。そのように得られた情報は、ただ並べた情報よりもはるかに有用なはずです。<br />
<br />
<a href="http://www.infovis-wiki.net/index.php?title=Linking_and_Brushing" target="_blank">Linking</a>は与えられたチャートのエレメントを他のチャートの影響と共に強調表示するためのコンセプトです。一般的な使用例は、一特定の時点についてのデータを見て、関連するチャートでのその時点の値を参照することです。以下に例を示します。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i1.wp.com/www.jeromecukier.net/projects/dashboards/linking.png?resize=784%2C212" imageanchor="1"><img alt="" border="0" src="http://i1.wp.com/www.jeromecukier.net/projects/dashboards/linking.png?resize=784%2C212" title="" width="750" /></a></div>
<br /></div>
<div>
この例では両方のグラフが同じx軸を共有することは、linkingしなくとも容易にも両方のグラフの形状を比較することを可能にしています。<br />
<br /></div>
<div>
<div>
各変数には、それぞれののチャート上にある必要はありません。変数は、お互いの暗黙的なリレーションを持つことができます。それらを一緒ににすることで、明示的な関係を示すことが出来るかもしれません。ここで正しいチャートを選択することによって明らかになる興味深い変数や変数の属性の関係性があります。</div>
<div>
<br /></div>
<div>
<ul>
<li><b>1つの変数はつねに他の物より大きいことがありえます</b>、なぜならその2つ目は1つ目のサブセットのデータだからである。ここではそのいくつかの例を示します:</li>
</ul>
<ol>
<li>ウェブサイト上の訪問先週の数は常にユニークユーザー数より大きくなる</li>
<li>来場者数は常に初めての訪問者数より大きくなる</li>
<li>ある期間にわたって注文の累積数は、 常に 、同じ期間にわたる毎日の数よりも大きくなる</li>
<li>ユーザーがブラウザを開いている時間は彼らが積極的にサイトとの対話に費やす時間よりも大きくなる</li>
</ol>
<div>
ここで興味深いのは、これらの関係が経験則からいえることではなく、定義として正しいということです。また、同じ単位で表されるメトリックだと、ほとんどの場合、同程度の大きさを持つので、それらは同じグラフ上に表示することができます。当てはまる場合、一緒に表示することで、いかに同じように変動したか、もしくはしてないかを示すことができます。</div>
</div>
<div>
<ul>
<li><b>1つの変数はさほど重要でない2つの変数の和である可能性があります</b>:</li>
</ul>
<div>
下の例では、さらに一歩進み、1つの変数は他の2つの変数の和 - 1つの変数という例を示しています。<br />
ここで、前日との差として正味の数量としてのLike数を見ることが出来ます。人々がよりLikeするような2つの要因があります。Paid likes(ユーザーは広告みて、興味をもちLikeする)もしくはオーガニックlikes(ユーザーはページを訪問してLikeする)。最終的にユーザーはLikeをやめることもあります。</div>
<div>
<br />
正味のLike数 = オーガニックLike数 + paid like数 - unlike数<br />
<br />
我々が、オーガニックLike数 + paid like数を分けた理由はFacebook Adが良いコンテンツの効果を増幅することができることを示したかったからです。視覚的には、それを残りの最も上のレイヤーに配置しました。(あなたのダッシュボードは、中立的である必要はありません。)もしそればあなたのプロダクト、会社、チーム等が提供しようとするものを示すのであれば、それをデモする機会があるのであれば、気にせずやってください。正の変数とは対照的に、負の数としてunlikesを示すことによって、我々は視覚的な読みやすく、整頓された状態を保つことができます(予測できないことになる)ユーザは、すべてのこれらの変数の視覚的な組み合わせを行うことができます。ちなみにこのチャートはページの典型的なダイナミックなページの動きを見ることができます。新しいコンテンツは新規のユーザーのピークにつながりますが、同時に何人かのユーザーのunlikeを引き起こします。</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i0.wp.com/www.jeromecukier.net/projects/dashboards/net-likes-1024x454.png" imageanchor="1"><img alt="" border="0" src="http://i0.wp.com/www.jeromecukier.net/projects/dashboards/net-likes-1024x454.png" title="" width="750" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li><b>ある変数は常に増加している可能性があります</b>:</li>
</ul>
そうである場合、以下の方法も選択肢の1つです。もし変数が常に増えている(例:累積収入)のであれば、実際の数字ではなく成長率を使うことが出来ます。そうでないと、軸の単位を時間に沿って変えていく必要がでてきます。(もし1日の売上が1億円前後であれば、10億円まであれば1週間には十分ですが、月、年単位では不十分です、一方で成長率であれば、長い期間での一貫した軸を持つことができます)変数(例:株価)は常に正であれば、y軸はは0からスタートできるし、チャートのネガティブ領域を利用すれば任意の正の値から始めることもできます。<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
反対に、変数が変化していないからといって、それが意味のない情報というわけではありません。変更がないということはシステムの健全性の兆候である可能性があります。だから、変化がないことは、メッセージのメッセージがないということではないのです。</div>
</div>toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0tag:blogger.com,1999:blog-5903216082194851906.post-88282778295550915112015-03-17T21:51:00.000-07:002015-03-25T03:27:39.656-07:00プロダクトとしてのダッシュボード【翻訳】<div style="padding:10px; background: #f6f6f6; border-radius: 2px;">
<span style="color: #666666;">この記事は作者</span><a href="https://twitter.com/jcukier" target="_blank">Jerome</a><span style="color: #666666;">さんの同意を得て翻訳したもので5つの一連の記事の4つ目です。</span><br />
<span style="color: #666666;">SOURCE: </span><a href="http://www.jeromecukier.net/blog/2015/02/07/dashboards-as-products/" target="_blank">Dashboards as products</a><br />
<span style="color: #666666;">1. <a href="http://toshiha.blogspot.com/2015/03/dashboards-ahoy.html">ハロー、ダッシュボード!</a></span><br />
<span style="color: #666666;">2.<a href="http://toshiha.blogspot.com/2015/03/charts-in-the-age-of-the-web.html">Web時代のチャート</a></span><br />
<span style="color: #666666;">3.<a href="http://toshiha.blogspot.com/2015/03/dashboards-versus-data-visualization.html">ダッシュボード vs データビジュアライゼーション</a></span><br />
<span style="color: #666666;">4.プロダクトとしてのダッシュボード</span><br />
<span style="color: #666666;">5.<a href="http://toshiha.blogspot.com/2015/03/charts-assemble.html">チャートアセンブル!</a></span><br />
</div>
<br />
<a href="http://toshiha.blogspot.com/2015/03/dashboards-versus-data-visualization.html">前回</a>の記事 でダッシュボードが以下のものとは違うことを説明しました。<br />
<br />
<ul style="margin-top: -1em;">
<li>ビジュアルデザインのエクササイズ</li>
<li>データビジュアライゼーションのエクササイズ</li>
</ul>
言葉を変えれば、「表示できるからとりあえず表示しよう」というのはダッシュボードデザインや幅広い意味でとらえたビジュアライゼーションとして、冴えないマントラ(主義)です。<br />
<br />
<h3>
ユーザーのために</h3>
<div>
ダッシュボードはプロダクトでなければならないというのは冗長に感じるかもしれません。だってダッシュボードは既にプロダクトなのですから。しかし厳密に言えばプロダクトはユーザーの問題うを包括的なプロセスの結果です。研究、概念、探査、実装とテストを含むプロセスです。(詳しくは<a href="https://medium.com/@ericeriksson/what-is-product-design-9709572cb3ff" target="_blank">Product Design</a>を読んでください)</div>
<div>
<br /></div>
<div>
最も重要なのは、ユーザーのニーズを最初におくことです。つまり、ダッシュボードをプロダクトして扱うことはダッシュボードはユーザーの次に大事ということです。</div>
<div>
<br /></div>
<div>
素晴らしいダッシュボードを作成することはある意味パラドックスです。</div>
<div>
そのフレーズでググれば、</div>
<div>
<a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=6&cad=rja&uact=8&ved=0CDwQFjAF&url=http%3A%2F%2Fdesignrfix.com%2Fdesign%2Fdashboard-design&ei=ZxLVVLHBDMinyATrrYKIDg&usg=AFQjCNEYq1L0bANEmTwSHUGW_ik0BK7GYw&sig2=YKmhFLbmFb0DyHzLAStdvw&bvm=bv.85464276,d.aWw" rel="nofollow" target="_blank">あなたをインスパイアする20の素晴らしいダッシュボード</a>、</div>
<div>
<a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&cad=rja&uact=8&ved=0CEMQFjAG&url=http%3A%2F%2Fthedesigninspiration.com%2Farticles%2F25-innovative-dashboard-concepts-and-designs%2F&ei=ZxLVVLHBDMinyATrrYKIDg&usg=AFQjCNFyv8w3cGH5EbU8B0Gz27itiPqOag&sig2=r65foADN-OBimw71AsI7Yg&bvm=bv.85464276,d.aWw" rel="nofollow" target="_blank">25の革新的なダッシュボードの概念とデザイン</a>、 </div>
<div>
<a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=10&cad=rja&uact=8&ved=0CFMQFjAJ&url=https%3A%2F%2Feconsultancy.com%2Fblog%2F62844-24-beautifully-designed-web-dashboards-that-data-geeks-will-love%2F&ei=ZxLVVLHBDMinyATrrYKIDg&usg=AFQjCNFPyaQZJ_EUP-GRZJRdRRa8Ho5Cqw&sig2=ypVCYsOtIemTJnX1R4Amuw&bvm=bv.85464276,d.aWw" rel="nofollow" target="_blank">データギークのための24の美しくデザインされたWebダッシュボード</a>、 </div>
<div>
<a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=13&cad=rja&uact=8&ved=0CGUQFjAM&url=http%3A%2F%2Fline25.com%2Farticles%2F25-visually-stunning-app-dashboard-design-concepts&ei=ZxLVVLHBDMinyATrrYKIDg&usg=AFQjCNHrWPNZt1Vn__39P4DkysUI1XStUA&sig2=E9t5cHkELGbb_G8zGZSROA&bvm=bv.85464276,d.aWw" rel="nofollow" target="_blank">25の美しいアプリダッシュボードデザインコンセプト</a></div>
<div>
といったものが出てきますが、これらは本当のダッシュボードではありません。 (ヴィジュアルデザインの例としてはもちろん素晴らしいのですが)</div>
<div>
<br /></div>
<div>
結局のところ、 <b>ダッシュボードそのものはどうでもよいのです</b>。ダッシュボードをデザインするときに、誰かがあなたが美しくデザインしたダッシュボードを毎日1時間以上眺めるということを考えることは、あなたにとってうれしいことでしょう、しかそ実際だれがそれをするでしょうか?既に忙しい一日の中にただ情報を見るというだけのタスクを追加したい人はいないでしょう。そういった妄想は辞めるべきです。</div>
<div>
<br /></div>
<div>
その代わりに、目前のタスクにフォーカスしましょう。ユーザーがデータとインサイトから達成しようとするタスクは何でしょうか?<br />
<br />
<h3>
目前のタスクとは?</h3>
</div>
<div>
もし、あなたが毎週の会議で何かを見せるとか、ハイレベルのダッシュボード作ると考え始めたのであれば、私はもっと深く考えることをおすすめします。ダッシュボードそのものは目的ではありません、何のためのダッシュボードなのか?ということが重要です。</div>
<div>
<br /></div>
<div>
では、「我々が持っているデータのショーケース」というのは?、まだいまいちです。それではまだ十分ではありません。<b>ダッシュボードを始めるのに「データ」からスタートするのは良いアイディアではありません</b>。それにはいくつかの理由があります。それをやってしまうと、いまあるデータにしか目がいかなくなってしまいます。しかし、そのデータはその生の状態ではユーザにとって有用でないかもしれません。有用なことを行っていないこと。</div>
<div>
逆にいうと、すべてのデータをダッシュボードに表示したいという誘惑にかられるでしょうが、それらの追加された情報はむしろ理解するのを難しくし最終的には有害なものになるでしょう。最も重要な事は、もしあなたがユーザがデータを元に何を成し遂げたいかということを知らないのであれば、ダッシュボードのデザインの重要なポイントである優先順位を付け、整理することができないということです。</div>
<div>
<br /></div>
<div>
最後に -「インサイトを発見する」も不適切です、これはタスクではありません。ダッシュボードは、特定の目的のためにデータを提示するキュレーション方法と言えます。不特定、多目的分析探査ツールではないのです。つまり、ダッシュボードは、特定の定式化された問題に答えるものなのです。そのようにデザインされている限り、そのダッシュボードは可能な限り最善の形で提示してくれるでしょう。探査やアドホックな分析はエンドユーザーではなくアナリストやデータサイエンティスト向けにより向いていると言えるでしょう。</div>
<div>
<br /></div>
<div>
以下はタスクの参考例です。</div>
<div>
<ul>
<li>物事が上手くいっているということを<b>チェック</b>してください、つまりどこにも防ぐことのできる災害がないということをチェックしましょう。例:ウェブサイトはアップしており、訪問数も想定通りである。</li>
<li>特にプ<b>ロセスが期待される方法で完了したこと</b>をチェックしてください。例:すべての支払いが終わりました。</li>
<li>何かがうまくいかない場合は、 <b>トラブルシューティング</b>をしましょう-可能性の高い原因を見つけることです。例:私たちは、重要な製品が品切れになったたえ、売上高はダウンした。注文し今回の問題を解消し、次回は次はちゃんと在庫するようにしてください。</li>
<li><b>タクティカルな意思決定</b>をサポートしましょう。例:ここに新製品の売上があり、ここにコストがある。そして我々は売り続けるべきか辞めるべきか?</li>
<li><b>どこにリソースを割り当てるか決めましょう</b>。例:私たちは3つのバリエーションのプロダクトをローンチしました。1つは他の2つに比べて極めて良い結果をだしているので、それを後押しするために広告キャンペーンを打とう。</li>
<li></li>
<li><b>より良い複雑なシステムを考えてみましょう</b>。例:ページ間のユーザーフローはどこでユーザーがドロップアウトしたか、もしくはどのレイアウトが効果的かを示すことが出来る。</li>
</ul>
<div>
このリストは、これだけやればいいというものではありません。しかし目前の問題からきちんと考えることは、とりあえず何かビジュアライズでもしておくか、というよりははるかに有用です。</div>
<div>
<br /></div>
</div>
<div>
次の記事で実際にこれをどうやるかを説明します。: <a href="http://toshiha.blogspot.com/2015/03/charts-assemble.html">チャートアセンブル!</a></div>
<div>
<br /></div>toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0tag:blogger.com,1999:blog-5903216082194851906.post-80169273275001520932015-03-17T21:47:00.000-07:002015-03-25T03:26:26.266-07:00ダッシュボード vs データビジュアライゼーション【翻訳】<div style="padding:10px; background: #f6f6f6; border-radius: 2px;">
<span style="color: #666666;">この記事は作者</span><a href="https://twitter.com/jcukier" target="_blank">Jerome</a><span style="color: #666666;">さんの同意を得て翻訳したもので5つの一連の記事の3つ目です。</span><br />
<span style="color: #666666;">SOURCE: </span><a href="http://www.jeromecukier.net/blog/2015/02/07/dashboards-versus-data-visualization/" target="_blank">Dashboards versus data visualization</a><br />
<span style="color: #666666;">1. <a href="http://toshiha.blogspot.com/2015/03/dashboards-ahoy.html">ハロー、ダッシュボード!</a></span><br />
<span style="color: #666666;">2.<a href="http://toshiha.blogspot.com/2015/03/charts-in-the-age-of-the-web.html">Web時代のチャート</a></span><br />
<span style="color: #666666;">3.ダッシュボード vs データビジュアライゼーション</span><br />
<span style="color: #666666;">4.<a href="http://toshiha.blogspot.com/2015/03/dashboards-as-products.html">プロダクトとしてのダッシュボード</a></span><br />
<span style="color: #666666;">5.<a href="http://toshiha.blogspot.com/2015/03/charts-assemble.html">チャートアセンブル!</a></span><br />
</div>
<br />
<h3>
ダッシュボードは究極のデータビジュアライゼーション</h3>
<div>
最近の<a href="http://www.informationisbeautifulawards.com/showcase?award=2014&page=1&pcategory=winner&type=awards" target="_blank">Information is Beautiful 2014 awards</a>で 、インフォグラフィックスとデータビジュアライゼーションのカテゴリを見つけました。私の解釈によれば、インフォグラフィックスは静的でデータビジュアライゼーションはデータから生成される動的なものという区分けのようでした。ただし、その呼び物のデータビジュアライゼーションプロジェクトの全ては、1回限りのデータセットを使っているだけでした。ですので、可視化の美しさは定のデータセットの特性に依存しています。逆に言えば特定のデータに依存しているので汎用性がありません。</div>
<div>
<br /></div>
<div>
これとは対照的に、私が取り組んでいるダッシュボードは、ライブ、リアルタイムのデータストリームに関するものです。データなどのようなものであれ、きちんと表示する必要があります(少なくとも機能的には)前回説明したGoogleの株価チャートは変動しやすい株、安定した株、指標、貨幣などどのようなデータがきてもきちんと動く必要があります。</div>
<div>
<br /></div>
<div>
もし、あなたにとってインフォグラフィックスとデータビジュアライゼーションの違いが理解できるのであれば、ダッシュボードがデータビジュアライゼーションとは違うところに位置していることが理解できると思います。ダッシュボードはデータから生成されてあるというだけでなく、リアルタイムに、そしてどのようなデータが来ても正しく機能することが求められます。(訳者注:特定のデータに最適化されたぱっと見きれいなデータビジュアライゼーションは多々あるが、それはダッシュボードとしては不十分であるといっているのだと思います)</div>
<div>
<br /></div>
<h3>
ダッシュボードの問題は、データビジュアライゼーションの問題ではない</h3>
<div>
データビジュアライゼーションはデータを提示したり分析するための優れたツールやテクニックを提供します。データビジュアライゼーションに特化したライブラリや言語を使用すると、大概のことはできると言えるでしょう。多くの成功したビジュアライゼーションでは、完全に新しいフォームを作り出し、もしくは、既存のフォームであったとしても、観点に合わせて、非常に細かくフォームを制御します。新しいフォームを発明しなくても、多くのすでに作られたものを利用するころができます。そして比較的webでは簡単です(Excelはそうでもないですが) <a href="https://www.google.fr/search?q=tree+maps&safe=off&espv=2&biw=2025&bih=1140&source=lnms&tbm=isch&sa=X&ei=UCR4VNmKAufCiALyo4FY&ved=0CAYQ_AUoAQ#safe=off&tbm=isch&q=treemaps" rel="nofollow" target="_blank">ツリーマップ</a> 、 <a href="https://www.google.fr/search?q=tree+maps&safe=off&espv=2&biw=2025&bih=1140&source=lnms&tbm=isch&sa=X&ei=UCR4VNmKAufCiALyo4FY&ved=0CAYQ_AUoAQ#safe=off&tbm=isch&q=force-directed+graphs" rel="nofollow" target="_blank">フォースダイレクトグラフ</a>と他の<a href="https://www.google.fr/search?q=tree+maps&safe=off&espv=2&biw=2025&bih=1140&source=lnms&tbm=isch&sa=X&ei=UCR4VNmKAufCiALyo4FY&ved=0CAYQ_AUoAQ#safe=off&tbm=isch&q=node-link+diagrams" rel="nofollow" target="_blank">ノードリンクダイアグラム</a> 、 <a href="https://www.google.fr/search?q=tree+maps&safe=off&espv=2&biw=2025&bih=1140&source=lnms&tbm=isch&sa=X&ei=UCR4VNmKAufCiALyo4FY&ved=0CAYQ_AUoAQ#safe=off&tbm=isch&q=chord+diagrams" rel="nofollow" target="_blank">コードダイアグラム</a> 、 <a href="https://www.google.fr/search?q=tree+maps&safe=off&espv=2&biw=2025&bih=1140&source=lnms&tbm=isch&sa=X&ei=UCR4VNmKAufCiALyo4FY&ved=0CAYQ_AUoAQ#safe=off&tbm=isch&q=dendrograms" rel="nofollow" target="_blank">ツリー</a> 、 <a href="https://www.google.fr/search?q=tree+maps&safe=off&espv=2&biw=2025&bih=1140&source=lnms&tbm=isch&sa=X&ei=UCR4VNmKAufCiALyo4FY&ved=0CAYQ_AUoAQ#safe=off&tbm=isch&q=bubble+charts" rel="nofollow" target="_blank">バブルチャート</a>などが挙げられます。古き良き地理マップもよいです。多くの場合、あまりにも入り組んだものや高度なフォームは良いアイディアではありません。</div>
<div>
<br /></div>
<div>
2014年11月中旬までは、Google Analyticsでは、<a href="https://www.youtube.com/watch?v=UKsBTqqhVTs" target="_blank">モーションチャート</a>を使うことが出来ました。<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jeromecukier.net/projects/dashboards/motion%20charts" imageanchor="1"><img alt="" border="0" src="http://jeromecukier.net/projects/dashboards/motion%20charts" style="border: 1px solid rgb(238, 238, 238);" title="" width="750" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
これは、全ての問題を釘に見た立てて、すべてハンマーで打ち込むという典型的な例です。(訳者注:すべて無理やり解決しようとしているという意味?)幸いなことに、この機能は最新版からはなくなりました。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i1.wp.com/media-cache-ec0.pinimg.com/736x/1c/69/b7/1c69b7ea8e23d5d8fd800a67e727d0db.jpg?resize=736%2C432" imageanchor="1"><img alt="" border="0" src="http://i1.wp.com/media-cache-ec0.pinimg.com/736x/1c/69/b7/1c69b7ea8e23d5d8fd800a67e727d0db.jpg?resize=736%2C432" title="" width="748" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
同様に、Twitterのフォロワーのダッシュボードに、ツリーマップは、ちょっとやり過ぎです。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i1.wp.com/media-cache-ec0.pinimg.com/736x/5c/27/85/5c278591a95c319bacdf974b62b991e2.jpg?resize=736%2C775" imageanchor="1"><img alt="" border="0" src="http://i1.wp.com/media-cache-ec0.pinimg.com/736x/5c/27/85/5c278591a95c319bacdf974b62b991e2.jpg?resize=736%2C775" title="" width="750" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
そしておそらく一部のユーザには混乱を招きかねません。一方で、それはスペースの面では経済的であり、おそらくすべてのダッシュボードで機能します。私はこれを使うことはないですが、こういう判断がされたのは理解できます。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
ダッシュボードは、ビジュアルデザインのエクササイズではない</h3>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i0.wp.com/media-cache-ec0.pinimg.com/736x/b0/e1/8c/b0e18c6936bde1ce92c42a0b0c7e6f84.jpg?resize=736%2C1128" imageanchor="1"><img alt="" border="0" src="http://i0.wp.com/media-cache-ec0.pinimg.com/736x/b0/e1/8c/b0e18c6936bde1ce92c42a0b0c7e6f84.jpg?resize=736%2C1128" title="" width="750" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
これは私がPinterestで見つけたものです。ビジュアルデザインとしてよくデザインされていますし、スペースの使い方もよく、色、型、チャートもシンプルです。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
しかし、<b>実際のところこれの何が良いのでしょうか?</b>私は何を得ることが出来、何のアクションを取ることができるのでしょうか?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
私が、dribbleやBehanceで見つけたダッシュボードはほとんどがビジュアルデザインの参考に分類されます。おそらくほとんどの場合、 静的でリアルなデータは使っておらず、実際に使われているものはほとんどないでしょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
ダッシュボードは、ダッシュボード自身の問題です</h3>
<div>
単なるビジュアルデザインの実践やインフォグラフィックスのテクニックでダッシュボードを作ることは出来ません。ダッシュボードは、最終的には、役にやつためにあり、特定の問題を解決するものなのです。</div>
<div>
<br /></div>
<div>
どうやって?:次の記事:<a href="http://toshiha.blogspot.com/2015/03/dashboards-as-products.html">プロダクトデザインとしてのダッシュボード</a>で説明します。</div>toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0tag:blogger.com,1999:blog-5903216082194851906.post-64680958787425632952015-03-17T21:44:00.000-07:002015-03-25T03:25:07.846-07:00Web時代のチャート【翻訳】<div style="padding:10px; background: #f6f6f6; border-radius: 2px;">
<span style="color: #666666;">この記事は作者</span><a href="https://twitter.com/jcukier" target="_blank">Jerome</a><span style="color: #666666;">さんの同意を得て翻訳したもので5つの一連の記事の2つ目です。</span><br />
<span style="color: #666666;">SOURCE: </span><a href="http://www.jeromecukier.net/blog/2015/02/07/charts-in-the-age-of-the-web/" target="_blank">Charts in the age of the web</a><br />
<span style="color: #666666;">1. <a href="http://toshiha.blogspot.com/2015/03/dashboards-ahoy.html">ハロー、ダッシュボード!</a></span><br />
<span style="color: #666666;">2.Web時代のチャート</span><br />
<span style="color: #666666;">3.<a href="http://toshiha.blogspot.com/2015/03/dashboards-versus-data-visualization.html">ダッシュボード vs データビジュアライゼーション</a></span><br />
<span style="color: #666666;">4.<a href="http://toshiha.blogspot.com/2015/03/dashboards-as-products.html">プロダクトとしてのダッシュボード</a></span><br />
<span style="color: #666666;">5.<a href="http://toshiha.blogspot.com/2015/03/charts-assemble.html">チャートアセンブル!</a></span><br />
</div>
<br />
2008年頃、私が<a href="http://www.oecd.org/" target="_blank">OECD</a>で働いていたとき、私の仕事の肩書はエディターでした。それは私がほとんど本の仕事に取り組んでいたことを示しています。私はチャートをデザインしていましたが、それは本の構成要素の1つとして見られていました。それはその時代としては当たり前のことでした。<br />
<br />
ですので、私達はこんな感じのチャートを作っていました。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="http://jeromecukier.net/projects/dashboards/02-01-01-g2" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="" border="0" src="http://jeromecukier.net/projects/dashboards/02-01-01-g2" title="" width="730" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
そして、それは最高でした(たぶん)!私たちはすべての過去のルールを尊重しました。いい感じのy軸を見てください!そしてすべてのカテゴリは、x軸上にあります。バーのサイズが順序付けられおり、どれが最大のまたは最小値を持っているかを確認するのは簡単です。そして、これらの素晴らしいグリッドラインで、値を調べることができます, 少なくとも大きさの順序を得るのは容易でしょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
まあ、実際にやったことはExcelにスタイルを適用することだったのですが。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
インタラクティブチャートVS印刷チャート</h3>
<h4>
印刷チャートルールの起源</h4>
<div>
昔ながらのチャートのルールは(たくさんあります、詳しくはTufteもしくはStephen Fewに聞いてください皆が興味を引くような想定をいくつか設定することです。</div>
<div>
<br /></div>
<div>
まず1つ、チャートは値が容易に読み取れるようにしなければなりません(おおよその値だったとしても)。ですので、ラベルをもった軸やグリッドラインは有用なのです。また、値順に棒グラフを並べ替える理由もここにあります。このことを念頭に置くと、棒チャートまたはエリアチャートのような面を比較するチャートは、0から始めるのは理にかなっています。</div>
<div>
<br /></div>
<div>
次に、一度に全てのデータを表示するということです。私たちは、すべてのデータポイントが表現され、しかも読みやすいということを維持する必要があります。そしてどのデータセットを使うかきっぱりと決める必要があります。</div>
<div>
<br /></div>
<div>
同様にチャートの形式を決める必要があります。カテゴリを比較したい場合、棒チャートを選ぶことができます。また、時間の経過とともに進化を表示したい場合は折れ線チャートを選ぶことも出来ます。ユーザーに正確な値を知ってほしかったらテーブルビューを選ぶことができます。</div>
<div>
<br /></div>
<div>
ですので、テーブルビュー以外の形式が選ばれた場合は全てのデータポイントを表示することはできません、それは現実的ではありません。</div>
<div>
<br /></div>
<div>
このフレームワークでは、Tufteanコンセプトの土台となっている <a href="http://www.infovis-wiki.net/index.php/Data-Ink_Ratio" target="_blank"><b>データ·インク</b></a>で考えることは理にかなっていると思います:印刷で使うインクはデコーレーションでなくデータをエンコードするために使うべきである、というコンセプトです。</div>
<div>
<br /></div>
<h4>
では今はどうだろう?</h4>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jeromecukier.net/projects/dashboards/chart%20trad%20vs%20online%202" imageanchor="1"><img alt="" border="0" src="http://jeromecukier.net/projects/dashboards/chart%20trad%20vs%20online%202" title="" width="750" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
しかし、今日のWebやモバイルチャートの世界でも有効であるとは言えないでしょう。</div>
<div>
<br /></div>
<div>
Webチャートは、ユーザが指定したデータポイントの追加情報を取得できるような多くのメカニズムを持っています。モバイルではうまくいかないこともありますが、mouseoverで情報を更新することもできます。しかし、それは元々表示されているもの以上のものを得ることは間違いありません。正確な値を知りたい場合、単にチャートの形状からそれを推測する必要はありません。オンデマンドにそれを提供することができるのです。</div>
<div>
<br /></div>
<h3>
例:Google Financeの株価チャート</h3>
<div>
<a href="https://www.google.com/finance?q=NASDAQ%3AGOOG" target="_blank">Google Financeの株価チャート</a>は、Webネイティブチャートの最も代表的な例の1つです。2006年以来、ニュースのコンテキストとともに、指定された株価を提供します。ビジュアルデザインそのものは、他のダッシュボード負けているかもしれませんが、だれでも見れる状態で提供されているという点で素晴らしい例です。ビジネスデータでこういったことはまれです。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jeromecukier.net/projects/dashboards/online%20chart" imageanchor="1"><img alt="" border="0" src="http://jeromecukier.net/projects/dashboards/online%20chart" title="" width="750" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
このチャートは、グリッド線とラベルの軸を有しているが、それは正確な値を調べるのに十分ではありません。しかし、チャート上に<b>マウスを移動</b>すると、ユーザーはある時点で正確な値を読み取ることができます。青い点が表示され、左上隅で正確な値を得ることが出来ます。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jeromecukier.net/projects/dashboards/mouseover" imageanchor="1"><img alt="" border="0" src="http://jeromecukier.net/projects/dashboards/mouseover" title="" width="750" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
日付ピッカー(チャートのタイムレンジをコントロールする)は最も一般的に使われる<b>データフィルタ</b>の1つです。 別の時間範囲を選択することにより、チャートは、データセットの異なるスライスを表現することができます。これは、データセットの全てが一度に表示される従来の印刷されたチャートとは対照的です。例えば、「6m」をクリックすることができ、最後の6ヶ月からのデータで処理されるのです。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jeromecukier.net/projects/dashboards/data%20filters" imageanchor="1"><img alt="" border="0" src="http://jeromecukier.net/projects/dashboards/data%20filters" title="" width="750" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
複数の証券を比較すると、チャートは<b>異なるモード</b>でデータを表示するようになります。これは、同じデータであり、同じ画面と同じコンテキストで、しかしチャートそのものはは視覚的に非常に異なっています。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://jeromecukier.net/projects/dashboards/different%20modes" imageanchor="1"><img alt="" border="0" src="http://jeromecukier.net/projects/dashboards/different%20modes" title="" width="750" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
他にも2つの特徴的な機能があります。元データとなるデータ全てに左のカラムからリンクすることができます。また最初のスクリーンショットの文字と小さなフラグはクリック可能であり、関連するニュースを表すことができます。それらをクリックすると、右側の欄にその記事が強調表示されます。だから、より多くの情報を得ることが常に可能です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
それは何を変えるのでしょうか?</h3>
<div>
すべて、です。</div>
<div>
<br /></div>
<div>
参照や比較が困難なルールやベストプラクティスはもはや重要ではありません。チャート自体は、しかし読みやすい必要があります。パイチャートやドーナツチャートを使っても構いませんが、カテゴリが読めないほど多くないという前提においてのみです。</div>
<div>
<br /></div>
<div>
Webチャート、なおさらダッシュボードは、<b>関連するデータのみを表示すること</b>にフォーカスすべきです。 そして有用度の高いものを見やすく表示するのです。繰り返しますが、それに対して印刷向けのチャートの基本は可能な限りのデータを表示することです。</div>
<div>
<br /></div>
<div>
どうやってこれをやるかは次の記事:<a href="http://toshiha.blogspot.com/2015/03/dashboards-versus-data-visualization.html">ダッシュボード vs データビジュアライゼーション</a>で取り上げます。</div>toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0tag:blogger.com,1999:blog-5903216082194851906.post-91144962718763937102015-03-17T21:38:00.000-07:002015-03-25T03:24:25.570-07:00ハロー、ダッシュボード!【翻訳】<div style="background: #f6f6f6; border-radius: 2px; padding: 10px;">
<span style="color: #666666;">この記事は作者<a href="https://twitter.com/jcukier" target="_blank">Jerome</a>さんの同意を得て翻訳したもので5つの一連の記事の1つ目です。</span><br />
<span style="color: #666666;">SOURCE: <a href="http://www.jeromecukier.net/blog/2015/02/07/dashboards-ahoy/" target="_blank">Dashboards ahoy!</a></span><br />
<span style="color: #666666;">1. ハロー、ダッシュボード!</span><br />
<span style="color: #666666;">2.<a href="http://toshiha.blogspot.com/2015/03/charts-in-the-age-of-the-web.html">Web時代のチャート</a></span><br />
<span style="color: #666666;">3.<a href="http://toshiha.blogspot.com/2015/03/dashboards-versus-data-visualization.html">ダッシュボード vs データビジュアライゼーション</a></span><br />
<span style="color: #666666;">4.<a href="http://toshiha.blogspot.com/2015/03/dashboards-as-products.html">プロダクトとしてのダッシュボード</a></span><br />
<span style="color: #666666;">5.<a href="http://toshiha.blogspot.com/2015/03/charts-assemble.html">チャートアセンブル!</a></span></div>
<br />
私はFacebookでもっぱらダッシュボードについて取り組んできました。具体的言えば、ビジネスユーザーに対して頻繁に更新されるデータをどのように最も効率的な方法で提示するか?ということです。そして本日、ダッシュボードについての一連のブログ記事/チュートリアルを始めようと思います。<br />
<br />
<h3>
なぜダッシュボード?</h3>
<div>
それは最もな質問です。ダッシュボードはまったくクールではないし、退屈なものです。D3、Canvas、Processingを使ったより高度なチュートリアルや新しいクールなビジュアライゼーションを作るほうが良いかもしれません(実際それもやるかもしれません)。</div>
<div>
<br /></div>
<div>
しかし、ダッシュボードへの関心はまさにそのクールではないことにあります。Stephen Few氏の<a href="http://www.amazon.com/Information-Dashboard-Design-At---Glance/dp/1938377001/" target="_blank">Information Dashboard Design</a>の最初のパートでは彼が長年収集した残念なダッシュボードを多数見ることができます。(訳者注:リンク先のamazonのプレビューで実際にみれるのでぜひ見てみましょう)これらのダッシュボードのほとんどは、重大かつ明らかなな生産上の欠陥があります。しばしば3Dのカラムやパイチャートを使って無駄に派手だったり、そうでない場合はあまりにも文字通りのゲージやメーターのメタファを無駄につかっています。これは2000年代初頭の典型的なダッシュボードの1つです。</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.jeromecukier.net/projects/dashboards/old%20dashboard.jpg" imageanchor="1"><img alt="" border="0" src="http://www.jeromecukier.net/projects/dashboards/old%20dashboard.jpg" title="" width="750" /></a></div>
<div>
<br /></div>
<div>
しかし、過去5年間で、これらの問題はだいぶ解決されてきたと言えます。Stephenの別のコンセプト<a href="http://www.perceptualedge.com/files/GraphDesignIQ.html" target="_blank">グラフデザインIQ</a>という言葉を借りれば、そのIQはかなり上がってきたと言えるでしょう。チャートを作る人々は、ベストプラクティスがあることや、いわゆるExcelの棒チャート、折れ線チャート、パイチャートとは違った様々な形態がありえることを徐々に認識しています。またスクラッチからチャートを作る人は、よいチャートを作るには詳細に至るまで、1つ1つの細かい意思決定が必要であるということを知っています。Excelなどのソフトはデフォルト設定に頼ることもできますが、棒チャートか折れ線グラフということだけでなく、グリッドラインが必要かどうか、軸の書式、凡例となどといった細かい調整を行うことで、良いチャートとなるのです。こういった意思決定を行うことはチャートのクオリティを上げることに貢献します。また、タブローのような製品で(正直いってExcelのすべてのバージョンも)デフォルトの選択肢は、以前よりも着実に良くなっていると思います。</div>
<div>
<br /></div>
<h3>
古いものは消えていくが、新しいものもやってくる</h3>
<div>
これらの古い問題は解決されたも同然ですが、ダッシュボードはクールであるとはまだ言いがたいです。なぜなら、新しい問題に悩まされているからです。</div>
<div>
<br /></div>
<div>
まず、 我々がずっとフォローしてきた<a href="http://toshiha.blogspot.com/2015/03/charts-in-the-age-of-the-web.html">チャートのルールとベストプラクティス</a>は古い世界(印刷物)のために考えられたものであるということです。今日のWebやモバイルを考慮されて考えられたものではありません。このように、90年代のいくつかの勧告は、迷信で過去に追いやる必要があります。(data-ink ratio、あなたのことですよ)</div>
<div>
<br /></div>
<div>
次にダッシュボードのデザインについてですが、それは<a href="http://toshiha.blogspot.com/2015/03/dashboards-versus-data-visualization.html">データビジュアライゼーションの問題でもないし、ビジュアルデザインの問題でもありません</a>(訳者注:原文ではUX/UIと言っていますが、ビジュアルデザインのことを指しているように見えたのでビジュアルデザインと訳しています)。つまり、デザイナー(訳者注:ビジュアルデザイナーのことを指していると思います)、もしくはデータビジュアライゼーションの専門家として教科書的な回答をしたとしても、どちらも最適なアプローチとはいえません。</div>
<div>
<br /></div>
<div>
半ば公然の秘密ですが、<a href="http://toshiha.blogspot.com/2015/03/dashboards-as-products.html">Product Thinking</a>を適用することが大切です。どのように人々は、ダッシュボードを使用するのだろうか?それはあなたが達成したい事へのガイドになるはずです。</div>
<div>
<br /></div>
<div>
最後に、正しいダッシュボードであるために本当に重要なことは<a href="http://toshiha.blogspot.com/2015/03/charts-assemble.html">ダッシュボードは個々のチャートのコレクションではなく、1つのアンサンブルである</a>ということです。ダッシュボードのコンポーネントは個別に考えられるべきではなく、お互いに調和すべきです。</div>
<div>
<br /></div>
<div>
これらのテーマはそれぞれ、個々の記事のテーマとなっています。<br />
次の記事:<a href="http://toshiha.blogspot.com/2015/03/charts-in-the-age-of-the-web.html">Web時代のチャート</a></div>
<div>
<br /></div>
<h3>
Pinterestでフォローしてください</h3>
<div>
<a href="https://www.pinterest.com/jcukier/" target="_blank">Pinterest</a>で 、皆さんが興味がありそうなボードを2つ持っています。</div>
<div>
<br /></div>
<div>
1つ目は野良で見つけたクオリティ判断なしの完全な<a href="https://www.pinterest.com/jcukier/dashboards/" target="_blank">ダッシュボード</a>のサンプルです。</div>
<div>
<br /></div>
<div>
2つ目は<a href="https://www.pinterest.com/jcukier/data-vis-dashboard-ui-elements/" target="_blank">データビジュアライゼーション/ダッシュボードUIエレメント</a>です。これはもっとチャート、ダッシュボードのパーツなど個々のエレメントにフォーカスしたボードになります。実際のところ、dribbleやbehanceなどのVisualDesignプラットフォームでみられるようなダッシュボードは本当のダッシュボードというよりは単なるチャートのコレクションのようなものです。ビジュアルデザインとしては悪くはないのですが。</div>
<br />toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0tag:blogger.com,1999:blog-5903216082194851906.post-21731769646132724022014-12-20T18:00:00.000-08:002014-12-22T18:38:14.097-08:00D3.js 3.5の新機能、Rounded ArcでApple Watch的UI<div>
<a href="http://qiita.com/advent-calendar/2014/d3" target="_blank">d3.js Advent Calendar 2014</a>の20日目です。(だいぶ遅くなってすみません、Better late than neverということで‥)</div>
<div>
少し前に <a href="https://github.com/mbostock/d3/releases/tag/v3.5.0" target="_blank">D3.js v3.5</a>がリリースされましたね。いくつかの新featureがありましたが、個人的にはarcで角丸が出来るようになったのが目を引きました。D3.jsは基本的にプリミティブな形を使ってビジュアライズしますが、そうするとどうしても「D3.js」感が強すぎてしまい、個性を出すのが難しいこともあります。そういった意味でこういった細かい見た目が調節できるようになるというのはうれしい機能です。</div>
<div>
実装的には</div>
<div>
arcのgemeratorを作るときに以下のように</div>
<pre class="prettyprint linenums"><code>var arc = d3.svg.arc()
.cornerRadius(20)
.innerRadius(100)
.outerRadius(120);
</code></pre>
<div>
cornerRadiusという関数を呼ぶだけです。</div>
<div>
どういったものかはオフィシャルのデモ見たいただければ一目瞭然です。</div>
<div>
Arc Corners</div>
<div>
<a href="http://bl.ocks.org/mbostock/aff9e559c5c9968b7ac6">http://bl.ocks.org/mbostock/aff9e559c5c9968b7ac6</a></div>
<div>
Arc Corners II</div>
<div>
<a href="http://bl.ocks.org/mbostock/f8f88029f3a5fde00407">http://bl.ocks.org/mbostock/f8f88029f3a5fde00407</a></div>
<div>
<br /></div>
<div>
今回はこのcornerRadiusを使って、Apple Watch的UIをd3.jsで作ってみたいと思います。<br />
<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCvcAR8IoAnSomVpeDi6rmqlte69kWwFABrJ12mNZMEcsrEdRUo5cSAlBZQxAMMow_wZf6MiyA_65RyKYUcZ6LXghHMA478Q8FfNTyMr2M-k_OekZ8I72wEOTuGAkUFz-6crznc_uEpQ/s1600/Screen+Shot+2014-12-22+at+5.03.48+PM.png" imageanchor="1" style="margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCvcAR8IoAnSomVpeDi6rmqlte69kWwFABrJ12mNZMEcsrEdRUo5cSAlBZQxAMMow_wZf6MiyA_65RyKYUcZ6LXghHMA478Q8FfNTyMr2M-k_OekZ8I72wEOTuGAkUFz-6crznc_uEpQ/s1600/Screen+Shot+2014-12-22+at+5.03.48+PM.png" height="189" width="200" /></a></div>
これはarcの角丸が指定できることで表現しやすくなったデザインだと思います。
</div>
<div>
<br /></div>
<div>
1.まずは早速cornerRadiusを使って、サークル状のarcを作ります。</div>
<script src="http://jsdo.it/blogparts/v6DE/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
<br />
<div>
<br /></div>
<div>
2.次は背景をつけます。だいぶそれっぽくなって来ましたね。</div>
<script src="http://jsdo.it/blogparts/3lXx/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
<br />
<div>
<br /></div>
<div>
3.ただ、角丸にすることで開始点は0にも関わらず、少し進んで(ずれて)見えてしまいますね。ちょっといけてないので、角丸の分だけ前後に開始点、終点をずらします。
<script src="http://jsdo.it/blogparts/s4Gc/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
これでたいぶ自然に見えるようになったのではないでしょうか?</div>
<div>
<br /></div>
<div>
4.次にアニメーションとアイコンをつけて完成です。</div>
<script src="http://jsdo.it/blogparts/x3mN/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
<br />
<div>
実際のiWatchのデモはもっと細かいアニメーションしてますが、ひとまずそれっぽいものはできたと思います。</div>
<div>
iconのパスデータはIllustratorでつくってsvgで出力して作ってます。</div>
<div>
このようにcornerRadiusを使うことで表現に幅が出来、いままでとは違ったデザインが出来るようになります、ぜひどんどん使っていきましょう。</div>
<br />
<div>
<b><i><span style="font-size: large;">Enjoy cornerRadius and Have a Happy holiday!</span></i></b></div>toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0tag:blogger.com,1999:blog-5903216082194851906.post-69244246026054979442013-12-25T00:00:00.000-08:002013-12-28T19:00:31.528-08:00多次元解析のためのチャートライブラリ DC.js<span style="font-family: inherit;"><a href="http://www.adventar.org/calendars/117" target="_blank">d3.js Advent Calendar 2013</a>の25日目です。皆様のおかげで全部埋めることができて良かったです。</span><br />
<span style="font-family: inherit;">今日は<a href="http://nickqizhu.github.io/dc.js/" target="_blank">DC.js</a>という多次元解析のためのチャートライブラリをご紹介します。ちなみにこれは<a href="http://toshi884.blogspot.com/2013/12/d3.html" target="_blank">D3の情報ソース</a>という5日目の記事で紹介したDashing D3.jsで最近紹介されていて知りました。</span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKlfUyibS38xDbJjWE4xQWsP3U3odDHBGyudx0Kzqy1yMaES05DrXT2GUArg83qr_YbVXGSBMdi2J6HSdpLKAAAFS_tfjuwqb0uTWBUBrYfg9kfUT64xRUmP2Ylrg5i4Tg4N89U3qLUtI/s1600/dcjs2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKlfUyibS38xDbJjWE4xQWsP3U3odDHBGyudx0Kzqy1yMaES05DrXT2GUArg83qr_YbVXGSBMdi2J6HSdpLKAAAFS_tfjuwqb0uTWBUBrYfg9kfUT64xRUmP2Ylrg5i4Tg4N89U3qLUtI/s1600/dcjs2.png" width="750" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DC.jsによるダッシュボードサンプル</td></tr>
</tbody></table>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><a href="http://nickqizhu.github.io/dc.js/" target="_blank">DC.js</a>はサイトを見ていただければどういうものか分かると思いますが、 複数のチャートにまたがって、データのフィルタが可能なチャートライブラリです。デモサイトのそれぞれのチャートを操作すると他のチャートもそれに従ってダイナミックに表示が更新されます。</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">DC.jsは<a href="http://square.github.io/crossfilter/" target="_blank"><b>Crossfilter</b></a>という配列のフィルタ処理を行うライブラリと<b>D3.js</b>に依存しています。Crossfilterは<a href="https://squareup.com/" target="_blank">Square</a>というiPhoneをカードリーダーにするハードウェア、サービスを提供している会社が提供しているオープンソースのライブラリで自社のSquare Registerのために開発されました。</span><br />
<span style="font-family: inherit;">上記のCrossfilterのサイトでもDC.jsのサイトのようなデモが見れます。DC.jsの作者はこのCrossfilterのデモに感銘を受けて、これを手軽に扱えるライブラリとしてDC.jsを開発したとのことです。</span><br />
<span style="font-family: inherit;"></span><br />
<span style="font-family: inherit;">Dashing D3.jsで紹介されていたDC.jsのチュートリアルがとてもわかり易かったのでそれを元にして紹介する形をとりたいと思います。分かりやすくするため、若干コードを変更しているところもありますが基本的には一緒です。</span><br />
<span style="font-family: inherit;"><a href="http://www.codeproject.com/Articles/693841/Making-Dashboards-with-Dc-js-Part-1-Using-Crossfil" target="_blank">Making Dashboards with Dc.js - Part 1: Using Crossfilter.js</a></span><br />
<span style="font-family: inherit;"><a href="http://www.codeproject.com/Articles/697043/Making-Dashboards-with-Dc-js-Part-2-Graphing" target="_blank">Making Dashboards with Dc.js - Part 2: Graphing</a></span><br />
<span style="font-family: inherit;"></span><br />
<h3>
<span style="font-family: inherit;">1.Crossfilter</span></h3>
<span style="font-family: inherit;">まずCrossfilterがどのように動作するかCrossfilterのAPIドキュメントにあるにある データを使って見てみましょう。</span>
<br />
<div>
<pre class="prettyprint linenums"><code>var data = [
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];
</code></pre>
</div>
<span style="font-family: inherit;"></span>
<span style="font-family: inherit;">crossfilterのインスタンスを作成します。</span>
<br />
<div>
<pre class="prettyprint linenums"><code>var ndx = crossfilter(data);
</code></pre>
</div>
<span style="font-family: inherit;">totalを軸としたdimensionを作成します。</span>
<br />
<div>
<pre class="prettyprint linenums"><code>var totalDim = ndx.dimension(function(d) { return d.total; });
</code></pre>
</div>
<span style="font-family: inherit;">その中からtotal=90のものを抽出します。</span>
<br />
<div>
<pre class="prettyprint linenums"><code>var total_90 = totalDim.filter(90);
</code></pre>
</div>
<span style="font-family: inherit;">以下のjsdoitのコードで動作が確認できるので見てください。total=90のものだけ抽出されているのがわかると思います。</span><br />
<span style="font-family: inherit;"><br /></span>
<script src="http://jsdo.it/blogparts/p4qy/js?width=465&height=400&view=screenshot" type="text/javascript"></script>
<span style="font-family: inherit;"></span><br />
<span style="font-family: inherit;">では次にstringでやってみましょう。</span><br />
<div>
<pre class="prettyprint linenums"><code>var typeDim = ndx.dimension(function(d) {return d.type;});
var visa_filter = typeDim.filter("visa");
var cash_filter = typeDim.filter("cash");
</code></pre>
</div>
<span style="font-family: inherit;">以下のjsdoitのコードで動作が確認できるので見てください。visa、 cashでそれぞれ抽出できているのがわかると思います。</span><br />
<span style="font-family: inherit;"><br /></span>
<script src="http://jsdo.it/blogparts/Aj8I/js?width=465&height=400&view=screenshot" type="text/javascript"></script>
<span style="font-family: inherit;"></span><br />
<span style="font-family: inherit;">ちなみにコメントアウトしてるvar total_90 = totalDim.filter(90);を有効にするとfilterの結果は0になります。totalが90のものにvisa、 cashのものがないからです。このようにちゃんと<b>crossfilter</b>されていることが確認できます。</span><span style="font-family: inherit;">では次に実際にDC.jsを使ってチャートを描画してみましょう。</span><br />
<span style="font-family: inherit;"><br /></span>
<h3>
<span style="font-family: inherit;">2.DC.jsでチャートの描画</span></h3>
<h4>
<span style="font-family: inherit;">2.1:ラインチャート</span></h4>
<span style="font-family: inherit;">まずデータを用意します。以下ははデイリーのwebサーバのhit数を示した配列データです。</span><br />
<div>
<pre class="prettyprint linenums"><code>var data = [
{date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
{date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
{date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
{date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
{date: "12/31/2012", http_404: 20, http_200: 90, http_302: 0},
{date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
{date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
{date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
{date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
{date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
{date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
{date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
];
</code></pre>
</div>
<span style="font-family: inherit;">日付データを<b>d3のtime.formatクラス</b>を使って、d3で扱えるデータにdateを変更します。またトータルのhit数を示すtotal属性も追加します。</span><br />
<div>
<pre class="prettyprint linenums"><code>var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.total = d.http_404 + d.http_200 + d.http_302;
});
</code></pre>
</div>
<span style="font-family: inherit;">crossfilterのインスタンスを作成し、X軸をtimelineにするため<b>dateのdimensionを作成</b>、また<b>Y軸用のkey-valueデータをgroup()のreduceSumを使って作成</b>します。 </span><br />
<div>
<pre class="prettyprint linenums"><code>//dataからcrossfilterのインスタンスを作成
var ndx = crossfilter(data);
//X軸をtimelineにするためdateのdimensionを作成
var dateDim = ndx.dimension(function(d) {
return d.date;
});
//Y軸にtotalを表示するためのkey-valueデータをdateDimから作成
var hits = dateDim.group().reduceSum(function(d) {
return d.total;
});
</code></pre>
</div>
<span style="font-family: inherit;">dateの最古値と最新値を取得します。</span><br />
<div>
<pre class="prettyprint linenums"><code>var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
</code></pre>
</div>
<span style="font-family: inherit;"><b><div id="chart-line-hitsperday"></div></b>というdivを定義し、そこにラインチャートを表示させてみましょう。</span><br />
<span style="font-family: inherit;">dc.lineChartでインスタンスを作成し、parameterを設定して最後にdc.renderAll()で描画します。 </span><br />
<div>
<pre class="prettyprint linenums"><code>//dcのlineChartインスタンスを作成
var hitslineChart = dc.lineChart("#chart-line-hitsperday");
//parameter設定
hitslineChart
.width(450).height(200)
.dimension(dateDim)
.group(hits)
.x(d3.time.scale().domain([minDate, maxDate]));
//チャートを描画
dc.renderAll();
</code></pre>
</div>
<span style="font-family: inherit;">以下のjsdoitのコードで動作が確認できます。チャートがひとつなので 複数のチャートにまたがっての動作はないですがチャートが描画されているのがわかると思います。またこのラインチャートはレンジセレクタが出来るようになっています。</span><br />
<span style="font-family: inherit;"><br /></span>
<script src="http://jsdo.it/blogparts/jfoE/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
<br />
<h4>
<span style="font-family: inherit;">2.2:パイチャートの追加 </span></h4>
<span style="font-family: inherit;">yearの属性を追加する処理を追加します。 </span><br />
<div>
<pre class="prettyprint linenums"><code>var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.total = d.http_404 + d.http_200 + d.http_302;
<strong>d.Year=d.date.getFullYear();</strong> //yearの属性を追加
});
</code></pre>
</div>
<span style="font-family: inherit;">パイチャート用のdimensionを作成、またパイチャートののkey-valueデータを作成します。</span><br />
<div>
<pre class="prettyprint linenums"><code>//パイチャートのdimensionを作成
var yearDim = ndx.dimension(function(d) {return +d.Year;});
//パイチャートののkey-valueデータをyearDimから作成
var year_total = yearDim.group().reduceSum(function(d) {return d.total;});
</code></pre>
</div>
<span style="font-family: inherit;"><div id="chart-ring-year"></div>というdivを定義し、そこにパイチャートを表示させてみましょう。</span><br />
<span style="font-family: inherit;">基本的にラインチャートと同じ手続きです。 </span><br />
<div>
<pre class="prettyprint linenums"><code>//dcのパイチャートインスタンスを作成
var yearRingChart = dc.pieChart("#chart-ring-year");
yearRingChart
.width(200).height(200)
.dimension(yearDim)
.group(year_total)
.innerRadius(30);
</code></pre>
</div>
<span style="font-family: inherit;">以下のjsdoitのコードで動作が確認できます。ラインチャートのレンジセレクタで範囲を変更すると動的にパイチャートが変更されるが分かるかと思います。またパイチャートをクリックするとラインチャートが変化します。このように複数のチャートにまたがって、容易にフィルタすることができます。面白いですね。</span><br />
<span style="font-family: inherit;"><br /></span>
<script src="http://jsdo.it/blogparts/hWRa/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
<span style="font-family: inherit;"></span>
<br />
<h4>
<span style="font-family: inherit;">2.3:ラインチャートにhttpステータス毎のデータを表示</span></h4>
<span style="font-family: inherit;">httpステータス毎にgroupデータを作成します。 </span><br />
<div>
<pre class="prettyprint linenums"><code>//Y軸にtotalを表示するためのkey-valueデータをhttpステータス毎に作成
var status_200=dateDim.group().reduceSum(function(d) {return d.http_200;});
var status_302=dateDim.group().reduceSum(function(d) {return d.http_302;});
var status_404=dateDim.group().reduceSum(function(d) {return d.http_404;});
</code></pre>
</div>
<span style="font-family: inherit;">status_302、 status_404はstackとすることでgroupで設定されたものに対して積み上げて表示することができます。</span><br />
<div>
<pre class="prettyprint linenums"><code>//lineChartの各種parameter設定
hitslineChart
.width(450).height(200)
.dimension(dateDim)
.group(status_200,"200")
.stack(status_302,"302")
.stack(status_404,"404")
.renderArea(true)
.x(d3.time.scale().domain([minDate,maxDate]))
.legend(dc.legend().x(50).y(10).itemHeight(13).gap(5))
.yAxisLabel("Hits per day");
</code></pre>
</div>
<span style="font-family: inherit;">ではjsdoitで確認してみましょう。ラインチャートがhttpステータス毎に表示されているのが分かるかと思います。</span><br />
<span style="font-family: inherit;"><br /></span>
<script src="http://jsdo.it/blogparts/i0BJ/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
<span style="font-family: inherit;"></span>
<br />
<h4>
<span style="font-family: inherit;">2.4:データテーブルの追加</span></h4>
<span style="font-family: inherit;">最後にデータテーブルを追加してみましょう。</span><br />
<span style="font-family: inherit;">以下のデータテーブル用のhtmlを追加します。</span><br />
<div>
<pre class="prettyprint linenums"><code><div style='font-size:11px; width:270px; margin-left:180px;'>
<table id="dc-data-table">
<thead>
<tr class="header">
<th>Day</th>
<th>TPS 200</th>
<th>TPS 302</th>
<th>TPS Total</th>
</tr>
</thead>
</table>
</div>
</code></pre>
</div>
<span style="font-family: inherit;">データテーブルのインスタンスを作成し、parameterを設定します。基本的に他のチャートと同じ手順です。</span><br />
<div>
<pre class="prettyprint linenums">//dcのデータテーブルインスタンスを作成
var datatable = dc.dataTable("#dc-data-table");
datatable
.dimension(dateDim)
.group(function(d) {return d.Year;})
.columns([
function(d) { return d.date.getDate() + "/" + (d.date.getMonth() + 1) + "/" + d.date.getFullYear(); },
function(d) {return d.http_200;},
function(d) {return d.http_302;},
function(d) {return d.http_404;},
function(d) {return d.total;}
]);
</pre>
</div>
<span style="font-family: inherit;">ではjsdoitで確認してみましょう。データテーブルも動的に変更されているのが確認できると思います。</span><br />
<span style="font-family: inherit;"></span><br />
<script src="http://jsdo.it/blogparts/tfNa/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
<span style="font-family: inherit;"></span>
<br />
<span style="font-family: inherit;">いかがでしょうか?かなり少量のコードでこのような複数のチャートにまたがったフィルタ処理ができるのはすごいですね。DashBoard等のUI開発にかなり役に立ちそうです。</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">ではd3.js Advent Calendar 2013はこれでおしまいです。投稿していただいた方、読んでいただいた方、本当にありがとうございました!</span><br />
<span style="font-family: inherit;"><b><i>Happy D3 life and Happy Holiday</i></b>, そして良いお年を!</span><br />
<span style="font-family: inherit;"></span>toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0tag:blogger.com,1999:blog-5903216082194851906.post-70276878403178753592013-12-18T00:00:00.000-08:002013-12-28T18:32:54.997-08:00記事紹介:D3のセレクションの仕組み<a href="http://www.adventar.org/calendars/117" style="font-family: inherit;">d3.js Advent Calendar 2013</a><span style="font-family: inherit;">の18日目です。</span><span style="font-family: inherit;">なかなかカレンダーが埋まらないようなので、既存の記事の紹介です。</span><br />
<span style="font-family: inherit;">D3.jsでの<b>selector、selectAll</b>はD3.jsの根幹の機能の一つですが、一方で概念を理解するのが難しいものの一つと思います。(僕だけですかね‥)</span><br />
<span style="font-family: inherit;">この記事はD3.jsの作者Mike Bostock本人が書いた記事ですが、そのあたりのもやもやをかなりすっきりさせてくれる記事で、ちょっと長いですが一読をおすすめします。個人的にはグループ化、非グループ化の辺りがかなりすっきりしました。</span><br />
<span style="font-family: inherit;"><b>How Selections Work</b></span><br />
<span style="color: #042eee; font-family: inherit;"><u><a href="http://bost.ocks.org/mike/selection/">http://bost.ocks.org/mike/selection/</a></u></span><br />
<span style="font-family: inherit;">この長い英文を読むのはちょっと‥、という方は<a href="https://twitter.com/FoD5">@</a></span><span style="font-family: inherit; font-size: x-small;"><a href="https://twitter.com/FoD5">FoD5</a></span><span style="font-family: inherit;">さんが翻訳された記事もありますので(</span><span style="font-family: inherit; font-size: x-small;">FoD5</span><span style="font-family: inherit;">さん、Goodjobです、すばらしい翻訳記事だと思います!!)こちら御覧ください。</span><br />
<span style="color: #042eee; font-family: inherit;"><u>http://ja.d3js.info/mike/selection/</u></span>toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0tag:blogger.com,1999:blog-5903216082194851906.post-86836672164347506972013-12-16T00:00:00.000-08:002013-12-28T19:19:49.945-08:00d3.jsとAngular JS<span style="font-family: inherit;">だいぶ遅れてすみません。<a href="http://www.adventar.org/calendars/117">d3.js</a></span> Advent Calendar 2013の16日目です。<br />
<span style="font-family: inherit;">d3は高機能な描画機能が売りの一つだと思いますが、一方で柔軟な表現が出来るがために、シンプルなチャートを描画するだけでも多くのコード量が必要になりますし、コードそのものも難解なものになりがちです。そこで記述を完結にするためにd3をベースにしたRickshaw、C3.jsといったチャート用のライブラリが増えてきています。</span><br />
<span style="font-family: inherit;"><b>Rickshaw</b></span><br />
<span style="color: #042eee; font-family: inherit;"><u><a href="http://code.shutterstock.com/rickshaw/">http://code.shutterstock.com/rickshaw/</a></u></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center; margin-top:5px;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMuCJd1bYX1uCU-YiPyyvzRHvE8b33raFnPkktPG3_p-2NzaZob8mC40qeHijSCsT-g-ocjNqD58T-bgJFRle0uy3rw9NTCzu1mLjrlMPdij9HBvB6ux_Xzvv9tAGj8BDWHxoauu6-vRo/s1600/rick.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMuCJd1bYX1uCU-YiPyyvzRHvE8b33raFnPkktPG3_p-2NzaZob8mC40qeHijSCsT-g-ocjNqD58T-bgJFRle0uy3rw9NTCzu1mLjrlMPdij9HBvB6ux_Xzvv9tAGj8BDWHxoauu6-vRo/s1600/rick.jpg" width="750" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Rickshawでのチャート</td></tr>
</tbody></table>
<span style="font-family: inherit;"><b>C3.js</b></span><br />
<span style="color: #042eee; font-family: inherit;"><u><a href="http://c3js.org/">http://c3js.org/</a></u></span><br />
<div style="text-align: left;">
</div>
<span style="color: #042eee; font-family: inherit;"><br /></span>
<span style="font-family: inherit;">上記は下記のようなJSの記述でチャートを生成しますが、</span><br />
<div>
<pre class="prettyprint linenums"><code>var chart = c3.generate({
data: {
rows: [
['data1', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
]
}
});
</code></pre>
</div>
<span style="font-family: inherit;"><b>一方でdangle.js</b></span><br />
<span style="color: #042eee; font-family: inherit;"><u><a href="http://www.fullscale.co/dangle/">http://www.fullscale.co/dangle/</a></u></span><br />
<span style="font-family: inherit;">や</span><br />
<span style="font-family: inherit;"><b>Radian</b></span><br />
<span style="color: #042eee; font-family: inherit;"><u><a href="http://openbrainsrc.github.io/Radian/index.html">http://openbrainsrc.github.io/Radian/index.html</a></u></span><br />
<span style="font-family: inherit;">は<a href="http://angularjs.org/">Angular JS</a>のDirectiveを用いて、htmlを記述することで複雑なチャートも簡潔に記述ができるようになっています。</span><span style="font-family: inherit;">Radianでの記述は以下のようになります。</span><br />
<div>
<pre class="prettyprint linenums"><code><plot height=200 aspect=2 stroke-width=2
x="[[seq(0,4*PI,101)]]"
axis-x-label="Time"
axis-y-label="sin(x) / cos(x)">
<lines y="[[sin(x)]]" stroke="red"></lines>
<lines y="[[cos(x)]]" stroke="blue"></lines>
</plot>
</code></pre>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NlOCzTx-uM3Y8uJ4UTfDUViNC5KgXHFgPWMdfPL-0aT98YIw-aA07XAj5gy05c-0d4lGFo5lCKwvhBtay26wMSscsC5Htv1UZ1ePy4rllZNjcDrfMgxQRdd35Kk27glT6r191tUeF6k/s1600/radian.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NlOCzTx-uM3Y8uJ4UTfDUViNC5KgXHFgPWMdfPL-0aT98YIw-aA07XAj5gy05c-0d4lGFo5lCKwvhBtay26wMSscsC5Htv1UZ1ePy4rllZNjcDrfMgxQRdd35Kk27glT6r191tUeF6k/s1600/radian.jpg" width="750" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Radianのチャート</td></tr>
</tbody></table>
</div>
<span style="font-family: inherit;">個人的にd3とAngularのDirectiveは相性が良いと思っています。自分のプロジェクトでもうまく使ってみたいなと思っていたところ、<a href="http://www.meetup.com/AngularJS-MTV/events/142442222/">Angular.jsのMeetup</a>でd3とAngularを扱った回があり、そのサンプルがちょうど良い分量だったので今回はそれを解説をしたいと思います。</span><br />
<span style="font-family: inherit;">こちらです。</span><br />
<span style="color: #042eee; font-family: inherit;"><u><a href="https://github.com/lithiumtech/angular_and_d3">https://github.com/lithiumtech/angular_and_d3</a></u></span><br />
<span style="font-family: inherit;">Step1ではAngularを使わずにゲージの表示を行っていますが、ステップを進む毎にAngularのintegrationが行われています。またゲージを表示するClassは既に作られており、それは改変せずにAngularからどのように呼び出すか?というチュートリアルになっています。</span><span style="font-family: inherit;">(上記の細かいスッテップは省きます。)</span><br />
<span style="font-family: inherit;"></span><br />
<span style="font-family: inherit;"><b>1-1: Angularを使わないhtml</b></span>
<br />
<div>
<pre class="prettyprint linenums"><code><body onload="initialize()">
<div>
<span id="memoryGaugeContainer"></span>
<span id="cpuGaugeContainer"></span>
<span id="networkGaugeContainer"></span>
</div>
</body>
</code></pre>
</div>
<span style="font-family: inherit;"><b>1-2: Angularを使うhtml</b></span>
<br />
<div>
<pre class="prettyprint linenums"><code><body ng-controller="MyController">
<div>
<gauge min="-50" max="50" value="values.p" label="Petrol"></gauge>
<gauge min="-50" max="50" value="values.o" label="Oil"></gauge>
<gauge min="-50" max="50" value="values.c" label="Coolant"></gauge>
</div>
</code></pre>
<span style="display: block; margin-top: -20px;"><gauge>というタグを定義し、min、maxなどの独自のattributeを設定する。またbodyタグに <b>ng-controller="MyController</b>"属性を付与し、body以下をMyControllerのscopeとする。</span>
</div>
<span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><b>2-1: Angularを使わないJS</b></span><br />
<div>
<pre class="prettyprint linenums"><code>var gauges = [];
function createGauge(name, label, min, max) {
var config = {
size: 250,
label: label,
min: undefined != min ? min : 0,
max: undefined != max ? max : 100,
minorTicks: 5
}
var range = config.max - config.min;
config.yellowZones = [{
from: config.min + range * 0.75,
to: config.min + range * 0.9
}];
config.redZones = [{
from: config.min + range * 0.9,
to: config.max
}];
gauges[name] = new Gauge(d3.select("#" + name + "GaugeContainer")[0][0], config);
gauges[name].render();
}
function createGauges() {
createGauge("memory", "Memory");
createGauge("cpu", "CPU");
createGauge("network", "Network");
}
function updateGauges() {
for (var key in gauges) {
var value = getRandomValue(gauges[key])
gauges[key].redraw(value);
}
}
function getRandomValue(gauge) {
var overflow = 0; //10;
return gauge.config.min - overflow + (gauge.config.max - gauge.config.min + overflow * 2) * Math.random();
}
function initialize() {
createGauges();
setInterval(updateGauges, 5000);
} </code></pre>
</div>
<b style="font-family: inherit;">2-2: </b><span style="font-family: inherit;"><b>Angularを使うJS</b></span>
<br />
<div>
<pre class="prettyprint linenums"><code>angular.module('components', []).directive('gauge', function() {
//componentsモジュールにgaugeディレクティブを追加します
return {
restrict: 'E', //Elementとしてdirectiveを使用する
replace: true, //Eを使用するときは、HTML として不適当な要素名が記述される可能せがあるのでtrueが望ましい、trueにするとgauseタグが置き換わる
scope: {
label: "@", // interpolate(値、string)
min: "=", // data bind
max: "=", // data bind
value: "=" // data bind
},
link: function(scope, element, attrs, ngModelCtrl) {
//linkでは、scopeにあるモデルの変更を検知、またイベントに応じた処理を記述して、DOM や controller とのやり取りを行う
//以下のコードは基本的にAngularを使わないJSと同じ
var config = {
size: 120,
label: attrs.label,
min: undefined != scope.min ? scope.min : 0,
max: undefined != scope.max ? scope.max : 100,
minorTicks: 5
};
var range = config.max - config.min;
config.yellowZones = [{
from: config.min + range * 0.75,
to: config.min + range * 0.9
}];
config.redZones = [{
from: config.min + range * 0.9,
to: config.max
}];
scope.gauge = new Gauge(element[0], config);
scope.gauge.render();
scope.gauge.redraw(scope.value);
//scopeに変更があったときに実行される処理
scope.$watch('value', function() {
if (scope.gauge)
scope.gauge.redraw(scope.value);
});
}
}
});
</code></pre>
</div>
<span style="display: block; margin-top: -20px;">angular.moduleでgaugeディレクティブを追加します。returnオブジェクトの中にいくつかのパラメータを指定します。linkブロックはscopeにあるモデルの変更を検知、またイベントに応じた処理を記述して、DOM や controller とのやり取りを行います。</span><span style="display: block; margin-top: -20px;"><br /></span><span style="display: block; margin-top: -20px;"><br /></span>
<span style="font-family: inherit;"><b>3: Jsdo.itのサンプル</b></span><br />
<script src="http://jsdo.it/blogparts/ye9g/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
<span style="font-family: inherit;">このようにDirectiveを使うことで、html構文としてD3で作られる図を宣言することが出来、ロジックと図の宣言を明快に分けることができます。</span><br />
<span style="font-family: inherit;">コードの可読性も高まり、また再利用性も高まるのではないでしょうか?</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">参考:</span><br />
<a href="http://angularjsninja.com/blog/2013/11/20/angularjs-custom-directives/"><span style="font-family: inherit;">AngularJS Directive なんてこわくない(その1)</span></a>toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0tag:blogger.com,1999:blog-5903216082194851906.post-2364963980631994742013-12-05T00:00:00.000-08:002014-01-08T13:27:32.241-08:00D3の情報ソース<span style="font-family: inherit;">こんにちは、林です。<a href="http://www.adventar.org/calendars/117">d3.js Advent Calendar 2013</a>の5日目です。今日は私がd3の情報収集につかっているサイトを紹介します。</span><br />
<span style="font-family: inherit;"></span><br />
<h3>
<span style="font-family: inherit;">Dashing D3.js(おすすめ)</span></h3>
<span style="color: #042eee; font-family: inherit;"><u><a href="https://www.dashingd3js.com/" target="_blank">https://www.dashingd3js.com/</a></u></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVXr-LYCqiA2ATEPoGxUy31fW1tzcQo7IZB8HKXwSQbt2zY_jziR_u2LMnioMpiInxKhjFmG1nEcsCLl7KVussh2MyofdDG7b5xCHLMjxD_hB1KhczHeV-CcwtueznJ8uTqA6U9m7yPP8/s1600/dash3.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVXr-LYCqiA2ATEPoGxUy31fW1tzcQo7IZB8HKXwSQbt2zY_jziR_u2LMnioMpiInxKhjFmG1nEcsCLl7KVussh2MyofdDG7b5xCHLMjxD_hB1KhczHeV-CcwtueznJ8uTqA6U9m7yPP8/s1600/dash3.jpg" width="750" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Dashing D3のチュートリアル</td></tr>
</tbody></table>
<span style="font-family: inherit;">Tutorial、Screencasts(有料ですが‥)もあり、良いコンテンツが多いと思います。</span><br />
<span style="font-family: inherit;">また無料のWeekly Newsletterも提供しており、d3のみならずData Visualizaton全般の最新の記事を紹介してくれるのでおすすめです。</span><br />
<span style="font-family: inherit;">アーカイブがここでみれます。</span><br />
<span style="color: #042eee; font-family: inherit;"><u><a href="https://www.dashingd3js.com/data-visualization-and-d3-newsletter" target="_blank">https://www.dashingd3js.com/data-visualization-and-d3-newsletter</a></u></span><br />
<span style="font-family: inherit;"></span><br />
<h3>
<span style="font-family: inherit;">StackOverFlow</span></h3>
<span style="color: #042eee; font-family: inherit;"><u><a href="http://stackoverflow.com/" target="_blank">http://stackoverflow.com/</a></u></span><br />
<span style="font-family: inherit;">実装でわからないことがあるとやはりここにたどり着くと思います。</span><br />
<span style="font-family: inherit;">40%ぐらいの問題はここで解決できる印象です。</span><br />
<span style="font-family: inherit;"></span><br />
<h3>
<span style="font-family: inherit;">CODEPAN</span></h3>
<span style="color: #042eee; font-family: inherit;"><u><a href="http://codepen.io/search/?q=d3.js" target="_blank">http://codepen.io/search/?q=d3.js</a></u></span><br />
<h3>
<span style="font-family: inherit;">JSdo.it</span></h3>
<span style="color: #042eee; font-family: inherit;"><u><a href="http://jsdo.it/tag/d3.js" target="_blank">http://jsdo.it/tag/d3.js</a></u></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5eVofy2uVAsD9x1WUTC2sg9lUHXUQF08RLGRzgxhw5MKw71Vyy8SvPKNlxYnTS4fm074Gwus34GSnFt_5CWVahSMZWb38T4dB3m2rcY5P-parlFLsMLs4kHbHucdwhdZEif2Rsi_T1I/s1600/codepen.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5eVofy2uVAsD9x1WUTC2sg9lUHXUQF08RLGRzgxhw5MKw71Vyy8SvPKNlxYnTS4fm074Gwus34GSnFt_5CWVahSMZWb38T4dB3m2rcY5P-parlFLsMLs4kHbHucdwhdZEif2Rsi_T1I/s1600/codepen.jpg" width="750" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">CODEPEN</td></tr>
</tbody></table>
<span style="font-family: inherit;">CODEPAN、 JSdo.itもd3.jsのキーワードで検索してコードみながら雰囲気つかむのに使っています。</span><br />
<span style="font-family: inherit;">d3.jsはコード読むだけだとよくわからないことも多く、実際にコード修正しながら確認できるこういったツールはとても有用です。</span><br />
<span style="font-family: inherit;"></span><br />
<h3>
<span style="font-family: inherit;">D3.js </span>forum</h3>
<span style="color: #042eee; font-family: inherit;"><u><a href="https://groups.google.com/forum/#!forum/d3-js" target="_blank">https://groups.google.com/forum/#!forum/d3-js</a></u></span><br />
<span style="font-family: inherit;">トピックの流れが早いので、あまり追ってはいませんが、ここで解決したことも多いです。どうしても分からない時はここに来るという感じです。</span><br />
<br />
<span style="font-family: inherit;"></span>
<span style="font-family: inherit;">D3.jsももっと日本語の情報増えると良いのですが‥。</span><br />
<span style="font-family: inherit;">みなさんの有益な情報ソースも教えていただけますと幸いです。</span>
toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com2tag:blogger.com,1999:blog-5903216082194851906.post-44544148341740901202013-12-01T00:00:00.000-08:002013-12-28T18:46:59.026-08:00D3.jsで既存のSVG Elementを扱う<span style="font-family: inherit; ">こんにちは、林です。<a href="http://www.adventar.org/calendars/117">d3.js Advent Calendar 2013</a>の1日目です。他のAdventカレンダーに比べると参加率が低い原因は、やはり日本ではd3.jsの知名度はまだ低いからなのでしょうか?海外ではData Visualizationといえば<a href="http://d3js.org/">D3.js</a>というぐらいメジャーなライブラリです。日本語での情報もまだ少ないと感じるので、このAdvent Calendarが少しでも日本での普及に貢献できれば幸いです。</span>
<br />
<span style="font-family: inherit; "><br /></span>
<span style="font-family: inherit; ">さて、今回のテーマは「<b>D3.jsで既存のSVG Elementを扱う</b>」です。</span><br />
<span style="font-family: inherit; ">一般的にD3.jsでのサンプルは四角や丸などのプリミティブな形を使ったものが多いです。実際Data Visualizationでそれで困ることはあまりないかもしれませんが、まれにIllustrator等で作成したSVGデータをD3で扱いたいという状況も発生します。いくつかのやり方があるかと思いますが、自分がとったアプローチを紹介します。</span><br />
<br />
<span style="font-family: inherit; "><b>1. html内に描画領域とは別の箇所にsvgをテンプレートとして埋め込む </b>(SVGはIllustrator等で描いてsvgで保存、その後テキストエディタ等で細かいところを修正)</span><br />
<div>
<pre class="prettyprint linenums"><code><body>
<!-- SVG element template -->
<svg id="svg_templates" display="none">
<g class="instance_small device_body">
<rect rx="4" ry="4" width="40" height="40" class="frame"></rect>
<g transform="translate(10,6)" class="icon">
<rect class="instance_bg" width="20" height="26" rx="1" ry="1"></rect>
<rect x="4" y="3" fill="#FFFFFF" width="12" height="4"></rect>
<rect x="4" y="9" fill="#FFFFFF" width="12" height="4"></rect>
<circle class="active" cx="6" cy="19" r="2.6"></circle>
</g>
</g>
</svg>
</body></code></pre>
</div>
<div>
<span style="font-family: inherit; "><b>2. テンプレートからd3.selectでnodeを取得しcloneNodeで複製し、d3のenter()処理内でappendChildする</b></span></div>
<div>
<pre class="prettyprint linenums"><code>var device = svg.selectAll('g.device').data(data);
device.enter()
.append("g")
.attr('class','device')
.each(function(d, i){
this.appendChild(
d3.select('#svg_templates > .instance_small').node().cloneNode(true)
);
});
</code></pre>
</div>
<div>
<span style="font-family: inherit; "><b>3. データをelementに反映させる</b></span><br />
<span style="font-family: inherit; ">テンプレートのsvgでd3のデータを反映させたい箇所は予めclassを付与しselectで参照することで</span><span style="font-family: inherit; ">、任意のelementにデータを反映させることができます。</span></div>
<div>
<pre class="prettyprint linenums"><code>device
.select('.instance_bg')
.transition()
.duration(500)
.delay(function(d, i) {
return i * 400;
})
.style('fill', function(d){return '#' + d});
</code></pre>
</div>
<div>
<span style="font-family: inherit; ">実際のサンプルは以下です。サーバアイコンはhtmlに埋め込まれたsvgからcloneし、その背景色はdata配列に従って変更されています。</span><br />
<br />
<script src="http://jsdo.it/blogparts/xsE0/js?width=465&height=496&view=screenshot" type="text/javascript"></script>
<span style="font-family: inherit; "><br /></span>
<span style="font-family: inherit; ">このやり方がベストかどうかは分からないのですが、今のところ自分の用途にはこのやり方が使い勝手が良かったです。何か他により良い方法知ってる方は是非教えて下さい。</span>
</div>
toshihttp://www.blogger.com/profile/05890431106954274436noreply@blogger.com0