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

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
EMの役割で 変わったこと・変わらなかったこと
Avatar for SansanTech sansantech
PRO
1
230
みてねにおけるAI-DLC導入活動とAIドリブン開発の現在地/JAWS-UG AI-DLC #2
Avatar for Isao Shimizu isaoshimizu
2
320
Backstageでつくるセルフサービスな社内開発基盤
Avatar for Sakazaki Kikunosuke kikunosuke75
1
140
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
480
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.3k
承認ゲートは何を守っているのか? AIエージェントの自律購入を実測した結果
Avatar for Yuuki Yamashita yama3133
1
110
現場の暗黙知を継承するAIエージェント — 対話から生まれる長期記憶と Skills
Avatar for Atsuki Shirasawa atsukish
0
210
AI駆動開発をチームに根付かせる - 「1行も書かない」チームがHarnessを育てた1年 -
Avatar for Ken'ichirou Kimura kenichirokimura
6
3.6k
人気商品が「ちゃんと買える」をつくる ー ECの負荷改善
Avatar for ykagano ykagano
1
170
tamachi.goを支える技術
Avatar for ryoji miyamoto rymiyamoto
0
120
Point Cloud as a Foreign Language for Multi-modal Large Language Model
Avatar for Takuya MINAGAWA takmin
0
350
[DroidKaigi 2026] Making UI specifications visible: Android UI development in the AI agent era supported by Compose Screenshot Testing and galleries
Avatar for syarihu syarihu
0
220

Featured

See All Featured
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
570
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.3k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
260
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
240
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
380
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k

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