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

Rickshaw

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
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
20k
DGX Sparkを2台使って いろいろ動かす話
Avatar for そのだ sonoda_mj
1
110
Claude Codeで開発以外の業務も爆速化しよう！
Avatar for みのるん minorun365
PRO
12
9.5k
プロダクトエンジニアに必要な「いい感じ」に作る能力 〜たくさん作れる時代に、どこまで作るかの決め方〜
Avatar for Jotaro Nishime jnishime_dresscode
2
910
[RSJ26] Flow as Flow: Modeling Robot Velocity Fields as Probability Velocity Fields
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
180
「重なり」は迎える側がつくる ― 人もAIエージェントも歓迎するプロダクトエンジニアリング ―
Avatar for Go Akazawa go0517go
PRO
0
150
IDperturb: Enhancing Variation in Synthetic Face Generation via Angular Perturbation
Avatar for SansanTech sansantech
PRO
0
110
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
7
20k
研究開発部の紹介 / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
25k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
77k
生成AI時代の クレデンシャルとパーミッション設計
Avatar for NRI Netcom nrinetcom
PRO
3
1.3k
書籍『生成AIの安全性入門』の入門
Avatar for Koki Wataoka wataoka
0
160

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
260
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
410
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
260
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
840
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k

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