Day 80 of 180 Days of Data Viz #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.  See post explaining how and why I’m doing this.

Code Learning: 

Intermediate D3 for Data Visualization Knight Center Course

Module 1 Intro (Transitions, Tooltips, Context + Framing):

Three Takeaways:

  • Review/note to self remember .transition() .delay() to create loading look and feel for charts
    • eg rects.transition()
      //Introduce a per-element delay
      .delay(function(d, i) { // delay function to delay each element for transition
      return i * 50;
      //Or try this instead:
      //return (data.length – i) * 50;
      .attr(“width”, function(d) {
      return widthScale(d.lifeSatisfaction);
  • So much of styling in D3 is a confusing interplay between CSS and attributes
  • Remember to use and stylize divs and create various #container to better display visuals

Interactive Data Visualization for the Web End of Chapter 9 Updates, Transitions, and Motion and Beg of Chapter 10 Interactivity 

Three Takeaways:

  • By default data joins are performed by index, meaning order of appearance.  For more control over data joins, specify a key function (eg. var key = function(d) { return d.key;};
  • The update selection can contain enter and exit selections, which can be accessed via enter()and exit().
    • When there are more values than elements, an enter selection will reference the placeholder, not-yet-existing elements.
    • When there are more elements than values, an exit selection will reference the elements without data.
  • Example of using Javascript event listener (d3 recognizes all standard js events)
  • //Create barssvg.selectAll("rect")
          //Set attributes (omitted here)
       .on("click", function(d) {
           //This will run whenever *any* bar is clicked

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s