檳榔嶼

==== Getting Start ====
http://github.com/d3/d3/blob/master/



Selecting the DOM
  - DOM Access
  - select (STR)
  - selectAll (STR)
  - STR CSS selectors
  - Chain action methods

  * not zero index, start from 1



Controlling HTML within selection
  - text() : modify text

  - html() : modify html

  - append() : appends elements

  - insert() : inserts elements
    - if not defining anything, append

    - define location

  - remove() : deletes elements


Modifying attributes through CSS
  - style() : CSS style

  - classed() : toggle classes




  - attr() : any attribute

  - property() : any property


Binding data to the DOM
  - data() : joins data





  - Callback access
  - Index available

Creating subselections
  - enter()
  - Sub-selections
  - exit()




==== Understanding SVG Graphics ====

Drawing with SVG
  - HTML : shapes lacking
  - XML format
  - Style through CSS
  - Easy to create
  - Scriptable

Understanding SVG primitives
  - <svg> tag

    - <line /> : self finish

  - Use style declarations
  - rect, circle, line, text, polyline



  - g : creates groups

  - xlink:href : create instance


Create SVGs
  - Target DOM
  - append()
  - attr(), style(), etc


Create a simple SVG bar chart


==== Using D3 Methods ====

Adding a linear scale
  - scaleLinear() : fit the range
  - domain()
  - range()
  - Stats : min(), max(), etc



Using Ordinal Scales : ordinal scales
  - scaleBand()
  - padding(), paddingInner(), paddingOuter()
  - bandwidth()



Creating meaningful color scales





Adding events
  - on (EVT) handler
  - mouseout, mouseover, etc



  * Be careful of the location of tempColor Assignment


Using transitions and animations : API.md#transitions-d3-transition
  - transition() : sets up
  - duration() : control speed
  - delay() : add time



Adding a tooltip :



==== Using Data ====

Using external data
  - d3 AJAX
  - .csv, html, .json, .text, tsv, .xml
  - Handle with callback()
  - http://openweathermap.org
  - http://jsoneditoronline.org  --> Use to see the data hierarchy

Using meaningful colors




Adding a simple guide : API.md#axes-d3-axis
  - Regular scales
  - axisTop, axisRight, axisBottom, axisLeft
  - Tick methods
  - Group elements

  1. Create Axis Elements

  2. Add one group for the original graph

  3. Append another chart as axis


Create margins
Margin Convention / D3 / Observable (observablehq.com)





Adding a time-based guide
  - scaleTime()
  - Date based domain
  - Special ticks
  - Group elements



​​​​​