D3 Rickshaw and Backbone in 50 minutes

Nov 28, 20130 likes2,483 views

Using D3, Rickshaw and Backbone to create Server Density's time-series charts. In this talk I cover: * D3, Rickshaw and Backbone * Data Visualisation Design * Backend API Design * Programming defensively * Maths in JavaScript

@byrichardpowell
byrichardpowell.co.uk
Thursday, 28 November 13

Manage your infrastructure
Thursday, 28 November 13

Monitor your devices
Thursday, 28 November 13

Monitor your services
Thursday, 28 November 13

25 TB of data per month

Thursday, 28 November 13

Why talk about
data visulisation?

Thursday, 28 November 13

Spot Patterns

gapminder.org/world/
Thursday, 28 November 13

Diagnose Problems
Thursday, 28 November 13

Funny picture

Data visualization can be beautiful
Je Thorp: Word Frequency
Thursday, 28 November 13

“Data Visualization is awesome”
this kid, 2013

Thursday, 28 November 13

Overview

1.
2.
3.
4.

SVG, D3, Rickshaw
Data Visualisation Design
API Design
Backbone

Thursday, 28 November 13

1. SVG, D3 & Rickshaw

Thursday, 28 November 13

“A modularized language
for describing two-dimensional vector
and mixed vector/raster graphics in XML”
w3.org/TR/SVG/

Thursday, 28 November 13

Elements & Attributes
Thursday, 28 November 13

website

snapsvg.io
Thursday, 28 November 13

Why D3 & Why Rickshaw?

Thursday, 28 November 13

Mike Bostock
@mbostock

Thursday, 28 November 13

examples?

github.com/mbostock/d3/wiki/Gallery
Thursday, 28 November 13

Horizon Graphs
square.github.io/cubism/

Thursday, 28 November 13

Calender Heatmaps
bl.ocks.org/mbostock/4063318

Thursday, 28 November 13

Rickshaw is feature rich
* Line
* Stacked
* Scaled Series
* Custom Axis Formatting
* Custom tooltips
* Disabling/enabling series

Thursday, 28 November 13

Rickshaw is feature rich
* Scatterplots
* Bar charts
* Mixed charts
* Logarithmic & Absolute Scaling
* Annotations

Thursday, 28 November 13

“Above all else show the data”
Edward Rolf Tufte, 1983

Thursday, 28 November 13

Data to Ink Ratio: Classes

Thursday, 28 November 13

Data to Ink Ratio: Legend Classes

Thursday, 28 November 13

Use only the classes you need
to create the design you want

Thursday, 28 November 13

“Having the data is not enough.
I have to show it in ways
people both enjoy and understand.”
Hans Rosling

Thursday, 28 November 13

“A state of joy, creativity and total involvement,
in which problems seem to disappear
and there is an exhilarating feeling
of transcendence”
Mihaly Csikszentmihalyi

Thursday, 28 November 13

This is not enjoyment
this is not ﬂow
Thursday, 28 November 13

To maintain ﬂow
Be Defensive
Thursday, 28 November 13

Defensive: Check for errors

Thursday, 28 November 13

Defensive: Quarantine

Thursday, 28 November 13

Defensive: Give Feedback

Thursday, 28 November 13

Being Forgiving
Thursday, 28 November 13

Numbers or Patterns?
Thursday, 28 November 13

19th Nov 2003
Physical Memory Used: 200

Both?
Thursday, 28 November 13

Custom Formatted Tooltips

Thursday, 28 November 13

Tooltip Events

Thursday, 28 November 13

Synchronized Tooltips

Thursday, 28 November 13

“You’ve got a good piece of software
when people use it for purposes
it was never intended for.”
Clay Shirky

Thursday, 28 November 13

We Never Expected
Thursday, 28 November 13

Multiple Axis
bit.ly/17lKqn5

Thursday, 28 November 13

Generating a scale

Thursday, 28 November 13

Generating multiple scales

Thursday, 28 November 13

Using the scales

Thursday, 28 November 13

Scaling the axis

Thursday, 28 November 13

“How do we request graph data
for metrics ... ?”

Thursday, 28 November 13

Metrics can be
simple, complex or dynamic
Thursday, 28 November 13

Metrics can be combined
Thursday, 28 November 13

“How do we request graph data for
multiple metrics at once
that can nest many levels deep
and are dynamic?”

Thursday, 28 November 13

Structured as JSON

Thursday, 28 November 13

The graph data

Thursday, 28 November 13

tabs

graphs

Thursday, 28 November 13

alerting

plugins

graphs

date

Thursday, 28 November 13

graph

graph

graph

options

Thursday, 28 November 13

series

legend

axis

tabs view

graphs view

graph views
options view

dropdown views

Thursday, 28 November 13

Zombies: Cool for fancy dress
Events
and not cool for code
the mediator pattern

Thursday, 28 November 13

Using mediator events

Thursday, 28 November 13

Using Collection Events

Thursday, 28 November 13

Zombies: Cool for fancy dress
not cool for code

Thursday, 28 November 13

Managing Views

Thursday, 28 November 13

Dealing with time (badly)

Thursday, 28 November 13

Dealing with time

Thursday, 28 November 13

www.serverdensity.com/
bit.ly/1erNJNz

@byrichardpowell

Thursday, 28 November 13

Why is writing React.JS code so simple? Why had writing Backbone.JS code become difficult for us at Server Density. What does this say us about good code vs great code? In this presentation I cover 3 important concepts: * Code simplicity vs complexity * Code predictability * Composability Using real-world example I'll share what our 16 month journey migrating a large Backbone codebase, to a large React codebase has taught us.

Rickshaw Motors AfricaAyesha Azmi

��

Rickshaw Motors Africa is a joint partnership between JK Atlas and CHINAR CHINA MOTORS to manufacture and distribute auto rickshaws, mini trucks, and motorcycles throughout Africa. The partnership has a manufacturing plant in Hyderabad, India that can produce 11,000 rickshaws annually. The technical specifications and features of the auto rickshaw, mini truck, and 70CC motorcycle models are provided. The partnership also offers customization, spare parts, warranty support and aims to establish assembly lines in countries that meet sales targets.

The wide body auto rickshawPradhanbros Pvt Ltd

��

The document proposes an activation plan to increase market share for Wide Body Auto Rickshaws in India. The plan includes holding a fleet owners meet to introduce the new model. An on-ground program would give auto drivers test drives of the rickshaw in high traffic areas. Events like an auto rickshaw marathon and setting a world record for passenger capacity would generate publicity over 6 months. The goal is to position Wide Body as the best rickshaw through promotions focusing on its mileage, comfort and durability.

Solar rickshawNitesh Prasad

��

The document describes a project to design a solar rickshaw that can be manually driven as well as motor driven using solar energy. The objectives are to reduce the effort of rickshaw pullers and use abundantly available solar power. Key aspects discussed include using solar cells to power an electric motor that assists the manual operation of the rickshaw. Calculations are shown for estimating the power required to move different payloads up inclines at various speeds. A CAD model and specifications are provided for a proposed solar rickshaw design with details on the solar panels, battery, motor and controls.

E- Rickshaw in IndiaCentre for Public Policy Research

��

E-rickshaws have become a popular mode of transportation in countries like India, China, Bangladesh, and Nepal. The document discusses the rise of e-rickshaws, key facts about their use and regulation. It notes that e-rickshaws number over 100,000 in Delhi, their costs range from 85,000-125,000 rupees, and issues with their regulation, safety, and impact on traffic congestion have arisen as their use has increased. The document concludes by suggesting policy solutions like developing e-rickshaws as feeder transportation systems and integrating them into urban planning.

CCA Intro to Data Visualization 10/24/13Brad Simpson

��

Data Modeling with Neo4jNeo4j

��

Neo4j is a powerful and expressive tool for storing, querying and manipulating data. However modeling data as graphs is quite different from modeling data under a relational database. In this talk, Michael Hunger will cover modeling business domains using graphs and show how they can be persisted and queried in Neo4j. We'll contrast this approach with the relational model, and discuss the impact on complexity, flexibility and performance.

