Day 172 of 180 Days of Data Viz Learning #jfdi #dataviz

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.

Three Takeways Today

Chapter 4 General Charting Principles 
  • Axis is a function that is a d3 component that lets you draw all graphical elements needed for an exists.  eg.  d3.svg.line() lets you draw a straight or curved line across many points. p 108
  • D3 functionality can be put in three broad categories p 109:
    • Generators take in datapoint array values.  They produce “SVG drawing code for the d attribute of <path> elements.  Generators include area(), line(), diagonal(), arc()
    • Components take in Functions such as scale(), axis(), brush(), zoom().  They productive “elements and event listeners ‘<g><line class=“tick”/><text class=“label” /></g>”
    • Layouts take in whole datasets.  These include stack(), pie(), chord().
  • After creating an axis function, we define how we want the axis to look like.  We use the .call() method from a selection on <go> element on where we want the graphical elements drawn.
    • var yAxis = d3.axis().scale(ySale).orient(“right”);
    • d3.select(“svg”).append(“g”.attr(“id”, “yAxisG”).call(yAxis);
    • var aAxis = d3.svg.axis().scale(xScale).orient(“bottom”);
    • d3.select(“svg”).append(“g”).attr(“id”, “xAxisG”).call(xAxis);
    • The .call() method of a selection invokes a function with the selection thats active in the method chain.  Same as: xAxis(d3.select(“svg”).append(“g”).attr(“id”, xAxisG”));
Advertisements

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