アイドルマスターシンデレラガールズの総選挙歴代トップ10を動くグラフを作りました。 d3.js V4で作成。データは独自集計なので、間違いなどありましたらお知らせ頂けると有難いです。 Stop 凡例 [Voice]総選挙発表時にボイス実装済み New!初ランクイン Rank前回選挙からのランク差分 りあむちゃん総選挙初登場3位だったけど、初めてランク入りしたときのアーニャは2位だし、鷺沢さんは6位で、しゅがはは9位なのか、など眺めてるとわかってきます。
<操作アイコン>: :シャッフル :フィルタ設定 :〇〇年アイドル紹介表示 / 非表示 :アイコン間隔変更 :アイドル検索(漢字 or ひらがな) / :ズームイン / ズームアウト(中央) ホイール / :ズームイン / ズームアウト(マウス位置) ドラッグ(画面):画面移動 ドラッグ(アイコン):アイコン移動 :紹介したアイドル :紹介されたアイドル :互いに紹介しているアイドル <イメージ>: <アイドル選択>:アイドルアイコンにマウスオーバー or タップ <アイドル固定>:ダブルクリック or 選択中のアイドルアイコンをタップ <ユニット絞込み>:アイドル固定中に関連アイドルアイコンにマウスオーバー or タップ <イメージ>:
dc.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's demo). It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction. dc.js is an easy yet powerful javascript l
Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom style by the class and it's possible to extend the structure directly by D3. Controllable C3 provides a variety of APIs and callbacks to access th
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizable, staying away from your standard cookie cutter solutions. View more examples » GitHub Repo Download d3.v3.js. This is the only required library for NVD3. Dow
おねがいシンデレラをD3.jsで 相関図 一緒に並んでいるのをカットごと数えました。 ※マウスでドラッグして動かせます ニュージェネはいつもいっしょにいるなぁ トライアドプリムスもけっこう一緒にいる あんきらはもちろん、きらりんと小さい子*1の組み合わせ多い ままゆ+智絵里&かな子が意外な組み合わせ 茜ちゃん、パッションのだいたい誰とでも絡んでる みく&幸子 瑞樹・美波の影に隠れる小梅ちゃんかわいい 思いつきで数え始めたら終わらなくて腱鞘炎悪化しそうだった 関係した回数 4回 城ヶ崎莉嘉 と 城ヶ崎美嘉 島村卯月 と 渋谷凛 本田未央 と 島村卯月 本田未央 と 渋谷凛 神崎蘭子 と アーニャ 諸星きらり と 双葉杏 ニュージェネとあんきらと城ヶ崎姉妹と、蘭子・アーニャ。 3回 星輝子 と 城ヶ崎莉嘉 本田未央 と 赤城みりあ 白坂小梅 と 新田美波 神谷奈緒 と 北条加蓮 神谷奈緒 と
センター以外はすんなり順位どおりではない模様。 stop start ソースはWikipediaです。次のセンターがだれになるか楽しみですね。 なお、D3.js的にはeaseを使ったtransitionの順次実行が今回のポイントです。
まとめ D3.jsでData-Driven Documentsするとかよくわからなかったので、基礎っぽいところのメモとサンプル。 まずは、d3.selectAll(), selection.data(), selection.enter(). d3.scale()を理解することが重要。 svgのcircle, rectあたりは調べておきましょう。 同じくJavaScriptのArrayあたりはよく使うので復習しておく。 にこ先輩はちっちゃい。 Documentの読み方 主要API 公式のIntroductionと、Tutrialsは参考になる。 とりあえずIntroductionからThree Little Circles、Thinking with Joinsまで読むのがおすすめ。 すごく単純に要約すると、d3.selectAll()で選択して、selection.data()でデータを
データ可視化のために作成されたJavaScriptベースのツールキット、「D3.js」の概説書です。D3の基礎となる、データセットの文脈によってコンテンツの要素を取扱う方法を学びます。ニューヨーク都市交通公社(MTA)の公開している実データに基づいて、HTML、Canvas、SVGを使った、豊富でグラフィカルなビジュアライゼーションの方法を知ることができるでしょう。なお本書はEbookのみの販売となります。 まえがき 1章 はじめに D3 基本設定 ニューヨーク都市交通公社のデータセット 2章 Enterセレクション シンプルな地下鉄路線状況表示盤を作成する プラザの1日平均交通量のグラフを作成する 3章 スケールと座標軸と折れ線グラフ バスの故障、衝突や人身事故 回転式ゲートの交通量をグラフ化する 4章 インタラクションとトランザクション 地下鉄の定時運行率の評価UIその1――インタラク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く