RAWGraphs
Open sourceInspired by and built on top of open source projects. RAWGraphs is open to the community for contributions. A wide range of chartsAlmost 30 visual models to visualize quantities, hierarchies, time series and find insights in your data. Your data is safeEven though RAWGraphs is a web app, the data you insert will be processed only by your web browser.
JSグラフライブラリNVD3.jsを使ã£ã¦ã¯ã¦ãªãƒ–ãƒã‚°ã«ãƒã‚¤ã‚»ãƒ³ã‚¹ãªæ ªä¾¡ãƒãƒ£ãƒ¼ãƒˆã‚’表示ã•ã›ã‚‹æ–¹æ³• - サラリーマン休日副æ¥ã§æœˆ10万円以上目指ã™ãƒšãƒ¼ã‚¸
久々ã«ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ç³»ã®ãƒã‚¿ã§ã™ã€‚ ã¯ã¦ãªãƒ–ãƒã‚°ã«JavaScriptã®ã‚°ãƒ©ãƒ•ãƒ©ã‚¤ãƒ–ラリã§ã‚ã‚‹NVD3.jsを使用ã—ã€ãƒã‚¤ã‚»ãƒ³ã‚¹ãªæ ªä¾¡ãƒãƒ£ãƒ¼ãƒˆã‚’表示ã•ã›ã¦ã¿ã¾ã™ã€‚ ã‚‚ã¡ã‚ã‚“ã€åŒæ§˜ã®æ–¹æ³•ã§æ£’グラフã€å††ã‚°ãƒ©ãƒ•ã€æŠ˜ã‚Œç·šã‚°ãƒ©ãƒ•ç‰ã®åŸºæœ¬ã‚°ãƒ©ãƒ•ã‚„ã€è¤‡åˆã‚°ãƒ©ãƒ•ç‰ã®é«˜æ©Ÿèƒ½ãªã‚°ãƒ©ãƒ•ã¾ã§ç°¡å˜ã«è¡¨ç¤ºã•ã›ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ １．CSS/ライブラリã®èªã¿è¾¼ã¿ ã¾ãšã¯CSSã¨JavaScriptライブラリをèªã¿è¾¼ã¿ã¾ã—ょã†ã€‚ 下記ソースをページ上部ã«ã‚³ãƒ”ーã—ã¾ã™ã€‚ <link href="http://cdn.rawgit.com/novus/nvd3/v1.8.4/build/nv.d3.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" char
D3.jsã®ä½¿ã„æ–¹ã¨ã‚°ãƒ©ãƒ•ã‚’作æˆã™ã‚‹ã‚µãƒ³ãƒ—ル ｜ Tips Note by TAM
javascriptã®ãƒ©ã‚¤ãƒ–ラリ「D3.jsã€ã«ã¤ã„ã¦èª¿ã¹ã¦ã¿ã¾ã—ãŸã€‚ â– å…¬å¼ D3.js - Data-Driven Documents ■日本語訳 D3.js - 日本語ドã‚ュメント D3（Data Driven Document）.jsã¨ã¯ D3.jsã¨ã¯ã€JSONã€XMLã€CSVã€ã‚¿ãƒ–区切りテã‚ストã€javascriptã®é…列ãªã©ã® 様々ãªå½¢å¼ã®ãƒ‡ãƒ¼ã‚¿ã‚’å¯è¦–化ã™ã‚‹æ™‚ã«ä¾¿åˆ©ãªãƒ©ã‚¤ãƒ–ラリã§ã€ä¸‹è¨˜ã®ã‚ˆã†ãªç‰¹å¾´ãŒã‚ã‚Šã¾ã™ã€‚ ・データã«åŸºã¥ã„ã¦ãƒ‰ã‚ュメントをæ“作ã™ã‚‹ã€‚ ï¼ãƒ‡ãƒ¼ã‚¿ãƒ‰ãƒªãƒ–ン（データ駆動） ・データã®è¡¨ç¾ã«å¿…è¦ãªå¤‰æ›ã¯è¡Œã†ãŒã€è¡¨ç¾ãã®ã‚‚ã®ã¯ç›´æŽ¥è¡Œã‚ãªã„。 ⇒表ç¾ã¯åˆ¶ä½œè€…ã«å§”ãられã¦ã„ã¾ã™ãŒã€ãã®ãŸã‚ã«è¤‡é›‘ãªè¡¨ç¾ãŒå¯èƒ½ã«ãªã£ã¦ã„ã¾ã™ã€‚ ⇒表ç¾ã«ã¯ä¸»ã«SVGを使用ã—ã¾ã™ã€‚ ・モダンブラウザã§ã®å‹•ä½œã‚’å‰æã¨ã—ã¦ã„る。 ⇒標準ã§ã¯å¤ã„ブラウザã¯ã‚µãƒãƒ¼ãƒˆã—ãªã„。（IEã¯9以上） ・jQu
D3.jsã¨Fabric.jsを使ã£ã¦canvasã«æç”»ã™ã‚‹
d3.js Advent Calendar 2013 4日目ã®å‚åŠ è¨˜äº‹ã§ã™ã€‚ 以å‰ã‚‚ã€Fabric.jsã«ã¤ã„ã¦ã¯æ›¸ã„ãŸã“ã¨ãŒã‚ã‚‹ã®ã§ã™ãŒã€D3ã¨Fabricã®çµ„ã¿åˆã‚ã›ã«ã¯ã„ã‚ã„ã‚ãªå¯èƒ½æ€§ã‚’æ„Ÿã˜ã‚‹ã®ã§ã€å¸ƒæ•™ã®ã¤ã‚‚ã‚Šã§æ”¹ã‚ã¦è¨˜äº‹ã«ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ Fabricã¯ã€HTML5ã®canvasè¦ç´ を使ã„ã‚„ã™ãã™ã‚‹JavaScriptã®ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ 最近ã§ã¯ã€Canvas ã¯ã€ç§ãŸã¡ãŒã€å…¨ã é©šãã¹ã グラフィックス をウェブ上ã§ä½œã‚‹ã“ã¨ã‚’å¯èƒ½ã«ã—ã¾ã—ãŸã€‚ã—ã‹ã—〠Canvasã®APIãŒæä¾›ã™ã‚‹ã®ã¯ã€æ®‹å¿µãªãŒã‚‰ä½Žæ°´æº–ã§ã™ã€‚ ã‚‚ã—ã€ç§ãŸã¡ãŒå˜ã«åŸºæœ¬çš„ãªå›³å½¢ã‚’ canvas上ã«ã»ã¨ã‚“ã©æããŸã„ã¨æ€ã‚ãšã€ãã®ã“ã¨ã‚’忘れã¦ã—ã¾ãˆã°åˆ¥ã§ã™ãŒã€ ã©ã‚“ãªå½¢ã«ã›ã‚ˆã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ãŒå¿…è¦ã«ãªã£ãŸã‚Šã€ ã„ã‹ãªã‚‹ç‚¹ã§ã‚ã‚Œã€çµµã®å¤‰æ›´ãŒå¿…è¦ã«ãªã£ãŸã‚Šã€ã‚‚ã£ã¨è¤‡é›‘ãªå›³å½¢ã‚’ æãã“ã¨ãŒå¿…è¦ã«ãªã£ãŸã‚‰ã€çŠ¶æ³ã¯ä¸€
ゴールデンウィークä¸ã«D3.jsã‚’å¦ã³ãŸã„æ–¹ã«ãŠå‹§ã‚ãªåŽ³é¸ã¾ã¨ã‚
「データビジュアライゼーション（D3.js）をå¦ã¶ãŸã‚ã®æ•™æã¾ã¨ã‚ã€ã‚‚大分é‡ãŒå¢—ãˆã¦ãã¦ã€åˆã‚ã¦D3.jsã‚’å¦ã¶ã¨ã„ã†äººã«ã¯ã©ã“ã‹ã‚‰æ‰‹ã‚’ã¤ã‘ã¦è‰¯ã„ã‚‚ã®ã‹è§£ã‚Šã¥ã‚‰ããªã£ã¦ãã¾ã—ãŸã€‚ ãã“ã§ã€ã‚´ãƒ¼ãƒ«ãƒ‡ãƒ³ã‚¦ã‚£ãƒ¼ã‚¯ä¸ã«D3.jsã‚’å¦ã‚“ã§ã¿ãŸã„ã¨ã„ã†æ–¹ã«ã€ã„ãã¤ã‹åŽ³é¸ã—ã¦ãŠå‹§ã‚ã—ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ スライドを眺ã‚ã‚‹ ã¾ãšã¯D3.jsãŒã©ã‚“ãªãƒ©ã‚¤ãƒ–ラリãªã®ã‹æŠŠæ¡ã—ã¾ã—ょã†ã€‚ ・about d3.js ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’å¦ã¶ ã¨ã‚Šã‚ãˆãšåˆ†é‡ãƒ»å†…容的ã«ä¸‹è¨˜ã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ãŒãŠå‹§ã‚ã§ã™ã€‚ ・D3 ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ï½œã‚¹ã‚³ãƒƒãƒˆãƒ»ãƒžãƒ¬ã‚¤ï½œalignedleft 余裕ãŒã‚ã£ã¦ã„ã‚ã‚“ãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ã‚°ãƒ©ãƒ•ã‚’æã„ã¦ã¿ãŸã„ãªã‚‰ã€ä¸‹è¨˜ã‚µã‚¤ãƒˆã‚’。 ・svgè¦ç´ ã®åŸºæœ¬çš„ãªä½¿ã„æ–¹ã¾ã¨ã‚ コード共有サイトを使ã£ã¦å®Ÿè·µ ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’手軽ã«è©¦ã™ãªã‚‰ã€ã‚³ãƒ¼ãƒ‰å…±æœ‰ã‚µã‚¤ãƒˆã‚’利用ã™ã‚‹ã®ãŒæ¥½ãƒãƒ³ã§ã™ã€‚ jsdo.it, jsfiddle, Tr
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}