Successfully reported this slideshow.
Your SlideShare is downloading. ×

Influx/Days 2017 San Francisco | Dan Vanderkam

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Teach yourself Ruby on Rails
Teach yourself Ruby on Rails
Loading in …3
×

Check these out next

1 of 19 Ad

Influx/Days 2017 San Francisco | Dan Vanderkam

Download to read offline

THE DYGRAPHS CHARTING LIBRARY
dygraphs is an open source JavaScript charting library which has been in development since 2006. Its combination of performance and interactivity make it an appealing visualization for dashboards. This talk will walk through how to add dygraphs to your project and how it can be used to facilitate interactive data exploration. Along the way, we’ll touch on some of the trials and tribulations of maintaining open source projects over long periods of time.

THE DYGRAPHS CHARTING LIBRARY
dygraphs is an open source JavaScript charting library which has been in development since 2006. Its combination of performance and interactivity make it an appealing visualization for dashboards. This talk will walk through how to add dygraphs to your project and how it can be used to facilitate interactive data exploration. Along the way, we’ll touch on some of the trials and tribulations of maintaining open source projects over long periods of time.

Advertisement
Advertisement

More Related Content

Similar to Influx/Days 2017 San Francisco | Dan Vanderkam (20)

More from InfluxData (20)

Advertisement

Influx/Days 2017 San Francisco | Dan Vanderkam

  1. 1. Building time series visualizations with dygraphs Influx/Days 2017 Dan Vanderkam (@danvdk)
  2. 2. Who am I? ● Software developer at Sidewalk Labs ● Formerly at Google ● Have done many side projects over the years, e.g. dygraphs! ● danvk.org
  3. 3. What we'll cover ● Overview of dygraphs ● Tutorial ● Why might you use dygraphs ● History of the project ● Some lessons learned from 10 years of open source. ● Future of dygraphs
  4. 4. dygraphs overview This is better done with demos! ● Tutorial page ● NY vs. SF temperature chart; with range selector ● Synchronization ● Custom plotters ● Drawing demo ● Many points ● DuckDuckGo Traffic page
  5. 5. ● dygraphs.com/jsbin ● Just Chart It! ○ final results ● Callbacks: highlighted region ● Plugins: e.g. unzoom / demo Tutorial
  6. 6. Why use dygraphs? ● Open source ● Easy to get from nothing to an interactive chart ● Fast ● Flexible
  7. 7. ● D3 is a wildly popular tool for creating visualizations ● It's much more general than dygraphs ● … but the time to chart is greater ● D3's data model doesn't work well with <canvas> Why use dygraphs… instead of D3?
  8. 8. <canvas> vs. SVG SVG is XML for images: <polygon> <path> <circle> You can style it with CSS, manipulate it with DOM APIs.
  9. 9. <canvas> vs. SVG Canvas is a bitmap. Opaque in the DOM, not styleable with CSS. Have to redraw constantly. …but it's fast!
  10. 10. Why use dygraphs… instead of Highcharts? ● Highcharts fills similar needs to dygraphs, but… ○ it's more popular ○ it supports more types of charts ○ it's backed by a company ● You might use dygraphs if… ○ you want open source ○ you want something canvas-based
  11. 11. Why use dygraphs… instead of chart.js? ● chart.js is newer, very popular ● dygraphs has more interactivity out of the box.
  12. 12. Brief history of the project ● 2006: built dygraphs for an internal dashboard at Google. Forked Alastair Tse's PlotKit and added interactivity. ● 2009: changed teams at Google, dygraphs was useful on team 2, too! Released as open source on Google Code, then GitHub. Got some traction. ● 2013: 1.0 release ● 2014: 1.1 release ● 2014: dygraphs in RStudio ● 2016: dygraphs in Chronograf ● 2017: 2.0 release
  13. 13. Some lessons learned ● Get people involved early on. ● It'll be harder later.
  14. 14. Recognize that you'll work in spurts ● Don't start something too big to finish in one spurt. ● Record context that you'll forget. ○ Target audience for comments: YOU in a year or two. ○ If you take the time to review an issue or PR, always include your overall disposition in the response. Helpful for the author and you! ● But… JS has changed a lot in 10 years. Sometimes refactors are necessary.
  15. 15. Watch out for the combinatorial explosion of options ● dygraphs has a lot of options (116 as of this morning!) ● Adding the first few is easy and appealing ● The more options, the more interactions. ● Ways to deal with this: ○ Require documentation, examples with all new options ○ More general options: callbacks, per-series and per-axis options ○ Even more general: plugins (e.g. unzoom / demo) ○ We rarely accept new options today if you can achieve the same with a plugin or existing option.
  16. 16. Social hacks lead to better issues and questions ● The mailing list was a wasteland… but Stack Overflow is great! ○ ~750 questions asked. ○ You can sign up for an email alert whenever a new question is asked. ● GitHub issue templates lead to better issues ● I close any issue and don't respond to any question without a dygraphs.com/fiddle repro.
  17. 17. It's hard to track usage! ● Stack Overflow: track when people are confused ● NPM stats: track… something? ● GitHub stars; on JCI ● Google Analytics on dygraphs.com ● Server logs
  18. 18. Screenshot Testing ● Most options have some kind of demo that shows their use. ● Before doing a release, look at all the demos to see if anything has changed. ● … this can be automated! ○ dygraphs-dpxdt repo ○ This is a separate repo so that you can more easily git bisect ● For more on this, check out my PyCon 2015 talk.
  19. 19. What's next? ● Broaden ownership of dygraphs ● Make it faster: panning + zooming especially ● Make it better at loading data on-demand ● And some support for "themes" ● Framework integration: ReactDygraphs? ng-dygraphs?

×