CSS3 and jQuery for Designerslomalogue

��

The document outlines a presentation on CSS3 and jQuery for designers. It introduces the topics to be covered, which include new HTML5 features, CSS3 properties like colors, fonts, transforms and animations, and jQuery concepts like selecting elements, events, and animations. The presentation provides examples of how to use CSS3 and jQuery and recommends tools like Modernizr, Sass, CoffeeScript, and Codekit.

Designing user on-boardingRichard Powell

��

Data Visualisation with D3 & Rickshaw - Berlin Expert DaysRichard Powell

��

Time-Series Monitoring Graphs with D3 & RickshawRichard Powell

��

Angular js, Yeomon & GruntRichard Powell

��

Real-time collaborative drawingRichard Powell

��

This document describes how to build a real-time collaborative drawing application using Node.js, Express.js, Socket.io, and Paper.js. It explains that Express serves the HTML canvas, Paper.js intercepts draw events and draws locally, Socket.io passes draw data to Express which broadcasts it to other users, and Paper.js uses sessionIds to draw other users' paths and maintain separate drawings. It also provides instructions for deploying the application to Nodejitsu.

Front end-performanceRichard Powell

��

This document discusses front-end performance optimization. It notes that 80-90% of end-user response time is spent on the frontend. It provides tips for optimizing load time such as minimizing files, gzipping, concatenating scripts, and loading scripts last. It also discusses optimizing runtime performance by reducing DOM interactions and designing single page applications carefully. Finally, it emphasizes the importance of perception and not blocking the user interface.

Angular.js, Yeomon & GruntRichard Powell

��

Draw stuff at @jsnortheastRichard Powell

��

The document describes how to create a real-time collaborative drawing application using Node.js, Express, Socket.io, and Paper.js. It explains how to install and set up the necessary technologies, handle mouse events to draw on a canvas, send drawing data to other users via Socket.io events, and receive and render drawings from other users in real-time. Key aspects covered include setting up an Express server, connecting Socket.io for real-time functionality, serializing drawing paths to JSON, and processing incoming events to update drawings across clients.

HTML5 Canvas @SuperMondays, NewcastleRichard Powell

��

The document discusses HTML5 Canvas. It defines Canvas as a 2D drawing platform for HTML5 using JavaScript. Canvas can be used for data visualization, dynamic animation, games, complex user interfaces, and applications. It also discusses libraries that can be used with Canvas like Three.js, Raphael, and Processing.js. The document provides resources for learning more about HTML5 Canvas including blogs to follow and a book on Foundation Canvas.

Fl studio crack version 12.9 Free Downloadkherorpacca127

��

https://ncracked.com/7961-2/ Note: >>👆👆 Please copy the link and paste it into Google New Tab now Download link The ultimate guide to FL Studio 12.9 Crack, the revolutionary digital audio workstation that empowers musicians and producers of all levels. This software has become a cornerstone in the music industry, offering unparalleled creative capabilities, cutting-edge features, and an intuitive workflow. With FL Studio 12.9 Crack, you gain access to a vast arsenal of instruments, effects, and plugins, seamlessly integrated into a user-friendly interface. Its signature Piano Roll Editor provides an exceptional level of musical expression, while the advanced automation features empower you to create complex and dynamic compositions.

Cloud of everything Tech of the 21 century in AviationAssem mousa

��

EaseUS Partition Master Crack 2025 + Serial Keykherorpacca127

��

https://ncracked.com/7961-2/ Note: >> Please copy the link and paste it into Google New Tab now Download link EASEUS Partition Master Crack is a professional hard disk partition management tool and system partition optimization software. It is an all-in-one PC and server disk management toolkit for IT professionals, system administrators, technicians, and consultants to provide technical services to customers with unlimited use. EASEUS Partition Master 18.0 Technician Edition Crack interface is clean and tidy, so all options are at your fingertips. Whether you want to resize, move, copy, merge, browse, check, convert partitions, or change their labels, you can do everything with a few clicks. The defragmentation tool is also designed to merge fragmented files and folders and store them in contiguous locations on the hard drive.

Unlock AI Creativity: Image Generation with DALL·EExpeed Software

