※ ãªãœã‹ã€ã‚¹ãƒ©ã‚¤ãƒ‰å†…ã®ç”»åƒãŒå¤©åœ°é€†è»¢ã—ã¦è¡¨ç¤ºã•ã‚Œã¦ã„ã¾ã™ã€‚ D3.js ver.4ã®æ–°æ©Ÿèƒ½ãªã©ã«ã¤ã„ã¦ã€‚ Read less
ç´°ã‹ã™ãŽã¦ä¼ã‚らãªã„D3 ver.4ã®è©±
※ ãªãœã‹ã€ã‚¹ãƒ©ã‚¤ãƒ‰å†…ã®ç”»åƒãŒå¤©åœ°é€†è»¢ã—ã¦è¡¨ç¤ºã•ã‚Œã¦ã„ã¾ã™ã€‚ D3.js ver.4ã®æ–°æ©Ÿèƒ½ãªã©ã«ã¤ã„ã¦ã€‚ Read less
d3.jsã®easeメソッドã«ã“ã ã‚ã£ã¦dataを生ã生ãã¨è¡¨ç¾ã—よㆠ- Qiita
ã“ã‚Œã¯Data Visualization Advent Calendar 2014ã®20日目ã®æŠ•ç¨¿ã§ã™ã€‚ dataã‚’plotã™ã‚‹ã«ã‚ãŸã£ã¦å¤§å¤‰ä¾¿åˆ©ãªd3.jsã§ã™ãŒã€æ™‚系列ãªã©ã«ã‚ˆã‚‹"変化"も表ç¾ã§ãるよã†ã«ä¾¿åˆ©ãªé–¢æ•°ãŒã„ãã¤ã‹å‚™ã‚ã£ã¦ã„ã¾ã™ã€‚ 基本的ã«ã¯transitionã‚„tweenメソッドã§é·ç§»ã•ã›ã‚‹ã®ã§ã™ãŒã€ãã®éš›ã®å‹•ãを指定ã™ã‚‹easeメソッドをã¡ã‚‡ã£ã¨ã“ã ã‚ã£ã¦ä½¿ã†ã ã‘ã§é…力的ãªè¡¨ç¾ã«ãªã‚Šã¾ã™ã€‚ 自身も先日ã€é›¨ã«é–¢ã™ã‚‹ã¤ã¶ã‚„ãを表示ã™ã‚‹ä½œå“を発表ã—ãŸã®ã§ã™ãŒã€ãã®ä¸ã§ã‚‚ç°¡å˜ã«ä½¿ç”¨ã—ã¦ã„ã¾ã™ã€‚(http://world-rainy-clock.herokuapp.com/) 基本 svg.select("circle").transition() .duration(10) .ease("linear") .attr("cy", 10) transitionã«ç¶šã„ã¦ã€é·ç§»ã«ã‹ã‘
データベースã®ãƒ‡ãƒ¼ã‚¿ã‚’D3.jsã§ä½¿ã†ã«ã¯ï¼Ÿ
「データベースã®ãƒ‡ãƒ¼ã‚¿ã‚’D3.jsã§ä½¿ã†ã«ã¯ï¼Ÿã€ã¨ã„ã†è³ªå•ã‚’ã„ãŸã ã„ãŸã®ã§è¨˜äº‹ã«ã—ã¦ã¿ã¾ã—ãŸã€‚D3.jsã®è©±ã¨ã„ã†ã‚ˆã‚Šã€ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰ã¨ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚’ã©ã†ã‚„ã£ã¦ç¹‹ãã‹ï¼Ÿã¨ã„ã†è©±ãªã‚Šã¾ã™ãŒã€‚ 基本的ã«ã¯ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰å´ã§ã€ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã®ãƒ‡ãƒ¼ã‚¿ã‚’JSONå½¢å¼ã§å‡ºåŠ›ã™ã‚‹APIを作りã€APIã«å¯¾ã—ã¦JavaScriptã‹ã‚‰XMLHttpRequestを使ã£ã¦ãƒ‡ãƒ¼ã‚¿ã‚’å—ã‘å–ã‚‹ã¨ã„ã†å½¢ãŒä¸€èˆ¬çš„ã ã¨æ€ã„ã¾ã™ã€‚ 「D3.js Tips and Tricksã€ã«ãã®ã‚‚ã®ã‚ºãƒãƒªãªè¨˜äº‹ãŒæŽ²è¼‰ã•ã‚Œã¦ã„ã¾ã™ãŒã€ã“ã®è¨˜äº‹ã§ã¯php部分をpdoを使ã£ãŸã‚³ãƒ¼ãƒ‰ã«ã—ã¦ã„ã¾ã™ã€‚ Using a MySQL database as a source of data ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰æ§‹æˆ データベース：MySQL WEBサーãƒãƒ¼ï¼šApache API:PHP ã ã„ãŸã„ã“ã‚“ãªæ„Ÿã˜ã€‚ 質å•ã„ãŸã ã„ãŸå†…容ãŒã€ŒPHP+MySQLã€ã¨ã„ã†ã“ã¨ã
D3.jsã®ã¾ã¨ã‚ã‚’æ•´ç†ã—ã¾ã—ãŸã€‚
作æˆã—ã¦ã„ãŸD3.jsã«é–¢ã™ã‚‹ã¾ã¨ã‚ã§ã™ãŒã€D3ã®è©±é¡ŒãŒå¢—ãˆã¦è¡Œãã«ã¤ã‚Œã‚ã¾ã‚Šã«ã‚‚æ•°ãŒå¢—ãˆã™ãŽãŸã®ã§ã€å°‘ã—æ•´ç†ã—ã¦ã€ï¼“ã¤ã®ã¾ã¨ã‚ã«åˆ†é¡žã—ã¾ã—ãŸã€‚ ・データビジュアライゼーション（D3.js）をå¦ã¶ãŸã‚ã®æ•™æã¾ã¨ã‚ 今ã¾ã§ã®ã¾ã¨ã‚ã§ã™ã€‚ 主ã«å…¬å¼ã‚µã‚¤ãƒˆã‚„ã€ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã€D3ã«é–¢ã™ã‚‹ã‚¹ãƒ©ã‚¤ãƒ‰ãªã©ã®ã¾ã¨ã‚ã§ã™ã€‚ ç›´è¿‘ã§ã¯ã€ŒD3.js例文辞典ã€ã‚’è¿½åŠ ã•ã›ã¦ã„ãŸã ãã¾ã—ãŸã€‚ D3ã®ã‚µãƒ³ãƒ—ルコードãŒå¤šæ•°æŽ²è¼‰ã•ã‚Œã¦ã„ã¾ã™ã€‚ ・D3.js Wrapper Library D3ã¯ã‚ˆã「å¦ç¿’コストãŒé«˜ã„ã€ã¨è¨€ã‚れるã®ã§ã™ãŒã€ãã®ç‚ºã‹ã€D3をコアã¨ã—ãŸã€ã‚‚ã£ã¨ç°¡å˜ã«ã‚°ãƒ©ãƒ•ã‚’æç”»ã§ãるラッパーライブラリãŒå¤šæ•°å˜åœ¨ã—ã¾ã™ã€‚ã“ã¡ã‚‰ã®ã¾ã¨ã‚ã§ã¯ãれらã®ãƒ©ã‚¤ãƒ–ラリを登録ã—ã¦ã„ã¾ã™ã€‚ 手軽ã«ã‚µã‚¯ãƒƒã¨ã‚°ãƒ©ãƒ•ã‚’表示ã—ãŸã„時ã«è¦—ã„ã¦ã¿ã¦ãã ã•ã„。 AngularJSã‚„Ember.jsãªã©æœ‰åãªãƒ•ãƒ¬ãƒ¼ãƒ ワークã®ä¸ã§D3を使ã†ç‚ºã®
タッãƒæ“作ã«å¯¾å¿œã—ãŸç”»åƒãƒ“ューワーをJavaScriptã§ä½œã‚‹ãªã‚‰D3.jsãŒä¾¿åˆ©
スマホやタブレットã§å†™çœŸã‚’表示ã—ã¦ã„ã‚‹ã¨ã€ãƒ”ンãƒã§ã‚ºãƒ¼ãƒ ã—ãŸã‚Šã€ãƒ‰ãƒ©ãƒƒã‚°ã§ç§»å‹•ã—ãŸã‚ŠãŒã§ãã¦ä¾¿åˆ©ãªã®ã§ã€ã‚れを Web 上ã§å®Ÿç¾ã—ã¦ã¿ãŸããªã£ãŸã€‚ 最近ã®ãƒ–ラウザーã§ã¯ touchstart ã‚„ touchmove イベントã§ã‚¿ãƒƒãƒæƒ…å ±ã‚’å–ã‚ŒãŸã‚Šã€ã‚¤ãƒ™ãƒ³ãƒˆã® touches ã§ãƒžãƒ«ãƒã‚¿ãƒƒãƒã‚’扱ãˆãŸã‚Šã™ã‚‹ã®ã§ã€å®Ÿç¾ã™ã‚‹ãŸã‚ã®åŸºç›¤ã¯ãã‚ã£ã¦ã„る。 é©å½“ãªãƒ©ã‚¤ãƒ–ラリーãŒã‚ã‚‹ã‹ã¨æ€ã£ã¦æŽ¢ã—ã¦ã¿ãŸãŒã€æ„外ã¨è‹¦åŠ´ã—ã¦ã—ã¾ã£ãŸã€‚ Hammer.js ãŒä½¿ãˆãªã„ タッãƒã‚’扱ã†ãŸã‚ã®ãƒ©ã‚¤ãƒ–ラリーã¨ã—ã¦ã¯ Hammer.js ãŒãƒ¡ã‚¸ãƒ£ãƒ¼ã‚‰ã—ã„。スワイプ・ピンãƒãƒ»ãƒ‰ãƒ©ãƒƒã‚°ãªã©ã€å„種イベントã«ã‚‚対応ã—ã¦ã„ã¦ã€ã“れを使ãˆã°ä¸€ç™ºè§£æ±ºã—ã¦ãã‚Œãã†ã 。 ã¨ã“ã‚ãŒã€ç”»åƒãƒ“ューワーを作るã«ã¯ä¸å‘ãã ã£ãŸã€‚å›°ã£ãŸã®ã¯æ¬¡ã® 2 点。 ピンãƒã‚„ドラッグã¯å€‹åˆ¥ã«ã¯å‹•ããŒã€çµ„ã¿åˆã‚ã›ãŸã¨ãã«ã€Œè¡¨ç¤ºä½ç½®ã€ã¨ã€Œå€çŽ‡ã€ã®é–¢ä¿‚を自å‰ã§è¨ˆç®—ã™ã‚‹
D3.js本ã®å‡ºç‰ˆãŒæ¢ã¾ã‚‰ãªã„(最近出版ã•ã‚ŒãŸD3å‚考書)
ベーシックãªæ„Ÿã˜ã®D3.js入門書。「Getting Started with D3ã€ã‚„「Interactive Data Visualization for the Webã€ã¨è¢«ã‚‹å†…容もã‚ã‚Šã¾ã™ãŒã€æœ¬æ›¸ã¯â€D3.jsを使ã£ã¦SVGã‚’æ“作ã™ã‚‹ã“ã¨â€ã«ã¤ã„ã¦çµæ§‹æ·±ã掘り下ã’ã¦æ›¸ã‹ã‚Œã¦ã„ã¾ã™ã€‚メディアアートã£ã½ã„サンプルも多ã„ã®ã§ã€ŒD3ã§ä½œã‚‹ã‚°ãƒ©ãƒ•ã‚’ã‚‚ã£ã¨ã‹ã£ã“よã装飾ã—ãŸã„ï¼ã€ã£ã¦äººã«ãŠå‹§ã‚ã§ã™ã€‚ ãŠæ‰‹é ƒä¾¡æ ¼ã€‚
K-means 法を D3.js ã§ãƒ“ジュアライズã—ã¦ã¿ãŸ
クラスタリングã®å®šç•ªã‚¢ãƒ«ã‚´ãƒªã‚ºãƒ K-means 法（Kå¹³å‡æ³•ï¼‰ã®å‹•ä½œåŽŸç†ã‚’ç†è§£ã™ã‚‹ãŸã‚ã«ã€D3.js を使ã£ã¦å¯è¦–化ã—ã¦ã¿ã¾ã—ãŸã€‚ 図をクリックã™ã‚‹ã‹ [ステップ] ボタンを押ã™ã¨ã€1ステップãšã¤å‡¦ç†ã‚’è¡Œã„ã¾ã™ [最åˆã‹ã‚‰] ボタンを押ã™ã¨ã€æœ€åˆã®çŠ¶æ…‹ã«æˆ»ã‚Šã¾ã™ [æ–°è¦ä½œæˆ] ボタンを押ã™ã¨ã€N (ノード数) 㨠K (クラスタ数) ã®å€¤ã§æ–°ã—ãåˆæœŸåŒ–ã—ã¾ã™ å¤ã„ブラウザーã§ã¯ã†ã¾ã表示ã§ããªã„å¯èƒ½æ€§ãŒã‚ã‚Šã¾ã™ (IE 10ã€Firefox 25ã€Chrome 30 ã§å‹•ä½œç¢ºèªã—ã¦ã„ã¾ã™) K-Means 法ã¨ã¯ 英語版 Wikipedia ã® k-means clustering - Wikipedia, the free encyclopedia ã®æ‰‹é †ã«æ²¿ã£ã¦å®Ÿè£…ã—ã¦ã„ã¾ã™ã€‚ 英語版ã®æ‰‹é †ã‚’ザックリã¨æ›¸ãã¨ã“ã‚“ãªã‚¤ãƒ¡ãƒ¼ã‚¸ã«ãªã‚Šã¾ã™ã€‚ åˆæœŸåŒ–: N 個ã®ãƒŽãƒ¼ãƒ‰ (丸å°) 㨠K 個ã®
ã€D3.js】今ã¾ã§ä½œæˆã—ãŸexampleã‚’GitHubã«å…¬é–‹ã—ã¾ã—ãŸã€‚
shimizu/d3example 「ã›ã£ã‹ãã€å‹‰å¼·ä¼šã«ã‚‚è¡Œã£ãŸã“ã¨ã ã—ç©æ¥µçš„ã«gitを使ã£ã¦ã„ã“ã†ï¼ã€ç¬¬äºŒå¼¾ã€‚ã¨ã‚Šã‚ãˆãšã€ã„ã¾ã¾ã§ä½œæˆã—ãŸD3ã®ã‚µãƒ³ãƒ—ルコードをgithubã«ä¸Šã’ã¦ã¿ã¾ã—ãŸã€‚ アップãƒãƒ¼ãƒ‰ã™ã‚‹ã«ã‚ãŸã£ã¦ã€å¤šå°‘コードを整ç†ã—ãŸã‚Šã—ã¦ã¿ãŸã®ã§ã™ãŒã€åˆã‚ã®é ƒã«æ›¸ã„ãŸã‚³ãƒ¼ãƒ‰ã¨ã‹å‰²ã¨ä¹±é›‘ãªã‚‚ã®ãŒæ··ã˜ã£ã¦ã¾ã™ã€‚ ãªãŠã€d3.csvã‚„d3.jsonã§å¤–部ファイルをèªã¿è¾¼ã‚“ã§ã‚‹ã‚³ãƒ¼ãƒ‰ã¯ãƒãƒ¼ã‚«ãƒ«ã§ã¯ãƒ–ラウザã®ã‚»ã‚ュリティ機能ã«ã‚ˆã£ã¦å®Ÿè¡Œã§ãã¾ã›ã‚“。 webサーãƒãƒ¼ä¸Šã§å®Ÿè¡Œã—ã¦ãã ã•ã„。 ç„¡ã„ã¨ãã¯â†“ã‚’ã©ã†ãžã€‚ SimpleWebServer ã€ä½™è«‡ã€‘ ã•ãらクラウドã‹ã‚‰ã ã¨SSH使ã‚ã‚“ã¨ã‚¢ãƒƒãƒ—ãƒãƒ¼ãƒ‰ã§ããªã„ã¿ãŸã„ã ã£ãŸã®ã§ã€ä¸‹è¨˜è¨˜äº‹ã‚’å‚考ã«ã•ã›ã¦ã„ãŸã ãã¾ã—ãŸã€‚ åˆå¿ƒè€…Git日記ãã®äº”～GitHubã«SSH公開éµç™»éŒ²ï½ž
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
d3.js Advent Calendar 2013 - Adventar
http://daily.d3js.info/
http://christopheviau.com/d3_tutorial/
click-to-zoom via transform
{{#tags}}- {{label}}
{{/tags}}