Wouldst thou like to data deliciously? (Or at least make a pretty bar chart…)

So the other day I saw a question on Stack Overflow about transitions and delays and what not in D3 (the most powerful data viz JavaScript library out there) and it got me thinking, somehow, about a bar chart scintillating in waves with pretty, bright colors.  Well, anyway, there are user interaction issues with graphs that are too busy, but I still wanted to make a pretty graph and so I did here in a JSFiddle and then made it a gist for bl.ocks.org. Note: I have since updated the gist to include an http get request for my language stats from my Github repos via the Github API, but the JSFiddle link (above) has the original code.

7pyaerlyzv

(The gif above was made with recordit.co).

The bar graph is taken from a couple of example bar charts based on data regarding the frequency of letters of the English alphabet (like this one).  This is the main show which is on a setInterval:

var barFun = function() {
	var colors = [
  	"#0C8EE8",
    "#E600FF",
    "#E8720C",
    "#CAFF0A"
   ];
   
	if (count > 3) {
  	count = 0;
  }

  bars.each(function(d, i) {
      var self = d3.select(this);
      self.transition()
      	.delay(i*150)
      	.style("fill", colors[count])
        .duration(150)
        .ease(d3.easeLinear);
  });
  
  count++;
};

Basically, a transition for the fill color of the bars is set on each bar and I just iterate over the color array via the set interval and a counter.  It’s that simple!

Advertisements

One thought on “Wouldst thou like to data deliciously? (Or at least make a pretty bar chart…)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s