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
【CEDEC2026】ゲームシナリオライターを支援するAIツール開発の実践 ― 設計とプロンプトの工夫 ―
Avatar for Cygames, Inc. cygames
PRO
1
640
現場で使える AWS DevOps Agent 活用ノウハウ - Release Management 機能の検証結果を添えて / AWS DevOps Agent Release Management and Know-How
Avatar for Masanori Yamaguchi kinunori
5
890
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.1k
20260801_スクフェス大阪
Avatar for hikari kgnkhkr
1
980
CloudWatchから始めるAWS監視
Avatar for butadora butadora
0
310
サイバー捜査員研修（前半）
Avatar for Nomizo Nomizo nomizone
1
830
OSPN.JPバージョンアップ作業進捗のご報告 / 20260801-osc26kyoto
Avatar for Akira Ouchi akkiesoft
0
170
Claude Code並行開発環境の ムダ‧ムラ‧ムリを見直した話
Avatar for Muranaka muranakaaa
2
410
NetBoxを利用した作業効率化の試み_NetDevNight4
Avatar for Takumi Nohara tnoha
0
450
A Bag-of-Documents Model for Query Specificity
Avatar for Daniel Tunkelang dtunkelang
0
200
運用を犠牲にせずコストを制御し事業成長を支える B2B SaaS ID管理基盤におけるS3 Tableのログストレージ活用
Avatar for 株式会社カミナシ kaminashi
1
150
信頼できるテスティングAIをどう育てるか？
Avatar for odan tomohiro odan611
0
190

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Design in an AI World
Avatar for tapps tapps
1
270
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
200
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
280
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.3k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.5k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
460
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
200
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k

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