d3.js snippets

Selecting a JavaScript Chart Library

Tagged javascript, chart, charts, d3.js, chartjs, flot, c3js, nvd3  Languages 

Which JavaScript library should I use for generating charts? Here's a list of popular JavaScript libraries for generating charts. Remember to check the license before selecting one...

http://chartjs.org

http://c3js.org/

  • based on D3.js
  • +3000 followers on Github
  • +150 issues on Github

http://d3js.org/

  • +30 000 followers on Github
  • +150 issues on Github
  • unlimited possibilities
  • unlimited complexity
  • unlimited popularity
  • you need to write your own reusable d3.js components
  • supports Firefox, Chrome, Safari, Opera, IE9+, Android and iOS. Parts of D3 may work in older browsers.

http://nvd3.org/

  • based on D3.js
  • +3000 followers on Github
  • +250 issues on Github

http://dimplejs.org/

  • based on D3.js
  • +900 followers on Github
  • +30 issues on Github

https://github.com/fastly/epoch

  • 3500 Github followers
  • 30 Github issues

https://github.com/gionkunz/chartist-js

  • 4000 Github followers
  • 10 Github issues

https://github.com/tenXer/xcharts/

  • 1500 Github followers
  • 30 Github issues
  • based on D3.js

http://www.flotcharts.org/

  • Works with Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+
  • requires jQuery
  • +3500 followers on Github
  • +250 issues on Github

http://g.raphaeljs.com/

  • +1400 followers on Github
  • +110 issues on Github
  • supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

http://www.fusioncharts.com/

  • “23 000 customers”
  • price is “as much as you can pay”

http://www.highcharts.com/

  • Free for non-commercial projects
  • HTML5
  • “tens of thousands of developers”
  • supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange and polar chart

https://github.com/ankane/chartkick

  • Uses Google charts behind the scenes

http://metricsgraphicsjs.org/

  • Based on d3.js
  • 385 followers on Github
  • 18 issues on Github
  • "optimized for visualizing and laying out time-series data"

Idempotency with Rails and Turbolinks

Tagged idempotency, turbolinks, d3.js  Languages ruby

To achieve idempotency with Rails and Turbolinks you have many options including these:

  • Option 1: Destroy DOM elements

Destroy existing elements that were created on the first page load. This works well with most libraries, including D3.js.

The is also the easiest to implement if you put everything under one root DOM element.

  • Option 2: Set a flag

Set a flag. Check if the flag is set before running the script. Note that you will have to use delegated event listeners or attach event listeners again. This is hard to do with, for example, D3.js.

document.addEventListener("turbolinks:load", function() {
  $('.linechart').each(function(_ix, el) {
    // Option 1: Destroy existing elements that were created on the first page load
    el = $(el);
    el.empty(); // empty removes all child elements. Normally this would be put in the script itself
    linechart(el)
    // Option 2: Set a flag to avoid calling the script twice 
    //if(el.attr('data-initialized') == null) {
    //  console.log("not initialized")
    //  linechart(el)
    //} else {
    //  console.log("initialized")
    //}
    // // Attach event listeners again
    // linechart.attachDelegatedEventListeners(el);
    //el.attr('data-initialized', true);
  });
});