#Design Concept
- A collection of common chart based on d3.js
- Following Mike Bostock's Reusable Chart pattern
- Responsive using SVG viewbox
- Entering Animation
- Flexible (the following clock is built using settimeinterval with donut chart)
#Example Bar Chart
data = [ {"key": '彰化碧峰里', "value": 43} {"key": '花蓮森榮里', "value": 41} {"key": '南投光明里', "value": 41} {"key": '台灣平均', "value": 12} {"key": '新竹東平里', "value": 2} {"key": '新竹關新里', "value": 2} {"key": '新竹大鵬里', "value": 2} ] firstBar = barChart! .data data .container '#bar' ### the container where to init the bar chart .barHeight 25 firstBar! ### call this when page init, so that the svg is being initiated, and the space is saved firstBar.draw! ### when user actually scroll to the viewport, then start entering animation