Day 82 of 180 Days of Data Viz Learning #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 2 Stack Layout:

Three Takeaways:

  • d3.layout.stack() to create a stacked bar chart
  • stack layouts calculate baselines for each bar stack as a y0 value in array
  • How to calculate heights in stack layout
    • var rects = groups.selectAll(“rect”) // within each group, we do another data binding, select all rects and bind this data
      .data(function(d) { return d; }) // take data already bound to group, create rect for each one, and set x-width for each
      .attr(“x”, function(d, i) {
      return xScale(i);
      .attr(“width”, xScale.rangeBand())
      .attr(“y”, function(d) {
      return h – yScale(d.y0) – yScale(d.y); //Flip the math!
      .attr(“height”, function(d) {
      return yScale(d.y); //use y values to calculate height

Interactive Data Visualization for the Finished Chapter 10 Interactivity 

Three Takeways

  • Bind event listeners to g elements if you want them to behave as a group -> useful for when you need “several visual elements to act in concert”
  • For sorts, you need to specify how two items should be compared, versus just calling .sort() for example
  • You can use HTML div element to create a tooltip with CSS

Treehouse Back-to-Basics (again, not taking notes for basic review):

Going through JQuery Basics


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