Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rickshaw

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for badatmath badatmath
March 02, 2014
Technology
410
0

 Rickshaw

Rickshawの紹介

Avatar for badatmath

badatmath

March 02, 2014

More Decks by badatmath

See All by badatmath
JavaScript小史
Avatar for badatmath badatmath
13
4.9k
Node.js入門
Avatar for badatmath badatmath
20
10k

Other Decks in Technology

See All in Technology
AI時代に、人は何を、どう学ぶのか #pbl_pub / What and How Do We Learn in the AI Era?
Avatar for TAKAKING22 takaking22
1
240
AIに狂うスタートアップが、あえて「人との協働」に全振りした新卒エンジニア研修 / New Graduate Engineer Training at a Startup Accelerating AI Adoption
Avatar for akira ohno ohnoeight
0
180
DatadogのBits Chatが開発組織にもたらしたもの / What Bits Chat Has Brought Us
Avatar for SMS tech sms_tech
1
300
AI開発に用いられるHPC技術について
Avatar for GPU UNITE gpuunite_official
0
260
LLM・AIエージェントシステムベストプラクティス
Avatar for shibuiwilliam shibuiwilliam
6
1.6k
Rust×eBPFでEDRっぽいものをつくる
Avatar for 5unl1fe3 sunlife3
2
840
Kiro WebとCloud Sessions
Avatar for nagisa_53 nagisa53
2
140
平文パスワードはログに“残り” ── 肝心の侵入は“痕跡すら残らない”
Avatar for kuroneko kuroneko13
0
120
tamachi.go 誕生の裏側
Avatar for ryoji miyamoto rymiyamoto
1
200
Genie Codeハンズオン応用編
Avatar for Takaaki Yayoi taka_aki
0
140
巨大気象データと戦う ― サロゲートモデル学習を高速化する圧縮技術
Avatar for GPU UNITE gpuunite_official
0
250
AI for Science時代を切り開く、政府の次世代HPC戦略の展望
Avatar for GPU UNITE gpuunite_official
0
220

Featured

See All Featured
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.8k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
440
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
730
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.2k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
440
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
660
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.4k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.1k

Transcript

  1. 3JDLTIBXͰ࡞Δ ϦΞϧλΠϜՄࢹԽΞϓϦ @bad_at_math 14೥3݄2೔೔༵೔

  2. Rickshawͱ͸ 14೥3݄2೔೔༵೔

  3. Rickshawͱ͸ w࣌ܥྻσʔλʹϑΥʔΧεͨ͠ɺEKT Λར༻ͨ͠+BWB4DSJQUͷπʔϧΩοτ 14೥3݄2೔೔༵೔

  4. 14೥3݄2೔೔༵೔

  5. 14೥3݄2೔೔༵೔

  6. ௒؆୯ var g = new Rickshaw.Graph(); graph.render(); 14೥3݄2೔೔༵೔

  7. ௒؆୯ var g = new Rickshaw.Graph(); graph.render(); Koredake desu K

    oredake desu 14೥3݄2೔೔༵೔

  8. ௒؆୯ EKTͱ͸ͳΜͩͬͨͷ͔ 14೥3݄2೔೔༵೔

  9. ॳظԽ • element : Ͳ͜΁ग़ྗ͢Δ͔ • width : ෯ •

    height : ߴ͞ • series : σʔλ഑ྻ 14೥3݄2೔೔༵೔

  10. ॳظԽmore • series : ෳ਺ͷάϥϑσʔλͷ഑ྻ • { color : “blue”,

    data: [σʔλ഑ྻ] } 14೥3݄2೔೔༵೔

  11. ॳظԽmore <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="bower_components/rickshaw/src/css/graph.css"> <script

    src="./bower_components/d3/d3.min.js"></script> <script src="./bower_components/rickshaw/rickshaw.min.js"></script> <title></title> </head> <body> <div id="chart"></div> <script> var graph = new Rickshaw.Graph( { element: document.querySelector("#chart"), width: 300, height: 200, series: [{ color: 'steelblue', data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] }] }); graph.render(); </script> </body> </html> 14೥3݄2೔೔༵೔

  12. ॳظԽmore <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="bower_components/rickshaw/src/css/graph.css"> <script

    src="./bower_components/d3/d3.min.js"></script> <script src="./bower_components/rickshaw/rickshaw.min.js"></script> <title></title> </head> <body> <div id="chart"></div> <script> var graph = new Rickshaw.Graph( { element: document.querySelector("#chart"), width: 300, height: 200, series: [{ color: 'steelblue', data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] }] }); graph.render(); </script> </body> </html> divͰλʔήοτࢦఆ άϥϑඳը Rickshaw.GraphͷΠϯελϯεԽ 14೥3݄2೔೔༵೔

  13. ॳظԽmore colorͰ৭ࢦఆ σʔλ഑ྻ series: [{ color: 'steelblue', data: [ {

    x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] }] 14೥3݄2೔೔༵೔

  14. DEMO 14೥3݄2೔೔༵೔

  15. ͜Ε͚ͩ <!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="bower_components/rickshaw/src/css/graph.css"> <link

    type="text/css" rel="stylesheet" href="bower_components/rickshaw/examples/css/lines.css"> <script src="bower_components/d3/d3.min.js"></script> <script src="bower_components/socket.io-client/dist/socket.io.min.js"></script> <script src="bower_components/rickshaw/rickshaw.min.js"></script> </head> <body> <div id="chart_container"> <div id="chart"></div> </div> <script> var socketioGraph = new Rickshaw.Graph.Socketio( { element: document.getElementById("chart"), width: 900, height: 500, renderer: 'line', dataURL: "http://localhost:8000", onData: function(d) { Rickshaw.Series.zeroFill(d); return d } } ); </script> </body> </html> divͰλʔήοτࢦఆ Πϯελϯε࡞੒ 14೥3݄2೔೔༵೔

  16. DEMOิ଍ WebSocket Data Emitter Browser (Rickshaw) Data Metrics 14೥3݄2೔೔༵೔

  17. ·ͱΊ Rickshaw࢖͏ͱ ࣌ܥྻσʔλΛ ؆୯ՄࢹԽ㽈 14೥3݄2೔೔༵೔