This document is a presentation about javascript charting with YUI-Flot. It introduces YUI-Flot as a port of the Flot charting library to the YUI framework. It discusses charting options for the web, demonstrates basic chart types with YUI-Flot like scatter plots and time series, and covers how to include the library, get data, and instantiate charts. It also outlines future plans like supporting newer Flot features and contributions from the community.
Improving D3 Performance with CANVAS and other HacksPhilip Tellis
This document discusses techniques for improving the performance of D3 visualizations. It begins with an overview of D3 and some basic tutorials. It then describes issues with performance for force-directed layouts and edge-bundled layouts as the number of nodes and links increases. Solutions proposed include using canvas instead of SVG for rendering, reducing unnecessary calculations, and caching repeated drawing states. The document concludes that the number of DOM nodes has major performance implications and techniques like canvas can help when exact mouse interactions are not required.
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
There’s no such thing as fast enough. You can always make your website faster. This talk will show you how. The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get tired and leave.In this talk we’ll start with the basics and get progressively insane. We’ll go over several frontend performance best practices, a few anti-patterns, the reasoning behind the rules, and how they’ve changed over the years. We’ll also look at some great tools to help you.
Frontend Performance: De débutant à Expert à Fou FurieuxPhilip Tellis
Frontend Performance Beginner to Expert to Crazy Person
The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get tired and leave.
In this talk we'll start with the basics and get progressively insane. We'll go over several frontend performance best practices, a few anti-patterns, the reasoning behind the rules, and how they've changed over the years. We'll also look at some great tools to help you.
La performance front-end de débutant, à expert, à fou furieux !
La toute première condition nécessaire à une bonne expérience utilisateur est de pouvoir obtenir les octets de cette expérience avant que l'utilisateur ne se lasse et parte.
Nous débuterons cette conférence avec les bases pour progressivement devenir démentiel. Nous aborderons plusieurs des meilleurs pratiques de la performance front-end, quelques anti-patterns à éviter, le raisonnement derrière les règles, et comment ces dernières ont changé au fil des ans. Nous regarderons d'un peu plus près quelques très bon outils qui peuvent vous aider.
Frontend Performance: Expert to Crazy PersonPhilip Tellis
The document outlines steps for front-end performance optimization, beginning with basic techniques like caching, compression and domain sharing and progressing to more advanced strategies involving preloading, parallel downloads, and predicting response times. It was presented by Philip Tellis at WebPerfDays New York and includes references for further reading on topics like CDNs, TCP tuning, and the page visibility API.
RUM isn’t just for page level metrics anymore. Thanks to modern browser updates and new techniques we can collect real user data at the object level, finding slow page components and keeping third parties honest.
In this talk we will show you how to use Resource Timing, User Timing, and other browser tricks to time the most important components in your page. We’ll also share recipes for several of the web’s most popular third parties. This will give you a head start on measuring object level performance on your own site.
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Philip Tellis
The document outlines steps web performance experts take to optimize frontend performance, moving from beginner to advanced techniques. It starts with basic optimizations like enabling gzip, caching, and image optimization. It then discusses more advanced strategies like using a CDN, splitting JavaScript, auditing CSS, and parallelizing downloads. Finally it discusses very advanced techniques like pre-loading assets, detecting broken Accept-Encoding headers, and understanding how to optimize for HTTP/2. The document provides references for further information on each topic.
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
The document discusses front-end web performance optimization from beginner to expert levels. At the beginner level, it recommends starting with basic optimizations like measuring performance, enabling gzip compression, optimizing images, and caching. At the expert level, it discusses more advanced techniques like using a CDN, splitting JavaScript files, auditing CSS, and flushing content early. Finally, it outlines "crazy" optimizations like pre-loading assets, post-load fetching, and understanding round-trip network latency.
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
Boston Web Performance Meetup, April 22, 2014
The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get fed up and leave. In this talk we'll start with the basics and get progressively insane. We'll go over several front-end performance best practices, a few anti-patterns, the reasoning behind the rules, and how they've changed over the years. We'll also look at some great tools to help you.
Schedule: 6:30, pizza
7:15: talk
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get fed up and leave.
In this talk we'll start with the basics and get progressively insane. We'll go over several frontend performance best practices, a few anti-patterns, the reasoning behind the rules, and how they've changed over the years. We'll also look at some great tools to help you.
The document appears to be a presentation on measuring real user experiences using Real User Monitoring (RUM) and analyzing the data. It discusses using RUM tools like Boomerang to collect data on user behavior and performance in real-time. The presentation then examines specific metrics collected like user patience, cache behavior, and how quickly new software versions are distributed based on the RUM data.
Improving 3rd Party Script Performance With IFramesPhilip Tellis
This document discusses using <IFRAME> tags to improve the performance of third party scripts. It describes how third party scripts normally block page loading and proposes using an iframe to load scripts asynchronously in parallel without blocking. It provides code for creating an iframe targeted to load scripts, handling cross-domain issues, and modifying the Method Queue Pattern to support iframes. The approach allows third party scripts to load without blocking the main page load.
The document discusses Boomerang, an open source tool for measuring real user performance on websites. It measures load times, bandwidth usage, latency and other metrics. Additional functionality can be added through plugins. The presentation encourages developers to use Boomerang to analyze user behavior, identify performance issues, and continuously improve sites based on real user data. It provides several examples of insights that can be gained, such as how performance varies by country, browser, and internet connection speed.
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Philip Tellis
The document is a presentation about abusing JavaScript to measure web performance. It discusses using JavaScript to measure network latency, TCP handshake time, network throughput, DNS lookup time, IPv6 support and latency, and other performance metrics. It provides code examples for measuring each metric in JavaScript and notes challenges to consider. The presentation encourages the use of the open source Boomerang library for accurate performance measurement.
The Statistics of Web Performance AnalysisPhilip Tellis
If you're interested in measuring real user web performance, you'll find tools like boomerang or episodes quite handy. Some popular web frameworks even have modules that make it easy to add them to your site. However, what does one do once one has collected the data? How do you filter out the noise and get meaningful insights from the data?
In this talk, I'll go over the techniques we've picked up by analyzing millions of datapoints daily. I'll cover some simple rules to filter out invalid data, and the statistics to analyze and make sense of what's left. Do you use the mean, median or mode? What about the geometric mean and standard deviation? How confident are we in the results? And finally, why should we care?
This talk should help you gain useful insights from a histogram, or at the very least point you in the right direction for further analysis.
Abusing JavaScript to Measure Web PerformancePhilip Tellis
While building boomerang, we developed many interesting methods to measure network performance characteristics using JavaScript running in the browser. While the W3C's NavigationTiming API provides access to many performance metrics, there's far more you can get at with some creative tweaking and analysis of how the browser reacts to certain requests.
In this talk, I'll go into the details of how boomerang works to measure network throughput, latency, TCP connect time, DNS time and IPv6 connectivity. I'll also touch upon some of the other performance related browser APIs we use to gather useful information. I will NOT be covering the W3C Navigation Timing API since that's been covered by Alois Reitbauer in a previous Boston Web Perf talk.
The document discusses analyzing real user monitoring (RUM) data to gain insights into website performance and user behavior. It describes building plugins to collect navigation and timing data from browsers. Various statistical techniques for analyzing the data are covered, including log-normal distributions, filtering outliers, sampling, and correlating metrics like page load time and bounce rates. The analysis of an example 8 million page dataset suggests very fast or slow page loads are associated with higher bounce rates, and thresholds for user-unfriendly performance are proposed based on bounce rates exceeding 50%.
Analysing network characteristics with JavaScriptPhilip Tellis
This document contains slides from a presentation about using JavaScript to analyze network performance. It discusses how to measure latency, TCP handshake time, network throughput, DNS lookup time, IPv6 support and latency, and private network scanning using JavaScript. Code examples are provided for measuring each of these network metrics by making image requests and timing the responses. The presentation emphasizes that accurately measuring network throughput requires requesting resources of different sizes and accounting for TCP slow start. It also notes some challenges around caching and geo-located DNS results.
A Node.JS bag of goodies for analyzing Web TrafficPhilip Tellis
This document is a presentation about analyzing web traffic using Node.js modules. It introduces Node.js and the npm package manager. It then discusses modules for parsing HTTP logs, including parsing user agents, handling IP addresses, geolocation, and date formatting. It also covers modules for statistical analysis like fast-stats, gauss, and statsd. The presentation provides code examples for using these modules and takes questions at the end.
The document discusses input validation and output encoding to prevent vulnerabilities like XSS and SQL injection. It provides examples of how unexpected input can enable attacks, like special characters or invalid data types being passed to endpoints and rendered unencoded. The key lessons are that input validation is needed to receive clean, expected data, while output encoding is crucial to prevent exploits when displaying data to users. Both techniques are important defenses that address different but related issues.
Best Programming Language for Civil EngineersAwais Yaseen
The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era.
Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsMydbops
This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization.
Key Takeaways:
* Understand why connection pooling is essential for high-traffic applications
* Explore various connection poolers available for PostgreSQL, including pgbouncer
* Learn the configuration options and functionalities of pgbouncer
* Discover best practices for monitoring and troubleshooting connection pooling setups
* Gain insights into real-world use cases and considerations for production environments
This presentation is ideal for:
* Database administrators (DBAs)
* Developers working with PostgreSQL
* DevOps engineers
* Anyone interested in optimizing PostgreSQL performance
Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services
Transcript: Details of description part II: Describing images in practice - T...BookNet Canada
This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator.
Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/
Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc
Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk.
What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year?
Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year.
This webinar will review:
- Key changes to privacy regulations in 2024
- Key themes in privacy and data governance in 2024
- How to maximize your privacy program in the second half of 2024
Measuring the Impact of Network Latency at TwitterScyllaDB
Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.
The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.
Best Practices for Effectively Running dbt in Airflow.pdfTatiana Al-Chueyr
As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models.
This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through:
- Standard ways of running dbt (and when to utilize other methods)
- How Cosmos can be used to run and visualize your dbt projects in Airflow
- Common challenges and how to address them, including performance, dependency conflicts, and more
- How running dbt projects in Airflow helps with cost optimization
Webinar given on 9 July 2024
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfNeo4j
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)
The Rise of Supernetwork Data Intensive ComputingLarry Smarr
Invited Remote Lecture to SC21
The International Conference for High Performance Computing, Networking, Storage, and Analysis
St. Louis, Missouri
November 18, 2021
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Bert Blevins
Today’s digitally connected world presents a wide range of security challenges for enterprises. Insider security threats are particularly noteworthy because they have the potential to cause significant harm. Unlike external threats, insider risks originate from within the company, making them more subtle and challenging to identify. This blog aims to provide a comprehensive understanding of insider security threats, including their types, examples, effects, and mitigation techniques.
Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment.
How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.
Comparison Table of DiskWarrior Alternatives.pdfAndrey Yasko
To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.
Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data.
The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs.
Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution!
Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.
What's New in Copilot for Microsoft365 May 2024.pptx
Javascript charting with YUI-Flot
1. Introduction
YUI-Flot
Enlightenment
Javascript charting with YUI-Flot
Philip Tellis / philip@bluesmoon.info
FOSDEM 2010 / 2010-02-07
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
2. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
$ finger philip
Philip Tellis
philip@bluesmoon.info
tech.bluesmoon.info
@bluesmoon
yahoo
geek
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
3. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
What’s this talk all about?
Charting options for web developers
Javascript charting with YUI-Flot
Things I learnt
How you can contribute
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
4. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
Why do we need charting on the web?
There’s so much data on the web
It’s easy for users to access your data over the web
It’s a little more portable than emailing Excel spreadsheets
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
5. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
Why do we need charting on the web?
There’s so much data on the web
It’s easy for users to access your data over the web
It’s a little more portable than emailing Excel spreadsheets
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
6. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
Why do we need charting on the web?
There’s so much data on the web
It’s easy for users to access your data over the web
It’s a little more portable than emailing Excel spreadsheets
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
7. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
Alternatives for charting on the web
Static images generated on the server
Flash based dynamic charts with lots of interactivity
Javascript + Canvas based charts with some interactivity
Progressively enhanced CSS only charts
Non-semantic, HTML Table only charts (don’t do this)
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
8. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
Image based charts
Many charting libraries available
Works on all browsers (kind of)
Static images can be downloaded and pasted into a report
Cannot interact with the data, or easily drill-down
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
9. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
Flash based charts
Quite pretty and flashy
Works across most GUI based browsers (with a plugin)
Does not work on the iPhone
Grabs focus - still a problem on linux
Fast, but JS-Flash bridge is slow
Can progressively enhance a data table
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
10. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
Javascript+Canvas based charts
Easy for any Javascript developer to hack
Based on Open standards
Does not natively work with Internet Explorer
Easy to integrate with other javascript libraries
Can progressively enhance a data table
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
11. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
CSS only charts
http://icant.co.uk/csscharts/
Very simple code
Data needs to be encoded twice
Only vertical bar charts
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
12. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
What is flot?
A pure javascript charting library
Uses the HTML Canvas tag for drawing
Really smooth, and very pretty
Uses excanvas to work on IE
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
13. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
Why I like it
Looks good – very important based on your target
audience
Good event model
Fast at drawing and redrawing
Ability to “zoom in” to sections of the data
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
14. Introduction Who, what, why?
YUI-Flot Charting on the web
Enlightenment YUI-Flot
Why I ported it to YUI
My Javascript library of choice is YUI
My project required a charting widget
Flash based charts caused me problems on linux
Flot seems to have a good community around it
Most important – I already knew and was using Javascript
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
15. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
Draw basic x/y scatter plots
Random set of x,y points
[[10, 20], [15, 13], [8, 32], [12,
7], [17, 19], [23, 8], [3, 5]]
yui-examples/scatter.html
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
16. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
Series plots
X-axis contains Date objects or
timestamps
Resolution is in seconds
strftime formatting
yui-examples/timeseries.html
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
17. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
Multiple series
3 series with a common X value
Schema style data structure – out of a DB
yui-examples/multiseries.html
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
18. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
Multiple series
{ x: 1, temp: 16, hg: 3, vol: 40 },
{ x: 2, temp: 18, hg: 4, vol: 30 },
{ x: 3, temp: 12, hg: 6, vol: 20 },
...
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
19. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
1. Include code into your HTML
<div id="placeholder"></div>
<!--[if IE]><script type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript"
src="http://yui.yahooapis.com/combo
?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js
&2.7.0/build/datasource/datasource-min.js">
</script>
<script type="text/javascript" src="yui.flot.js"></script>
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
20. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
2. Get your data from somewhere
var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ];
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
21. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
3. Set your chart’s parameters
var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ];
var config = { lines: {show: true}, points: {show: true} };
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
22. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
4. Instantiate the chart
var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ];
var config = { lines: {show: true}, points: {show: true} };
YAHOO.widget.Flot("placeholder", [data], config);
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
23. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
Flot => YUI-Flot
Based off flot 0.5, flot is now at 0.6
Added log scales for all axes (also in Flot 0.6)
Allow more than two axes in each direction
Add axis labels
Drop points to make plot more readable
Use tabs instead of spaces for indentation
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
24. Introduction What can it do?
YUI-Flot How to use it?
Enlightenment Differences from Flot
Timeseries changes
Accepts Date objects as values for a timeseries
timestamps are in seconds and not in milliseconds
Full strftime based date formatter
locale support for time series
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
25. Introduction Future
YUI-Flot Things I learnt
Enlightenment How to contribute
Move up to flot 0.6
I like the plugin model in flot 0.6
The thresholds feature is great
Stacked bars are useful
Stepped line charts are useful
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
26. Introduction Future
YUI-Flot Things I learnt
Enlightenment How to contribute
More additions
Add error bars & candlesticks
Pie charts
Add a smoothing plugin (local regression)
Upgrade to YUI 3
Move it into the YUI gallery
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
27. Introduction Future
YUI-Flot Things I learnt
Enlightenment How to contribute
Javascript objects are passed by reference
Bad Good
function fixData(d) { function fixData(d) {
var i, l=d.length; var i, l=d.length;
var d_c=[];
for(i=0; i<l; i++) { for(i=0; i<l; i++) {
d[i] = fix(d[i]); d_c[i] = fix(d[i]);
} }
return d; return d_c;
} }
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
28. Introduction Future
YUI-Flot Things I learnt
Enlightenment How to contribute
There’s more to charts than drawing lines
Understanding statistics helps
Different visualisations for different types of data
http://www.perceptualedge.com/articles/Whitepapers/Communicating_Numbers.pdf
Charts need to summarise data visually
You can plot more than two dimensions on a 2d canvas
eg: Dot pitch in a scatter plot or error bars
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
29. Introduction Future
YUI-Flot Things I learnt
Enlightenment How to contribute
You can rotate HTML elements using CSS or SVG
DIV.vertical {
-moz-transform:rotate(270deg); /* Gecko */
-webkit-transform:rotate(270deg); /* Webkit */
writing-mode:tb-rl; /* IE */
filter:flipV flipH;
/* alternate for IE */
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
30. Introduction Future
YUI-Flot Things I learnt
Enlightenment How to contribute
Fork the project on github
Fork the project on github
Make your own changes (BSD Licensed)
Tell me about them through a pull request
This code is available to everyone
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
31. Introduction Future
YUI-Flot Things I learnt
Enlightenment How to contribute
Sign the YUI CLA
YUI CLA: You’re commiting legal code
ie: You own the code, you haven’t stolen it, etc.
This code can also get into the YUI gallery
Available for use through the Yahoo! CDN
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
32. Introduction Future
YUI-Flot Things I learnt
Enlightenment How to contribute
YUI-Flot
http://github.com/bluesmoon/yui-flot
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
33. Introduction
YUI-Flot
Enlightenment
Thanks, Merci, Bedankt, Danke Schön
Jochen Maes & Philip Paeps
Ole Laursen & IOLA
Yahoo! Developer Network
The YUI team
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
34. Introduction
YUI-Flot
Enlightenment
contact me
Philip Tellis
philip@bluesmoon.info
tech.bluesmoon.info
@bluesmoon
yahoo
geek
FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot