real time data visualization using asp.net / signalr + d3.js
TRANSCRIPT
![Page 1: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/1.jpg)
Real TimeData Visualization
using
ASP.NET MVC SignalR D3.JS+ +
![Page 2: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/2.jpg)
Agenda
• Introduction to SignalR• Introduction to D3.js• Demo - Real time data visualization
![Page 3: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/3.jpg)
Without real-time
![Page 4: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/4.jpg)
With real-time
![Page 5: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/5.jpg)
SignalRSignalR is a series of abstractions around various
methods of providing
Persistent HTTP connections
distributed as open source
![Page 6: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/6.jpg)
SignalR
•Abstraction over transports
•Connection management
•Broadcast or target specific client
![Page 7: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/7.jpg)
SignalR Core Concepts
Connection
Represents a simple endpoint for sending single-recipient, grouped, or broadcast
messages
![Page 8: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/8.jpg)
SignalR Core Concepts
Hub
Built upon the connection API that allows your Client and Server to call methods on
each other directly
![Page 9: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/9.jpg)
SignalR Core Concepts
Backplane
A Backplane allows you to scale your application to multiple server.
![Page 10: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/10.jpg)
SignalR Fallback
Long Polling
Forever Frames
Server Sent Events
Web Sockets
![Page 11: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/11.jpg)
D3.js
•A JavaScript library for manipulating documents based on data.
•Helps you create rich visualizations using HTML, SVG & CSS
![Page 12: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/12.jpg)
D3js.org
![Page 13: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/13.jpg)
Demo Breakdown
Real Time Data Visualization
![Page 14: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/14.jpg)
Please share your
feedback!
goo.gl/v5s2OS
![Page 15: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/15.jpg)
• C# Corner MVP / Author / Speaker
• Developer - .NET Stack
• @sunny_delhi
My Credentials
Sunny
Sharma
![Page 16: Real Time Data Visualization using asp.net / SignalR + D3.js](https://reader034.vdocuments.mx/reader034/viewer/2022042501/55a78a121a28ab5f5e8b45f3/html5/thumbnails/16.jpg)
Thank You!