pandas ã®ãƒ‡ãƒ¼ã‚¿ãƒ•ãƒ¬ãƒ¼ãƒ ã‚’ D3.js ã§è¡¨ç¤ºã™ã‚‹ã¾ã§ã®å–り扱ã„ã¾ã¨ã‚ - Qiita
D3.js ã«ã‚ˆã‚‹ãƒ‡ãƒ¼ã‚¿ã®å¯è¦–化ã¯ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã€æŽ¢ç´¢çš„データå¯è¦–化ã¨ã„ã£ãŸãƒ¡ãƒªãƒƒãƒˆã‚’ã‚‚ãŸã‚‰ã—ã¾ã™ã€‚見ãŸç›®ã«ã‚‚å‹•çš„ã§æ´¾æ‰‹ã€ã‹ã£ã“ã„ã„ã¨ã„ã£ãŸç‰¹å¾´ãŒã‚ã‚Šã¾ã™ã€‚ 以å‰ã« D3.js ã«ã¤ã„ã¦æ›¸ã„ãŸè¨˜äº‹ã‚’振り返ã£ã¦è¦‹ã¾ã™ã€‚ D3.js + NVD3 + Sinatra + Heroku ã§ä½œã‚‹ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–ãªãƒ‡ãƒ¼ã‚¿å¯è¦–化デモ http://qiita.com/ynakayama/items/f661b493751370ee6568 ã“ã‚Œã¨å¯¾ç…§çš„ãªã®ãŒèª¬æ˜Žçš„データå¯è¦–化ã§ã‚ã‚Šã€ã“ã‚Œã¯ã€Œä¸€ç›®ã§ã‚ã‹ã‚‹ã“ã¨ã€ã«ãŠã„ã¦å„ªã‚Œã¦ã„ã¾ã™ã€‚延々ã¨ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’見るã€ãƒã‚¤ãƒ³ãƒ†ã‚£ãƒ³ã‚°ãƒ‡ãƒã‚¤ã‚¹ã‚’å‹•ã‹ã™ãªã©ã®ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã‚’ãŠã“ãªã‚ãªã‘ã‚Œã°ãªã‚‰ãªã„ã¨ã„ã£ãŸå¯è¦–化ã¯ã€ä¸€ç›®ã§ç´ æ—©ã全貌をç†è§£ã™ã‚‹ã¨ã„ã£ãŸèª¬æ˜Žçš„データå¯è¦–化ã«ã¯ä¸å‘ãã§ã™ã€‚ 説明的データå¯è¦–化ã®ä¾‹ã‚’挙ã’ã¦ã¿ã¾ã—ょã†ã€‚次ã®ä¾‹ã¯ä»¥å‰ã«ã‚‚ã„ãã¤ã‹ã®ä¾‹ã‚’挙ã’ãŸ
C3ã§å§‹ã‚ã‚‹D3ãƒãƒ£ãƒ¼ãƒˆ | xica
サイカã§ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã‚’ã—ã¦ãŠã‚Šã¾ã™ç”°ä¸ã§ã™ã€‚ 今回ã¯å¼Šç¤¾ã®çµ±è¨ˆåˆ†æžãƒ„ール adelie ã§ã‚‚採用ã—ã¦ã„ã‚‹ C3 ã¨ã„ã†ãƒãƒ£ãƒ¼ãƒˆãƒ©ã‚¤ãƒ–ラリを紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ C3 ã¨ã¯ C3 ã¯ãƒãƒ£ãƒ¼ãƒˆã«ç‰¹åŒ–ã—ãŸãƒ“ジュアライゼーションライブラリã§ã™ã€‚D3 ã®ãƒ©ãƒƒãƒ‘ーライブラリã§ã€D3 ã®è¦‹ãŸç›®ã®ç¾Žã—ã•ã‚„インタラクション性ãªã©ã®ç‰¹å¾´ã‚’残ã—ãªãŒã‚‰ã€ãƒãƒ£ãƒ¼ãƒˆãƒ©ã‚¤ãƒ–ラリã¨ã—ã¦åˆ†ã‹ã‚Šã‚„ã™ã„インターフェースをæä¾›ã™ã‚‹ã¨ã„ã†æ–¹é‡ã§é–‹ç™ºã‚’進ã‚ã¦ã„ã¾ã™ã€‚ 開発ã®ãã£ã‹ã‘ ç¾åœ¨å¼Šç¤¾ã® adelie ã§ã¯ UI ã®ä¸€éƒ¨ã¨ã—㦠C3 を使ã£ãŸãƒãƒ£ãƒ¼ãƒˆã‚’æ載ã—ã¦ã„ã¾ã™ãŒã€åˆæœŸãƒãƒ¼ã‚¸ãƒ§ãƒ³ã§ã¯ D3 を直接使ã„自å‰ã§å®Ÿè£…ã—ã¦ã„ã¾ã—ãŸã€‚ã¾ãŸã¡ã‚‡ã†ã©åŒã˜é ƒã€ç§ã®å€‹äººçš„ãªãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ã‚‚ D3 を使ã£ãŸãƒãƒ£ãƒ¼ãƒˆã‚’実装ã—ã¦ãŠã‚Šã€ãれらã§å¾—ãŸãƒŽã‚¦ãƒã‚¦ã‚’ã‚‚ã¨ã«å†åˆ©ç”¨å¯èƒ½ãªãƒ©ã‚¤ãƒ–ラリã¨ã—ã¦å€‹äººçš„ã«é–‹ç™ºã‚’始ã‚ã¾ã—ãŸã€‚ãã®å¾Œã¯åŸºæœ¬çš„ã«ã¯ä¸Šè¿°ã®æ–¹é‡ã®
2時間縛りã§d3.js挑戦ã—ã¦ã¿ãŸ - mizchi's blog
何ã“ã®è¨˜äº‹ ã‚ã‚“ã¡ã¹ã¨ã„ã†äººã‹ã‚‰ç„¡èŒ¶ã¶ã‚ŠãŒããŸã®ã§å¯¾å¿œã—㟠mizchiã€d3ブãƒã‚°æ›¸ã„ã¦ãã‚ŒãŸå‘‘む— 3D円グラフ皆殺㗠(@AntiBayesian) 2014, 3月 2 @AntiBayesian D3ã¾ã 極ã‚ã¦ãªã„ã§ã™â€” 高æ„è˜ã‚¨ãƒãƒ«ã‚®ãƒ¼ (@mizchi) 2014, 3月 2 @mizchi 2時間やã‚ã†ã€æ—©ã極ã‚ãŸã¾ãˆâ€” 3D円グラフ皆殺㗠(@AntiBayesian) 2014, 3月 2 @AntiBayesian ãŠã£ã—ゃ待ã£ã¦ã‚— 高æ„è˜ã‚¨ãƒãƒ«ã‚®ãƒ¼ (@mizchi) 2014, 3月 2 å‰æ よã誤解ã•ã‚Œã‚‹ã‚“ã§ã™ãŒã€D3.jsã¯ã‚°ãƒ©ãƒ•æ画ツールã§ã¯ãªãã€JavaScriptã§SVGを生æˆã™ã‚‹ãŸã‚ã®jQuery風DSLã§ã€DSLã¨ã¯ã„ãˆã‹ãªã‚Šãƒãƒ¼ãƒ¬ãƒ™ãƒ«ãªãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚SVGã¯ãƒ™ã‚¯ã‚¿ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚¹ã‚’生æˆã™ã‚‹è¦æ ¼ã€‚ブラウザ上ã®SVGã¯ã€å›³å½¢ã‚’書ã‘ã‚‹DOMã§ã‚ã‚Šã€ä»–
D3.js例文辞典
ã“ã®ãƒšãƒ¼ã‚¸ã¯D3.jsã®ç”¨ä¾‹ã‚’扱ã£ã¦ã„ã¾ã™ã€‚D3.jsã®D3ã¯Data-Driven Documentsã‚’æ„味ã—ã¦ã„ã¾ã™ã€‚ D3.jsã®å…¥é–€æ›¸ã€ç™ºå£²ä¸ã§ã™ã€‚D3.jsã«ã¤ã„ã¦å¦ç¿’ã—ãŸã„人ã¯ãœã²ã©ã†ãžã€‚ Kindle版ãŒç™ºå£²ã•ã‚Œã¾ã—ãŸã€‚ã¾ãŸã€Google Playã€æ¥½å¤©Koboã§ã‚‚購入ã§ãるよã†ã«ãªã‚Šã¾ã—ãŸã€‚ æ›´æ–°æƒ…å ±ã¯Twitter (@openspc)ã§ã‚¢ãƒŠã‚¦ãƒ³ã‚¹ã—ã¦ã„ã¾ã™ã€‚ ＊勉強用ã«ä½œæˆã—ãŸãƒšãƒ¼ã‚¸ãªã®ã§é–“é•ã„ã‚„ä¸å…·åˆã®å‡ºã‚‹ã‚µãƒ³ãƒ—ルãŒã‚ã‚‹ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。致命的ãªã‚‚ã®ã§ã€ã“ã‚Œã¯ã¾ãšã„ã¨ã„ã†ã‚µãƒ³ãƒ—ルãŒã‚ã‚Šã¾ã—ãŸã‚‰openspc@alpha.ocn.ne.jpã¾ã§ãƒ¡ãƒ¼ãƒ«ã‚’ãã ã•ã„。
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
How to work with D3.js’s general update pattern
{{#tags}}- {{label}}
{{/tags}}