d3 - KeynesYouDigIt/Knowledge GitHub Wiki

Notes

  • D3 just does the math and gives you a declarative DOM API. You have to use something like HTML or SVG to actually draw the visualization
  • Much like jQuery, you start d3 chains with a selection. The methods chain together, each step returning a modified version of the selection
  • You can set attributes and style properties with constant values, or with computed properties by passing in functions
  • You can save selections part way through a chain to fork them or make things more clear
  • Binding data has 3 phases
    • Enter, which is when there is new elements being created because there are more data points than there are elements
    • Update, which is done to elements that already exist
    • Exit, which is when there are more elements than data points
  • You can make linear, ordinal and other scales to transform a data point to whatever scale it's being presented at. You set the domain (data input) and range (chart output) of the scale, and then use the resulting function to scale data to your chart size.
  • You can animate transitions with transition(), delay(), and duration()
  • You set the style of nodes with .style(), and the attributes of nodes with .attr()
  • All SVGs are absolutely positioned from the top left