��

Discover the power of AI image generation with DALL·E, an advanced AI model that transforms text prompts into stunning, high-quality visuals. This presentation explores how artificial intelligence is revolutionizing digital creativity, from graphic design to content creation and marketing. Learn about the technology behind DALL·E, its real-world applications, and how businesses can leverage AI-generated art for innovation. Whether you're a designer, developer, or marketer, this guide will help you unlock new creative possibilities with AI-driven image synthesis.

DevNexus - Building 10x Development Organizations.pdfJustin Reock

��

Developer Experience is Dead! Long Live Developer Experience! In this keynote-style session, we’ll take a detailed, granular look at the barriers to productivity developers face today and modern approaches for removing them. 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method, we invent to deliver products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches works? DORA? SPACE? DevEx? What should we invest in and create urgency behind today so we don’t have the same discussion again in a decade?

UiPath Agentic Automation Capabilities and OpportunitiesDianaGray10

��

Learn what UiPath Agentic Automation capabilities are and how you can empower your agents with dynamic decision making. In this session we will cover these topics: What do we mean by Agents Components of Agents Agentic Automation capabilities What Agentic automation delivers and AI Tools Identifying Agent opportunities ❓ If you have any questions or feedback, please refer to the "Women in Automation 2025" dedicated Forum thread. You can find there extra details and updates.

What Makes "Deep Research"? A Dive into AI AgentsZilliz

��

About this webinar: Unless you live under a rock, you will have heard about OpenAI’s release of Deep Research on Feb 2, 2025. This new product promises to revolutionize how we answer questions requiring the synthesis of large amounts of diverse information. But how does this technology work, and why is Deep Research a noticeable improvement over previous attempts? In this webinar, we will examine the concepts underpinning modern agents using our basic clone, Deep Searcher, as an example. Topics covered: Tool use Structured output Reflection Reasoning models Planning Types of agentic memory

Replacing RocksDB with ScyllaDB in Kafka Streams by Almog GavraScyllaDB

��

A Framework for Model-Driven Digital Twin EngineeringDaniel Lehner

��

The Future of Repair: Transparent and Incremental by Botond DénesScyllaDB

��

Regularly run repairs are essential to keep clusters healthy, yet having a good repair schedule is more challenging than it should be. Repairs often take a long time, preventing running them often. This has an impact on data consistency and also limits the usefulness of the new repair based tombstone garbage collection. We want to address these challenges by making repairs incremental and allowing for automatic repair scheduling, without relying on external tools.

BoxLang JVM Language : The Future is DynamicOrtus Solutions, Corp

��

Just like life, our code must evolve to meet the demands of an ever-changing world. Adaptability is key in developing for the web, tablets, APIs, or serverless applications. Multi-runtime development is the future, and that future is dynamic. Enter BoxLang: Dynamic. Modular. Productive. (www.boxlang.io) BoxLang transforms development with its dynamic design, enabling developers to write expressive, functional code effortlessly. Its modular architecture ensures flexibility, allowing easy integration into your existing ecosystems. Interoperability at Its Core BoxLang boasts 100% interoperability with Java, seamlessly blending traditional and modern development practices. This opens up new possibilities for innovation and collaboration. Multi-Runtime Versatility From a compact 6MB OS binary to running on our pure Java web server, CommandBox, Jakarta EE, AWS Lambda, Microsoft Functions, WebAssembly, Android, and more, BoxLang is designed to adapt to any runtime environment. BoxLang combines modern features from CFML, Node, Ruby, Kotlin, Java, and Clojure with the familiarity of Java bytecode compilation. This makes it the go-to language for developers looking to the future while building a solid foundation. Empowering Creativity with IDE Tools Unlock your creative potential with powerful IDE tools designed for BoxLang, offering an intuitive development experience that streamlines your workflow. Join us as we redefine JVM development and step into the era of BoxLang. Welcome to the future.

30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...ScyllaDB

��

FinTech - US Annual Funding Report - 2024.pptxTracxn

��

D3 Rickshaw and Backbone in 50 minutes

1. @byrichardpowell byrichardpowell.co.uk Thursday, 28 November 13

