mbostock’s gistsYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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ã‚’ã¤ã‹ã£ã¦Data-Drivenã«ãƒªãƒƒãƒãªã‚°ãƒ©ãƒ•ã‚„ãƒãƒ£ãƒ¼ãƒˆã‚’作æˆã—よㆠ- Tech-Sketch
Webやスマートデãƒã‚¤ã‚¹ã€ã‚»ãƒ³ã‚µãƒ¼ãªã©ã‚らゆるもã®ã‹ã‚‰æƒ…å ±ã‚’åŽé›†å‡ºæ¥ã‚‹ã‚ˆã†ã«ãªã‚Šã€ä¸–ã®ä¸ã«ã¯è†¨å¤§ãªãƒ‡ãƒ¼ã‚¿ãŒæº¢ã‚Œã‹ãˆã£ã¦ã„ã¾ã™ã€‚ ã¾ãŸã€ãƒ“ッグデータやデータサイエンティストã¨ã„ã£ãŸã‚ーワードã«æ³¨ç›®ãŒé›†ã¾ã‚Šã€ãƒ‡ãƒ¼ã‚¿æ´»ç”¨ã¸ã®æœŸå¾…ãŒé«˜ã¾ã£ã¦ã„ã¾ã™ã€‚ã—ã‹ã—ã€å˜ç´”ã«åŽé›†ã—ãŸãƒ‡ãƒ¼ã‚¿ã¯ãã®ã¾ã¾ã§ã¯è¦‹ã¥ã‚‰ãã€ãã“ã‹ã‚‰æ„味を汲ã¿å–ã‚‹ã®ã¯å›°é›£ã§ã™ã€‚ ãã“ã§ã€ãƒ‡ãƒ¼ã‚¿ã®è¦‹ã›æ–¹ã‚„ä¼ãˆæ–¹ãŒé‡è¦ã«ãªã£ã¦ãã¾ã™ã€‚ インフォグラフィックスやデータビジュアライゼーションã¨ã„ã£ãŸã‚ーワードã«ã‚‚注目ãŒé›†ã¾ã‚Šã¤ã¤ã‚ã‚Šã¾ã™ã。 本記事ã§ã¯D3.jsã¨ã„ã†JavaScriptã®ãƒ©ã‚¤ãƒ–ラリを利用ã—ã€ã“ã®ãƒ–ãƒã‚°(Teck-Sketch)ã®ã¯ã¦ãªãƒ–ックマーク数やã€ä¸–ç•Œã®å›½åˆ¥ã®äººå£ã®æ¯”較を視覚的ã«åˆ†ã‹ã‚Šã‚„ã™ã表ç¾ã—ã¦ã„ããŸã„ã¨æ€ã„ã¾ã™ã€‚ インフォグラフィックス？データビジュアライゼーション？ ã‚ーワードã¨ã—ã¦ã‚¤ãƒ³ãƒ•ã‚©ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚¹ã¨ãƒ‡ãƒ¼ã‚¿ãƒ“
データを分ã‹ã‚Šã‚„ã™ãスタイリッシュã«å¯è¦–化ã§ãã‚‹Javascriptライブラリ「D3.jsã€
ã©ã‚“ãªã«æƒ…å ±ã‚’ã¾ã¨ã‚ã¦ã‚‚ã€ãれをå¯è¦–化ã—ã¦è¦‹ã¦ã„る人ã«ã†ã¾ãä¼ãˆã‚‹ã®ã¯è‡³é›£ã®æŠ€ã§ã™ã€‚ãã‚“ãªæ™‚ã«ãƒ‡ãƒ¼ã‚¿ã‚’スタイリッシュã‹ã¤è¦‹ã‚„ã™ã„グラフã«ã—ã¦ãれるã®ãŒã€æ§˜ã€…ãªãƒ‡ã‚¶ã‚¤ãƒ³ã®JavascriptãŒãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰å¯èƒ½ãªãƒ©ã‚¤ãƒ–ラリ「D3.jsã€ã§ã™ã€‚ D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使ã£ã¦ä½œã£ãŸã‚°ãƒ©ãƒ•ã®äº‹ä¾‹ã‚’å…¬å¼ã‚®ãƒ£ãƒ©ãƒªãƒ¼ã‹ã‚‰è¦‹ã‚‹ã“ã¨ãŒå¯èƒ½ã§ã€ã“れらã®ã‚°ãƒ©ãƒ•ã«ã‚‚ã¨ã«ãªã‚‹ç´ æ(スクリプトã®ã‚½ãƒ¼ã‚¹)ãŒGitHubã§å…¥æ‰‹å¯èƒ½ã§ã™ã€‚ Gallery · mbostock/d3 Wiki · GitHub デザインã®ä¸€ä¾‹ã¯ä»¥ä¸‹ã‹ã‚‰ã€‚ â—†:Bubble Chart 作æˆä¾‹ã«ã‚ˆã£ã¦ã¯ã€ãƒšãƒ¼ã‚¸ã«ç›´æŽ¥ã‚³ãƒ¼ãƒ‰ãŒè¨˜è¼‰ã•ã‚Œã¦ã„ã‚‹ã‚‚ã®ã‚‚ã‚ã‚Šã¾ã™ã€‚ â—†:Four Ways to Slice Obama’s 2013 Budget Proposal - In
NYタイムズも注目ï¼ã€Œãƒ‡ãƒ¼ã‚¿Ã—デザインã€ã‚’実ç¾ã™ã‚‹ãƒ‡ãƒ¼ã‚¿ãƒ“ジュアリゼーション ライブラリ「d3.js デザイン会社 ビートラックス: ブãƒã‚°
世界ä¸ã§ãƒ‡ãƒ¼ã‚¿ãŒã©ã‚“ã©ã‚“増ãˆã¦ã„ãä¸ã§ãƒ‡ãƒ¼ã‚¿ã‚’ã†ã¾ã扱ã†ã“ã¨ã¯ã¨ã¦ã‚‚é‡è¦ã«ãªã£ã¦ãã¦ã„ã¾ã™ã€‚ãã‚“ãªä¸ã€New York TimesãŒç©æ¥µçš„ã«æ´»ç”¨ã—ã¦ã„ãŸã‚Šã€Githubã®watch数ランã‚ングã§ä¸Šä½ã«ãƒ©ãƒ³ã‚¯ã‚¤ãƒ³ã—ã¦ã„ãŸã‚Šã¨æœ€è¿‘人気急上昇ä¸ã®ãƒ‡ãƒ¼ã‚¿ã‚’ビジュアライズã™ã‚‹ç‚ºã®ã€Œd3.jsã€ã¨ã„ã†ãƒ©ã‚¤ãƒ–ラリãŒã‚ã‚Šã¾ã™ã€‚ 本日ã¯ã“ã®ã€Œãƒ‡ãƒ¼ã‚¿ï½˜ãƒ‡ã‚¶ã‚¤ãƒ³ã€ã‚’webサイト上ã§å®Ÿç¾ã™ã‚‹ç‚ºã®javascriptライブラリâ€d3.jsâ€ã«ã¤ã„ã¦ç´¹ä»‹ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ ã“ã®ãƒ©ã‚¤ãƒ–ラリを使ã†ã“ã¨ã§ã€ä»Šã¾ã§ãªã‹ãªã‹é›£ã—ãã¦ã§ããªã‹ã£ãŸã‚¦ã‚§ãƒ–上ã§ã®ã€Œãƒ‡ãƒ¼ã‚¿ã®å¯è¦–化ã€ãŒæ‰‹è»½ã«ã§ãるよã†ã«ãªã‚Šã€è¤‡é›‘ãªãƒ‡ãƒ¼ã‚¿ã‚’ç›´æ„Ÿçš„ã«ç†è§£ã§ãるよã†ãªã‚µã‚¤ãƒˆãŒä½œã‚Šã‚„ã™ããªã‚Šã¾ã™ã€‚早速ã§ã™ãŒã“ã®d3.jsã¨ã„ã†ã‚‚ã®ãŒã©ã†ã„ã†ã‚‚ã®ã‹ã‚’ãªã‚“ã¨ãªãæ„Ÿã˜ã‚‹ã«ã¯å®Ÿéš›ã«å‹•ã„ã¦ã„るデモを見ã¦é ‚ãã®ãŒæ—©ã„ã®ã§ä»¥ä¸‹ã‚’ã”覧下ã•ã„。 オãƒãƒžå¤§çµ±é ˜ã®å›½å®¶äºˆç®—案詳細 (
1
ãŠçŸ¥ã‚‰ã›
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}