I’m doing some form of data visualization learning for 180 days because I need to #JFDI.
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”));