2. Thursday, 28 November 13

3. Manage your infrastructure Thursday, 28 November 13

4. Monitor your devices Thursday, 28 November 13

5. Monitor your services Thursday, 28 November 13

6. Thursday, 28 November 13

7. 25 TB of data per month Thursday, 28 November 13

8. The backbone logo inside a rickshaw Time Series Graphs with Rickshaw, D3 & Backbone.js Thursday, 28 November 13

9. Why talk about data visulisation? Thursday, 28 November 13

10. Spot Patterns gapminder.org/world/ Thursday, 28 November 13

11. Spot Patterns gapminder.org/world/ Thursday, 28 November 13

12. Diagnose Problems Thursday, 28 November 13

13. Funny picture Data visualization can be beautiful Je Thorp: Word Frequency Thursday, 28 November 13

14. “Data Visualization is awesome” this kid, 2013 Thursday, 28 November 13

15. Overview 1. 2. 3. 4. SVG, D3, Rickshaw Data Visualisation Design API Design Backbone Thursday, 28 November 13

16. 1. SVG, D3 & Rickshaw Thursday, 28 November 13

17. “A modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML” w3.org/TR/SVG/ Thursday, 28 November 13

18. Elements & Attributes Thursday, 28 November 13

19. website snapsvg.io Thursday, 28 November 13

20. pablojs.com/ Thursday, 28 November 13

21. raphaeljs.com/ Thursday, 28 November 13

22. Why D3 & Why Rickshaw? Thursday, 28 November 13

23. Mike Bostock @mbostock Thursday, 28 November 13

24. examples? github.com/mbostock/d3/wiki/Gallery Thursday, 28 November 13

25. Horizon Graphs square.github.io/cubism/ Thursday, 28 November 13

26. Calender Heatmaps bl.ocks.org/mbostock/4063318 Thursday, 28 November 13

27. Rickshaw is feature rich * Line * Stacked * Scaled Series * Custom Axis Formatting * Custom tooltips * Disabling/enabling series Thursday, 28 November 13

28. Rickshaw is feature rich * Scatterplots * Bar charts * Mixed charts * Logarithmic & Absolute Scaling * Annotations Thursday, 28 November 13

29. xkcd.com/418/ Thursday, 28 November 13

30. 2. Design Thursday, 28 November 13

31. “Above all else show the data” Edward Rolf Tufte, 1983 Thursday, 28 November 13

32. bit.ly/183R6sT Thursday, 28 November 13

33. bit.ly/183R6sT Thursday, 28 November 13

34. Data to Ink Ratio: Classes Thursday, 28 November 13

35. Data to Ink Ratio: Classes Thursday, 28 November 13

36. Data to Ink Ratio: Classes Thursday, 28 November 13

37. Data to Ink Ratio: Classes Thursday, 28 November 13

38. Data to Ink Ratio: Legend Classes Thursday, 28 November 13

39. Use only the classes you need to create the design you want Thursday, 28 November 13

40. “Having the data is not enough. I have to show it in ways people both enjoy and understand.” Hans Rosling Thursday, 28 November 13

41. Enjoy Thursday, 28 November 13

42. “A state of joy, creativity and total involvement, in which problems seem to disappear and there is an exhilarating feeling of transcendence” Mihaly Csikszentmihalyi Thursday, 28 November 13

43. This is not enjoyment this is not ﬂow Thursday, 28 November 13

44. To maintain ﬂow Be Defensive Thursday, 28 November 13

45. Defensive: Check for errors Thursday, 28 November 13

46. Defensive: Quarantine Thursday, 28 November 13

47. Defensive: Give Feedback Thursday, 28 November 13

48. Being Forgiving Thursday, 28 November 13

49. Understand Thursday, 28 November 13

50. Numbers or Patterns? Thursday, 28 November 13

51. 19th Nov 2003 Physical Memory Used: 200 Both? Thursday, 28 November 13

52. Comparisons? Thursday, 28 November 13

53. Custom Formatted Tooltips Thursday, 28 November 13

54. Tooltip Events Thursday, 28 November 13