Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Rickshaw

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
SQL文一行も書けない人事がCortexもろもろを使って人事業務を楽にしてみる
Avatar for ponponmikan ponponmikankan
1
220
2026-09-09 【sigma_ucj#1】Sigma を IaC 管理したい！ / IaC for Sigma
Avatar for civitaspo civitaspo
0
120
クロスボーダーM&AのValue Upを支えるプロダクト開発。日米チームのハブになったプロダクトエンジニアの実践 / Product Engineering Conference 2026
Avatar for GENDA genda
0
120
こんなアーキテクチャ図は嫌だ BEYOND THE TIME: 半年後の自分へ贈る15のメッセージ / 15 of Anti-pattern in AWS Architecture Diagrams
Avatar for Naomi Yamasaki naospon
3
310
[2026-09-11]SREは誰のもの？運用エンジニアが始める 「SRE領域への越境」とチームの進化の軌跡 〜Road to NEXT CRE
Avatar for tosite tosite
0
140
Oracle Cloud Infrastructure IaaS 新機能アップデート 2026/6 - 2026/8
Avatar for oracle4engineer oracle4engineer
PRO
0
150
2026/09/10 Spring Bootから Jakarta EE/MicroProfileへの移行
Avatar for Satoshi Seto megascus
0
310
AIとペアプロを始める。人とのペアプロをやめる。ペアプロの良さを改めて知る。もっと好きになった。 / Rediscovering Pair Programming
Avatar for yuki honyanya
1
340
Amazon Quick on DesktopがIAM Identity Centerで動かない理由
Avatar for YukiOgawa yukiogawa
0
160
TinyGo 開発サイクルを高速化する：Go で作るエミュレータ入門
Avatar for ZOZO Developers zozotech
PRO
1
620
山手線を徒歩で一周してわかった、 位置情報アプリは「足」が最強のデバッガー
Avatar for hinakko hinakko
0
110
AI-DLCって実際どう？ 〜聞きたいこと全部聞いてみる〜
Avatar for 荒木 ARK news_it_enj
0
260

Featured

See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
280
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
370
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.8k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
350
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.7k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.2k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
490
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6k

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೔೔༵೔