├── .gitignore ├── LICENSE ├── README.md ├── bar ├── gulpfile.ls ├── index.html ├── index.jade └── js │ ├── bar.js │ ├── bar.ls │ ├── exec.js │ └── exec.ls ├── doc └── demo.gif ├── donut ├── clock.html ├── clock.jade ├── countdown.html ├── countdown.jade ├── gulpfile.ls ├── index.html ├── index.jade └── js │ ├── clock.js │ ├── clock.ls │ ├── countdown.js │ ├── countdown.ls │ ├── donut.js │ ├── donut.ls │ ├── exec.js │ └── exec.ls ├── lib ├── colorbrewer.v1.min.js ├── d3.min.js └── prelude-browser-min.js └── line ├── data.tsv ├── gulpfile.ls ├── index.html ├── index.jade ├── js ├── exec.js ├── exec.ls ├── line.js └── line.ls └── ratio.tsv /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Design Concept 2 | 3 | 0. A collection of common chart based on d3.js 4 | 1. Following Mike Bostock's [Reusable Chart](http://bost.ocks.org/mike/chart/) pattern 5 | 2. Responsive using SVG viewbox 6 | 3. Entering Animation 7 | 4. Flexible (the following clock is built using settimeinterval with donut chart) 8 | 9 | ![clock](/doc/demo.gif) 10 | 11 | 12 | 13 | 14 | #Example Bar Chart 15 | 16 | [See it in action](http://iing.tw/policies/long-term_care) 17 | 18 | 19 | data = [ 20 | {"key": '彰化碧峰里', "value": 43} 21 | {"key": '花蓮森榮里', "value": 41} 22 | {"key": '南投光明里', "value": 41} 23 | {"key": '台灣平均', "value": 12} 24 | {"key": '新竹東平里', "value": 2} 25 | {"key": '新竹關新里', "value": 2} 26 | {"key": '新竹大鵬里', "value": 2} 27 | ] 28 | 29 | firstBar = barChart! 30 | .data data 31 | .container '#bar' ### the container where to init the bar chart 32 | .barHeight 25 33 | 34 | 35 | firstBar! ### call this when page init, so that the svg is being initiated, and the space is saved 36 | 37 | 38 | firstBar.draw! ### when user actually scroll to the viewport, then start entering animation -------------------------------------------------------------------------------- /bar/gulpfile.ls: -------------------------------------------------------------------------------- 1 | # ulimit -S -n 2048 2 | 3 | require! { 4 | "gulp" 5 | "gulp-livescript" 6 | "gulp-uglify" 7 | "gulp-rename" 8 | "gulp-imagemin" 9 | "imagemin-pngcrush" 10 | "gulp-gm" 11 | "gulp-stylus" 12 | "gulp-jade" 13 | } 14 | 15 | gulp.task "js-min" -> 16 | gulp.src "./js/*.ls" 17 | .pipe gulp-livescript bare: false, prelude: true 18 | .pipe gulp-uglify! 19 | .pipe gulp.dest "./js/" 20 | .pipe gulp-rename extname: ".min.js" 21 | .pipe gulp.dest "./js/" 22 | 23 | gulp.task "reimg" -> 24 | gulp.src "./image/*" 25 | .pipe(gulp-imagemin({ 26 | optimizationLevel: 6 27 | progressive: true 28 | svgoPlugins: [{removeViewBox: false}] 29 | use: [imagemin-pngcrush!] 30 | })) 31 | .pipe gulp.dest "./reimg/" 32 | 33 | gulp.task "smlimg" -> 34 | gulp.src "./reimg/*" 35 | .pipe gulp-gm -> 36 | it.resize 100 37 | .pipe gulp.dest "smlimg" 38 | 39 | 40 | gulp.task "js-dev" -> 41 | gulp.src "./js/*.ls" 42 | .pipe gulp-livescript bare: true, prelude: true 43 | .pipe gulp.dest "./js/" 44 | 45 | gulp.task "css-dev" -> 46 | gulp.src "./css/*.styl" 47 | .pipe gulp-stylus! 48 | .pipe gulp.dest "./css/" 49 | 50 | 51 | gulp.task "jd-dev" -> 52 | gulp.src "*.jade" 53 | .pipe gulp-jade pretty: true 54 | .pipe gulp.dest "." 55 | 56 | gulp.task "watch" -> 57 | gulp.watch "./js/*.ls", ["js-dev"] 58 | gulp.watch "./css/*.styl", ["css-dev"] 59 | gulp.watch "*.jade", ["jd-dev"] 60 | 61 | 62 | 63 | gulp.task "default" ["watch"] -------------------------------------------------------------------------------- /bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bar Chart 5 | 6 | 7 | 8 | 9 | 10 |
單位：% ；2014 年資料：世界銀行、內政部
11 |
12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /bar/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title Bar Chart 5 | meta(http-equiv="Content-Type", content="text/html; charset=UTF-8") 6 | script(type="text/javascript", src="../lib/d3.min.js") 7 | script(type="text/javascript", src="../lib/prelude-browser-min.js") 8 | 9 | 10 | body 11 | div#bar 12 | span(style="float:right; color:grey") 13 | 單位：% ；2014 年資料：世界銀行、內政部 14 | div#bar2 15 | div#bar3 16 | 17 | 18 | script(type="text/javascript", src="./js/bar.js") 19 | script(type="text/javascript", src="./js/exec.js") -------------------------------------------------------------------------------- /bar/js/bar.js: -------------------------------------------------------------------------------- 1 | var _, barChart; 2 | _ = require("prelude-ls"); 3 | barChart = function(){ 4 | var chrt, gradientData, build, i$; 5 | chrt = {}; 6 | chrt.container = null; 7 | chrt.data = null; 8 | chrt.margin = { 9 | top: 10, 10 | left: 80, 11 | right: 50, 12 | bottom: 20 13 | }; 14 | chrt.w = 500 - chrt.margin.left - chrt.margin.right; 15 | chrt.h = null; 16 | chrt.barHeight = 25; 17 | chrt.barMargin = 5; 18 | chrt.duration = 2000; 19 | chrt.delay = 200; 20 | gradientData = [ 21 | { 22 | "offset": "0%", 23 | "color": "rgb(215, 235, 97)" 24 | }, { 25 | "offset": "100%", 26 | "color": "rgb(80, 180, 115)" 27 | } 28 | ]; 29 | chrt.barStyle = null; 30 | chrt.textFunc = function(it){ 31 | if (it === 0) { 32 | return ""; 33 | } else { 34 | return it.toFixed(0); 35 | } 36 | }; 37 | chrt.svg = null; 38 | build = function(){ 39 | if (chrt.data === null || chrt.container === null) { 40 | return; 41 | } 42 | chrt.h = chrt.data.length * chrt.barHeight + (chrt.data.length - 1) * chrt.barMargin; 43 | return chrt.svg = d3.select(chrt.container).insert("svg", "span").attr({ 44 | "viewBox": "0 0 " + (chrt.w + chrt.margin.left + chrt.margin.right) + " " + (chrt.h + chrt.margin.top + chrt.margin.bottom), 45 | "width": "100%", 46 | "height": "100%", 47 | "preserveAspectRatio": "xMinYMin meet" 48 | }).append("g").attr({ 49 | "transform": "translate(" + chrt.margin.left + "," + chrt.margin.top + ")" 50 | }); 51 | }; 52 | build.draw = function(){ 53 | var scaleX, scaleY, bars; 54 | scaleX = d3.scale.linear().domain([ 55 | 0, d3.max(chrt.data, function(it){ 56 | return it.value; 57 | }) 58 | ]).range([0, chrt.w]); 59 | scaleY = function(i){ 60 | return i * (chrt.barHeight + chrt.barMargin); 61 | }; 62 | chrt.svg.append("linearGradient").attr({ 63 | "id": "themeGradient", 64 | "gradientUnits": "userSpaceOnUse", 65 | "x1": 0, 66 | "x2": chrt.w, 67 | "y1": 0, 68 | "y2": 0 69 | }).selectAll("stop").data(gradientData).enter().append("stop").attr({ 70 | "offset": function(it){ 71 | return it.offset; 72 | }, 73 | "stop-color": function(it){ 74 | return it.color; 75 | } 76 | }); 77 | bars = chrt.svg.selectAll(".bars").data(chrt.data); 78 | bars.enter().append("rect").attr({ 79 | "width": 0, 80 | "class": "bars" 81 | }); 82 | bars.transition().duration(chrt.duration).delay(function(it, i){ 83 | return i * chrt.delay; 84 | }).attr({ 85 | "width": function(it){ 86 | return scaleX( 87 | it.value); 88 | }, 89 | "height": function(){ 90 | return chrt.barHeight; 91 | }, 92 | "x": 0, 93 | "y": function(it, i){ 94 | return scaleY(i); 95 | } 96 | }); 97 | if (chrt.barStyle !== null) { 98 | bars.call(chrt.barStyle); 99 | } 100 | chrt.svg.selectAll(".name").data(chrt.data).enter().append("text").attr({ 101 | "x": -30, 102 | "y": function(it, i){ 103 | return scaleY(i) + chrt.barHeight / 2 + 7; 104 | }, 105 | "class": "name" 106 | }).style({ 107 | "text-anchor": "end" 108 | }).text(function(it){ 109 | return it.key; 110 | }); 111 | return chrt.svg.selectAll(".number").data(chrt.data).enter().append("text").attr({ 112 | "x": 5, 113 | "y": function(it, i){ 114 | return scaleY(i) + chrt.barHeight / 2 + 7; 115 | }, 116 | "class": "number" 117 | }).style({ 118 | "text-anchor": "start" 119 | }).transition().duration(chrt.duration).delay(function(it, i){ 120 | return i * chrt.delay; 121 | }).attr({ 122 | "x": function(it){ 123 | return scaleX( 124 | it.value) + 5; 125 | } 126 | }).tween("text", function(it){ 127 | var i; 128 | i = d3.interpolate(this.textContent, it.value); 129 | return function(n){ 130 | return this.textContent = chrt.textFunc( 131 | i( 132 | n)); 133 | }; 134 | }); 135 | }; 136 | for (i$ in chrt) { 137 | (fn$.call(this, i$)); 138 | } 139 | return build; 140 | function fn$(it){ 141 | build[it] = function(v){ 142 | if (arguments.length === 0) { 143 | return chrt[it]; 144 | } else { 145 | chrt[it] = v; 146 | return build; 147 | } 148 | }; 149 | } 150 | }; -------------------------------------------------------------------------------- /bar/js/bar.ls: -------------------------------------------------------------------------------- 1 | _ = require "prelude-ls" 2 | 3 | barChart = -> 4 | 5 | chrt = {} 6 | 7 | chrt.container = null 8 | chrt.data = null 9 | 10 | chrt.margin = {top: 10, left: 80, right: 50, bottom: 20} 11 | chrt.w = 500 - chrt.margin.left - chrt.margin.right 12 | chrt.h = null ### will growth according to data & barHeighteight 13 | 14 | chrt.barHeight = 25 15 | chrt.barMargin = 5 16 | 17 | chrt.duration = 2000 18 | chrt.delay = 200 19 | gradientData = [ 20 | {"offset": "0%", "color": "rgb(215, 235, 97)"} 21 | {"offset": "100%", "color": "rgb(80, 180, 115)"} 22 | ] 23 | chrt.barStyle = null 24 | chrt.textFunc = (-> if it is 0 then "" else it.toFixed 0) 25 | chrt.svg = null 26 | 27 | build = -> 28 | if chrt.data is null or chrt.container is null then return 29 | 30 | chrt.h := chrt.data.length * chrt.barHeight + (chrt.data.length - 1) * chrt.barMargin 31 | 32 | chrt.svg := d3.select chrt.container 33 | .insert "svg", "span" 34 | .attr { 35 | "viewBox": "0 0 " + (chrt.w + chrt.margin.left + chrt.margin.right) + " " + (chrt.h + chrt.margin.top + chrt.margin.bottom) 36 | "width": "100%" 37 | "height": "100%" 38 | "preserveAspectRatio": "xMinYMin meet" 39 | } 40 | .append "g" 41 | .attr { 42 | "transform": "translate(" + chrt.margin.left + "," + chrt.margin.top + ")" 43 | } 44 | 45 | build.draw = -> 46 | scaleX = d3.scale.linear! 47 | .domain [0, d3.max chrt.data, -> it.value ] 48 | .range [0, chrt.w] 49 | 50 | scaleY = (i)-> 51 | i * (chrt.barHeight + chrt.barMargin) 52 | 53 | chrt.svg 54 | .append "linearGradient" 55 | .attr { 56 | "id": "themeGradient" 57 | "gradientUnits": "userSpaceOnUse" 58 | "x1": 0 59 | "x2": chrt.w 60 | "y1": 0 61 | "y2": 0 62 | } 63 | .selectAll "stop" 64 | .data gradientData 65 | .enter! 66 | .append "stop" 67 | .attr { 68 | "offset": -> it.offset 69 | "stop-color": -> it.color 70 | } 71 | 72 | 73 | bars = chrt.svg 74 | .selectAll ".bars" 75 | .data chrt.data 76 | 77 | bars 78 | .enter! 79 | .append "rect" 80 | .attr { 81 | "width": 0 82 | "class": "bars" 83 | } 84 | 85 | bars 86 | .transition! 87 | .duration chrt.duration 88 | .delay (it, i)-> i * chrt.delay 89 | .attr { 90 | "width": -> it.value |> scaleX 91 | "height": -> chrt.barHeight 92 | "x": 0 93 | "y": (it, i)-> (scaleY i) 94 | } 95 | 96 | if chrt.barStyle is not null then bars.call chrt.barStyle 97 | 98 | chrt.svg 99 | .selectAll ".name" 100 | .data chrt.data 101 | .enter! 102 | .append "text" 103 | .attr { 104 | "x": -30 105 | "y": (it, i)-> (scaleY i) + (chrt.barHeight / 2) + 7 ### font-size 106 | "class": "name" 107 | } 108 | .style { 109 | "text-anchor": "end" 110 | } 111 | .text -> it.key 112 | 113 | 114 | chrt.svg 115 | .selectAll ".number" 116 | .data chrt.data 117 | .enter! 118 | .append "text" 119 | .attr { 120 | "x": 5 121 | "y": (it, i)-> (scaleY i) + (chrt.barHeight / 2) + 7 ### font-size 122 | "class": "number" 123 | } 124 | .style { 125 | "text-anchor": "start" 126 | } 127 | .transition! 128 | .duration chrt.duration 129 | .delay (it, i)-> i * chrt.delay 130 | .attr { 131 | "x": -> (it.value |> scaleX) + 5 132 | } 133 | .tween "text", -> 134 | i = d3.interpolate @textContent, it.value 135 | (n)-> 136 | @textContent = n |> i |> chrt.textFunc 137 | 138 | 139 | 140 | for let it of chrt 141 | build[it] = (v)-> 142 | if arguments.length is 0 143 | return chrt[it] 144 | else 145 | chrt[it] := v 146 | build 147 | 148 | build 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /bar/js/exec.js: -------------------------------------------------------------------------------- 1 | var interData, innerData, margin, colorFunc, colorByName, firstBar, secondBar, thirdBar; 2 | interData = [ 3 | { 4 | "key": "日本", 5 | "value": 26 6 | }, { 7 | "key": "義大利", 8 | "value": 21 9 | }, { 10 | "key": "香港", 11 | "value": 14 12 | }, { 13 | "key": "台灣", 14 | "value": 12 15 | }, { 16 | "key": "星加坡", 17 | "value": 11 18 | }, { 19 | "key": "中國", 20 | "value": 9 21 | }, { 22 | "key": "越南", 23 | "value": 7 24 | } 25 | ]; 26 | innerData = [ 27 | { 28 | "key": '彰化碧峰里', 29 | "value": 43 30 | }, { 31 | "key": '花蓮森榮里', 32 | "value": 41 33 | }, { 34 | "key": '南投光明里', 35 | "value": 41 36 | }, { 37 | "key": '台灣平均', 38 | "value": 12 39 | }, { 40 | "key": '新竹東平里', 41 | "value": 2 42 | }, { 43 | "key": '新竹關新里', 44 | "value": 2 45 | }, { 46 | "key": '新竹大鵬里', 47 | "value": 2 48 | } 49 | ]; 50 | margin = { 51 | top: 10, 52 | left: 120, 53 | right: 50, 54 | bottom: 20 55 | }; 56 | colorFunc = function(it){ 57 | return it.style({ 58 | "fill": 'url(#themeGradient)' 59 | }); 60 | }; 61 | colorByName = function(it){ 62 | return it.style({ 63 | "fill": function(it){ 64 | if (it.key === "台灣平均") { 65 | return "orange"; 66 | } else { 67 | return 'url(#themeGradient)'; 68 | } 69 | } 70 | }); 71 | }; 72 | firstBar = barChart().data(interData).container('#bar').margin(margin).barHeight(25).barStyle(colorFunc); 73 | firstBar(); 74 | firstBar.draw(); 75 | secondBar = barChart().data(innerData).container('#bar2').margin(margin).barHeight(25).barStyle(colorByName); 76 | secondBar(); 77 | secondBar.draw(); 78 | thirdBar = barChart().data(innerData).container('#bar3').margin(margin).textFunc(function(it){ 79 | return it.toFixed(2); 80 | }).barHeight(25).barStyle(colorByName); 81 | thirdBar(); 82 | thirdBar.draw(); -------------------------------------------------------------------------------- /bar/js/exec.ls: -------------------------------------------------------------------------------- 1 | 2 | interData = [ 3 | {"key": "日本", "value": 26} 4 | {"key": "義大利", "value": 21} 5 | {"key": "香港", "value": 14} 6 | {"key": "台灣", "value": 12} 7 | {"key": "星加坡", "value": 11} 8 | {"key": "中國", "value": 9} 9 | {"key": "越南", "value": 7} 10 | ] 11 | 12 | innerData = [ 13 | {"key": '彰化碧峰里', "value": 43} 14 | {"key": '花蓮森榮里', "value": 41} 15 | {"key": '南投光明里', "value": 41} 16 | {"key": '台灣平均', "value": 12} 17 | {"key": '新竹東平里', "value": 2} 18 | {"key": '新竹關新里', "value": 2} 19 | {"key": '新竹大鵬里', "value": 2} 20 | ] 21 | 22 | 23 | margin = {top: 10, left: 120, right: 50, bottom: 20} 24 | 25 | colorFunc = -> 26 | it 27 | .style { 28 | "fill": 'url(#themeGradient)' 29 | } 30 | 31 | colorByName = -> 32 | it 33 | .style { 34 | "fill": -> 35 | if it.key is "台灣平均" then "orange" else 'url(#themeGradient)' 36 | } 37 | 38 | 39 | firstBar = barChart! 40 | .data interData 41 | .container '#bar' 42 | .margin margin 43 | .barHeight 25 44 | .barStyle colorFunc 45 | 46 | 47 | firstBar! 48 | firstBar.draw! 49 | 50 | 51 | 52 | secondBar = barChart! 53 | .data innerData 54 | .container '#bar2' 55 | .margin margin 56 | .barHeight 25 57 | .barStyle colorByName 58 | 59 | secondBar! 60 | secondBar.draw! 61 | 62 | 63 | 64 | thirdBar = barChart! 65 | .data innerData 66 | .container '#bar3' 67 | .margin margin 68 | .textFunc (-> it.toFixed 2) 69 | .barHeight 25 70 | .barStyle colorByName 71 | 72 | thirdBar! 73 | thirdBar.draw! 74 | 75 | 76 | 77 | # .textFunc (-> (it.toFixed 0) + "日") -------------------------------------------------------------------------------- /doc/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sheethub/2016electionchart/a07217fdd8dddd968a4fea90ac9ffe438618cee7/doc/demo.gif -------------------------------------------------------------------------------- /donut/clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Donut Chart 5 | 6 | 7 | 8 | 9 | 18 | 19 |
20 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /donut/clock.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title Donut Chart 5 | meta(http-equiv="Content-Type", content="text/html; charset=UTF-8") 6 | script(type="text/javascript", src="../lib/d3.min.js") 7 | script(type="text/javascript", src="../lib/prelude-browser-min.js") 8 | 9 | style. 10 | .donut { 11 | height: 300px; 12 | width: 300px; 13 | float: left; 14 | } 15 | 16 | 17 | body 18 | 19 | div#donut1.donut 20 | div#donut2.donut 21 | div#donut3.donut 22 | 23 | script(type="text/javascript", src="./js/donut.js") 24 | script(type="text/javascript", src="./js/clock.js") -------------------------------------------------------------------------------- /donut/countdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 投票倒數 5 | 6 | 7 | 8 | 9 | 18 | 19 |
我是投票倒數：
20 |
21 |
22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /donut/countdown.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title 投票倒數 5 | meta(http-equiv="Content-Type", content="text/html; charset=UTF-8") 6 | script(type="text/javascript", src="../lib/d3.min.js") 7 | script(type="text/javascript", src="../lib/prelude-browser-min.js") 8 | 9 | style. 10 | .donut { 11 | height: 300px; 12 | width: 300px; 13 | float: left; 14 | } 15 | 16 | 17 | body 18 | div(style="text-align:left") 19 | 我是投票倒數： 20 | 21 | 22 | div#donut0.donut 23 | div#donut1.donut 24 | div#donut2.donut 25 | div#donut3.donut 26 | 27 | 28 | script(type="text/javascript", src="./js/donut.js") 29 | script(type="text/javascript", src="./js/countdown.js") -------------------------------------------------------------------------------- /donut/gulpfile.ls: -------------------------------------------------------------------------------- 1 | # ulimit -S -n 2048 2 | 3 | require! { 4 | "gulp" 5 | "gulp-livescript" 6 | "gulp-uglify" 7 | "gulp-rename" 8 | "gulp-imagemin" 9 | "imagemin-pngcrush" 10 | "gulp-gm" 11 | "gulp-stylus" 12 | "gulp-jade" 13 | } 14 | 15 | gulp.task "js-min" -> 16 | gulp.src "./js/*.ls" 17 | .pipe gulp-livescript bare: false, prelude: true 18 | .pipe gulp-uglify! 19 | .pipe gulp.dest "./js/" 20 | .pipe gulp-rename extname: ".min.js" 21 | .pipe gulp.dest "./js/" 22 | 23 | gulp.task "reimg" -> 24 | gulp.src "./image/*" 25 | .pipe(gulp-imagemin({ 26 | optimizationLevel: 6 27 | progressive: true 28 | svgoPlugins: [{removeViewBox: false}] 29 | use: [imagemin-pngcrush!] 30 | })) 31 | .pipe gulp.dest "./reimg/" 32 | 33 | gulp.task "smlimg" -> 34 | gulp.src "./reimg/*" 35 | .pipe gulp-gm -> 36 | it.resize 100 37 | .pipe gulp.dest "smlimg" 38 | 39 | 40 | gulp.task "js-dev" -> 41 | gulp.src "./js/*.ls" 42 | .pipe gulp-livescript bare: true, prelude: true 43 | .pipe gulp.dest "./js/" 44 | 45 | gulp.task "css-dev" -> 46 | gulp.src "./css/*.styl" 47 | .pipe gulp-stylus! 48 | .pipe gulp.dest "./css/" 49 | 50 | 51 | gulp.task "jd-dev" -> 52 | gulp.src "*.jade" 53 | .pipe gulp-jade pretty: true 54 | .pipe gulp.dest "." 55 | 56 | gulp.task "watch" -> 57 | gulp.watch "./js/*.ls", ["js-dev"] 58 | gulp.watch "./css/*.styl", ["css-dev"] 59 | gulp.watch "*.jade", ["jd-dev"] 60 | 61 | 62 | 63 | gulp.task "default" ["watch"] -------------------------------------------------------------------------------- /donut/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Donut Chart 5 | 6 | 7 | 8 | 9 | 18 | 19 |
20 |
21 |
資料來源 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /donut/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title Donut Chart 5 | meta(http-equiv="Content-Type", content="text/html; charset=UTF-8") 6 | script(type="text/javascript", src="../lib/d3.min.js") 7 | script(type="text/javascript", src="../lib/prelude-browser-min.js") 8 | 9 | style. 10 | .donut { 11 | height: 300px; 12 | width: 300px; 13 | float: left; 14 | } 15 | 16 | 17 | body 18 | 19 | div#donut1.donut 20 | div#donut2.donut 21 | div#donut3.donut 22 | 23 | span(style="float:right; color:grey;") 24 | 資料來源 25 | 26 | 27 | script(type="text/javascript", src="./js/donut.js") 28 | script(type="text/javascript", src="./js/exec.js") -------------------------------------------------------------------------------- /donut/js/clock.js: -------------------------------------------------------------------------------- 1 | var _, hourDonut, minDonut, secDonut, firstTick, tick; 2 | _ = require("prelude-ls"); 3 | hourDonut = null; 4 | minDonut = null; 5 | secDonut = null; 6 | (firstTick = function(){ 7 | hourDonut = donutChart().data({ 8 | "total": 24, 9 | "value": 0 10 | }).container('#donut1').textFunc(function(it){ 11 | return it.toFixed(0); 12 | }).ease("elastic"); 13 | hourDonut().draw(); 14 | minDonut = donutChart().data({ 15 | "total": 60, 16 | "value": 0 17 | }).container('#donut2').textFunc(function(it){ 18 | return it.toFixed(0); 19 | }).ease("elastic"); 20 | minDonut().draw(); 21 | secDonut = donutChart().data({ 22 | "total": 60, 23 | "value": 0 24 | }).container('#donut3').textFunc(function(it){ 25 | return it.toFixed(0); 26 | }).ease("elastic"); 27 | return secDonut().draw(); 28 | })(); 29 | (tick = function(){ 30 | var d, h, m, s; 31 | d = new Date(); 32 | h = d.getHours(); 33 | m = d.getMinutes(); 34 | s = d.getSeconds(); 35 | hourDonut.update({ 36 | "value": h 37 | }); 38 | minDonut.update({ 39 | "value": m 40 | }); 41 | return secDonut.update({ 42 | "value": s 43 | }); 44 | })(); 45 | setInterval(function(){ 46 | return tick(); 47 | }, 1000); -------------------------------------------------------------------------------- /donut/js/clock.ls: -------------------------------------------------------------------------------- 1 | _ = require "prelude-ls" 2 | 3 | hourDonut = null 4 | minDonut = null 5 | secDonut = null 6 | 7 | 8 | do firstTick = -> 9 | 10 | hourDonut := donutChart! 11 | .data {"total": 24, "value": 0} 12 | .container '#donut1' 13 | .textFunc (-> it.toFixed 0) 14 | .ease "elastic" 15 | hourDonut!.draw! 16 | 17 | minDonut := donutChart! 18 | .data {"total": 60, "value": 0} 19 | .container '#donut2' 20 | .textFunc (-> it.toFixed 0) 21 | .ease "elastic" 22 | minDonut!.draw! 23 | 24 | secDonut := donutChart! 25 | .data {"total": 60, "value": 0} 26 | .container '#donut3' 27 | .textFunc (-> it.toFixed 0) 28 | .ease "elastic" 29 | secDonut!.draw! 30 | 31 | 32 | do tick = -> 33 | d = new Date! 34 | h = d.getHours! 35 | m = d.getMinutes! 36 | s = d.getSeconds! 37 | 38 | hourDonut.update {"value": h} 39 | minDonut.update {"value": m} 40 | secDonut.update {"value": s} 41 | 42 | 43 | setInterval (-> tick! ), 1000 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /donut/js/countdown.js: -------------------------------------------------------------------------------- 1 | var _, dayDonut, hourDonut, minDonut, secDonut, smallText, firstTick, tick; 2 | _ = require("prelude-ls"); 3 | dayDonut = null; 4 | hourDonut = null; 5 | minDonut = null; 6 | secDonut = null; 7 | smallText = function(it){ 8 | return it.style({ 9 | "font-size": "35px" 10 | }); 11 | }; 12 | (firstTick = function(){ 13 | dayDonut = donutChart().data({ 14 | "total": 100, 15 | "value": 0 16 | }).container('#donut0').textFunc(function(it){ 17 | return it.toFixed(0) + "日"; 18 | }).textStyle(smallText).ease("elastic"); 19 | dayDonut().draw(); 20 | hourDonut = donutChart().data({ 21 | "total": 24, 22 | "value": 0 23 | }).container('#donut1').textFunc(function(it){ 24 | return it.toFixed(0) + "時"; 25 | }).textStyle(smallText).ease("elastic"); 26 | hourDonut().draw(); 27 | minDonut = donutChart().data({ 28 | "total": 60, 29 | "value": 0 30 | }).container('#donut2').textFunc(function(it){ 31 | return it.toFixed(0) + "分"; 32 | }).textStyle(smallText).ease("elastic"); 33 | minDonut().draw(); 34 | secDonut = donutChart().data({ 35 | "total": 60, 36 | "value": 0 37 | }).container('#donut3').textFunc(function(it){ 38 | return function(it){ 39 | return it.toFixed(0) + "秒"; 40 | }( 41 | Math.abs( 42 | it)); 43 | }).textStyle(smallText).ease("elastic"); 44 | return secDonut().draw(); 45 | })(); 46 | (tick = function(){ 47 | var t, now, diff, days, hour, min, sec; 48 | t = new Date("2016/01/16"); 49 | now = new Date(); 50 | diff = t - now; 51 | days = ~~(diff / (24 * 60 * 60 * 1000)); 52 | hour = ~~(diff % (24 * 60 * 60 * 1000) / 3600000); 53 | min = ~~(diff % (24 * 60 * 60 * 1000) % 3600000 / 60000); 54 | sec = ~~(diff % (24 * 60 * 60 * 1000) % 3600000 % 60000 / 1000); 55 | dayDonut.update({ 56 | "value": days 57 | }); 58 | hourDonut.update({ 59 | "value": hour 60 | }); 61 | minDonut.update({ 62 | "value": min 63 | }); 64 | return secDonut.update({ 65 | "value": sec 66 | }); 67 | })(); 68 | setInterval(function(){ 69 | return tick(); 70 | }, 1000); -------------------------------------------------------------------------------- /donut/js/countdown.ls: -------------------------------------------------------------------------------- 1 | _ = require "prelude-ls" 2 | 3 | dayDonut = null 4 | hourDonut = null 5 | minDonut = null 6 | secDonut = null 7 | 8 | smallText = -> 9 | it 10 | .style { 11 | "font-size": "35px" 12 | } 13 | 14 | do firstTick = -> 15 | dayDonut := donutChart! 16 | .data {"total": 100, "value": 0} 17 | .container '#donut0' 18 | .textFunc (-> (it.toFixed 0) + "日") 19 | .textStyle smallText 20 | .ease "elastic" 21 | dayDonut!.draw! 22 | 23 | hourDonut := donutChart! 24 | .data {"total": 24, "value": 0} 25 | .container '#donut1' 26 | .textFunc (-> (it.toFixed 0) + "時") 27 | .textStyle smallText 28 | .ease "elastic" 29 | hourDonut!.draw! 30 | 31 | minDonut := donutChart! 32 | .data {"total": 60, "value": 0} 33 | .container '#donut2' 34 | .textFunc (-> (it.toFixed 0)+ "分") 35 | .textStyle smallText 36 | .ease "elastic" 37 | minDonut!.draw! 38 | 39 | 40 | secDonut := donutChart! 41 | .data {"total": 60, "value": 0} 42 | .container '#donut3' 43 | .textFunc (-> it |> Math.abs |> (-> (it.toFixed 0) + "秒")) 44 | .textStyle smallText 45 | .ease "elastic" 46 | secDonut!.draw! 47 | 48 | 49 | do tick = -> 50 | t = new Date("2016/01/16") 51 | now = new Date! 52 | diff = (t - now) 53 | 54 | days = ~~(diff / (24 * 60 * 60 * 1000) ) 55 | hour = ~~(diff % (24 * 60 * 60 * 1000) / 3600000) 56 | min = ~~(diff % (24 * 60 * 60 * 1000) % 3600000 / 60000) 57 | sec = ~~(diff % (24 * 60 * 60 * 1000) % 3600000 % 60000 / 1000) 58 | 59 | # days |> console.log 60 | # hour |> console.log 61 | # min |> console.log 62 | # sec |> console.log 63 | 64 | 65 | 66 | dayDonut.update {"value": days} 67 | hourDonut.update {"value": hour} 68 | minDonut.update {"value": min} 69 | secDonut.update {"value": sec} 70 | 71 | 72 | setInterval (-> tick! ), 1000 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /donut/js/donut.js: -------------------------------------------------------------------------------- 1 | var _, donutChart; 2 | _ = require("prelude-ls"); 3 | donutChart = function(){ 4 | var chrt, svg, tau, foreground, number, scale, arcTween, textTween, arc, build, i$; 5 | chrt = {}; 6 | chrt.container = null; 7 | chrt.data = null; 8 | chrt.margin = { 9 | top: 100, 10 | left: 50, 11 | right: 50, 12 | bottom: 50 13 | }; 14 | chrt.w = 500 - chrt.margin.left - chrt.margin.right; 15 | chrt.h = 500 - chrt.margin.top - chrt.margin.bottom; 16 | chrt.outerRadius = chrt.h / 2; 17 | chrt.innerRadius = chrt.outerRadius - 20; 18 | chrt.cornerRadius = 10; 19 | chrt.startAngle = 0; 20 | chrt.duration = 1500; 21 | chrt.notes = ""; 22 | chrt.textFunc = function(it){ 23 | return it; 24 | }; 25 | chrt.ease = "linear"; 26 | chrt.svg = null; 27 | chrt.textStyle = function(){}; 28 | svg = null; 29 | tau = 2 * Math.PI; 30 | foreground = undefined; 31 | number = undefined; 32 | scale = undefined; 33 | arcTween = undefined; 34 | textTween = undefined; 35 | arc = undefined; 36 | chrt.backgroundStyle = function(it){ 37 | return it.style({ 38 | "fill": "rgb(232, 233, 121)" 39 | }); 40 | }; 41 | chrt.foregroundStyle = function(it){ 42 | return it.style({ 43 | "fill": "rgb(84, 179, 108)" 44 | }); 45 | }; 46 | build = function(){ 47 | if (chrt.data === null || chrt.container === null) { 48 | return; 49 | } 50 | if (chrt.svg === null) { 51 | chrt.svg = d3.select(chrt.container).insert("svg", ".notes").attr({ 52 | "viewBox": "0 0 " + (chrt.w + chrt.margin.left + chrt.margin.right) + " " + (chrt.h + chrt.margin.top + chrt.margin.bottom), 53 | "width": "100%", 54 | "height": "100%", 55 | "preserveAspectRatio": "xMinYMin meet" 56 | }).append("g").attr({ 57 | "transform": "translate(" + (chrt.w / 2 + chrt.margin.left) + "," + (chrt.h / 2 + chrt.margin.top) + ")" 58 | }).append("g"); 59 | scale = d3.scale.linear().domain([0, chrt.data.total]).range([0, tau]); 60 | arc = d3.svg.arc().innerRadius(chrt.innerRadius).outerRadius(chrt.outerRadius).cornerRadius(chrt.cornerRadius).startAngle(chrt.startAngle); 61 | arcTween = function(transition, newAngle){ 62 | return transition.attrTween("d", function(it){ 63 | var interpolate; 64 | interpolate = d3.interpolate(it.endAngle, newAngle); 65 | return function(t){ 66 | it.endAngle = interpolate(t); 67 | return arc(it); 68 | }; 69 | }); 70 | }; 71 | textTween = function(transition, newValue){ 72 | return transition.tween("text", function(){ 73 | var interpolate; 74 | interpolate = d3.interpolate(parseFloat( 75 | this.textContent), newValue); 76 | return function(t){ 77 | return this.textContent = function(it){ 78 | if (chrt.textFunc) { 79 | return chrt.textFunc( 80 | it); 81 | } else { 82 | return it; 83 | } 84 | }( 85 | interpolate( 86 | t)); 87 | }; 88 | }); 89 | }; 90 | return build; 91 | } 92 | }; 93 | build.draw = function(){ 94 | chrt.svg.append("path").datum({ 95 | endAngle: tau 96 | }).attr({ 97 | "d": arc 98 | }).call(chrt.backgroundStyle); 99 | chrt.svg.append("text").style({ 100 | "text-anchor": "middle", 101 | "font-size": "25px" 102 | }).attr({ 103 | "transform": "translate(0," + -(chrt.h / 2 + 30) + ")" 104 | }).text(chrt.data.notes); 105 | foreground = chrt.svg.append("path").datum({ 106 | endAngle: 0.01 107 | }).attr({ 108 | "d": arc 109 | }).call(chrt.foregroundStyle); 110 | number = chrt.svg.append("text").text(function(){ 111 | if (chrt.textFunc) { 112 | return chrt.textFunc(0); 113 | } else { 114 | return 0; 115 | } 116 | }).attr({ 117 | "class": "numbers", 118 | "font-size": "50px", 119 | "text-anchor": "middle", 120 | "transform": "translate(10,25)" 121 | }).call(chrt.textStyle); 122 | this.update(); 123 | return build; 124 | }; 125 | build.update = function(data){ 126 | if (data === undefined) { 127 | data = chrt.data; 128 | } 129 | foreground.transition().duration(chrt.duration).ease(chrt.ease).call(arcTween, scale( 130 | data.value)); 131 | number.transition().duration(chrt.duration).ease(chrt.ease).call(textTween, data.value); 132 | return build; 133 | }; 134 | for (i$ in chrt) { 135 | (fn$.call(this, i$)); 136 | } 137 | return build; 138 | function fn$(it){ 139 | build[it] = function(v){ 140 | if (arguments.length === 0) { 141 | return chrt[it]; 142 | } else { 143 | chrt[it] = v; 144 | return build; 145 | } 146 | }; 147 | } 148 | }; -------------------------------------------------------------------------------- /donut/js/donut.ls: -------------------------------------------------------------------------------- 1 | _ = require "prelude-ls" 2 | 3 | donutChart = -> 4 | 5 | chrt = {} 6 | 7 | chrt.container = null 8 | chrt.data = null 9 | 10 | chrt.margin = {top: 100, left: 50, right: 50, bottom: 50} 11 | chrt.w = 500 - chrt.margin.left - chrt.margin.right 12 | chrt.h = 500 - chrt.margin.top - chrt.margin.bottom ### will growth according to data & barHeighteight 13 | 14 | chrt.outerRadius = (chrt.h / 2) 15 | chrt.innerRadius = chrt.outerRadius - 20 16 | 17 | chrt.cornerRadius = 10 18 | chrt.startAngle = 0 19 | 20 | chrt.duration = 1500 21 | 22 | chrt.notes = "" 23 | chrt.textFunc = (-> it) 24 | chrt.ease = "linear" 25 | chrt.svg = null 26 | chrt.textStyle = (-> ) 27 | 28 | 29 | svg = null 30 | tau = 2 * Math.PI 31 | 32 | foreground = undefined 33 | number = undefined 34 | scale = undefined 35 | arcTween = undefined 36 | textTween = undefined 37 | arc = undefined 38 | 39 | 40 | chrt.backgroundStyle = -> 41 | it 42 | .style { 43 | "fill": "rgb(232, 233, 121)" 44 | } 45 | 46 | chrt.foregroundStyle = -> 47 | it 48 | .style { 49 | "fill": "rgb(84, 179, 108)" 50 | } 51 | 52 | build = -> 53 | if chrt.data is null or chrt.container is null then return 54 | if chrt.svg is null 55 | chrt.svg := d3.select chrt.container 56 | .insert "svg", ".notes" 57 | .attr { 58 | "viewBox": "0 0 " + (chrt.w + chrt.margin.left + chrt.margin.right) + " " + (chrt.h + chrt.margin.top + chrt.margin.bottom) 59 | "width": "100%" 60 | "height": "100%" 61 | "preserveAspectRatio": "xMinYMin meet" 62 | } 63 | .append "g" 64 | .attr { 65 | "transform": "translate(" + ((chrt.w / 2) + chrt.margin.left) + "," + ((chrt.h / 2) + chrt.margin.top) + ")" 66 | } 67 | .append "g" 68 | 69 | scale := d3.scale.linear! 70 | .domain [0, chrt.data.total] 71 | .range [0, tau] ### arc doesn't seem to work with 0 72 | 73 | arc := d3.svg.arc! 74 | .innerRadius chrt.innerRadius 75 | .outerRadius chrt.outerRadius 76 | .cornerRadius chrt.cornerRadius 77 | .startAngle chrt.startAngle 78 | 79 | arcTween := (transition, newAngle)-> 80 | transition.attrTween "d", -> 81 | interpolate = d3.interpolate it.endAngle, newAngle 82 | return (t)-> 83 | it.endAngle = interpolate t 84 | return arc it 85 | 86 | textTween := (transition, newValue)-> 87 | transition.tween "text", -> 88 | interpolate = @.textContent |> parseFloat |> d3.interpolate _, newValue 89 | return (t)-> 90 | @.textContent = t |> interpolate |> (-> if chrt.textFunc then it |> chrt.textFunc else it) 91 | 92 | build 93 | 94 | 95 | 96 | build.draw = -> 97 | 98 | chrt.svg 99 | .append "path" 100 | .datum {endAngle: tau} 101 | .attr { 102 | "d": arc 103 | } 104 | .call chrt.backgroundStyle 105 | 106 | chrt.svg 107 | .append "text" 108 | .style { 109 | "text-anchor": "middle" 110 | "font-size": "25px" 111 | } 112 | .attr { 113 | "transform": "translate(0," + -(chrt.h / 2 + 30) + ")" 114 | } 115 | .text chrt.data.notes 116 | 117 | foreground := chrt.svg 118 | .append "path" 119 | .datum {endAngle: 0.01} 120 | .attr { 121 | "d": arc 122 | } 123 | .call chrt.foregroundStyle 124 | 125 | number := chrt.svg 126 | .append "text" 127 | .text (-> if chrt.textFunc then (chrt.textFunc 0) else 0) 128 | .attr { 129 | "class": "numbers" 130 | "font-size": "50px" 131 | "text-anchor": "middle" 132 | "transform": "translate(10,25)" 133 | } 134 | .call chrt.textStyle 135 | 136 | 137 | 138 | @update! 139 | build 140 | 141 | 142 | build.update = (data)-> 143 | if data is undefined then data = chrt.data 144 | 145 | foreground 146 | .transition! 147 | .duration chrt.duration 148 | .ease chrt.ease 149 | .call arcTween, (data.value |> scale) 150 | 151 | number 152 | .transition! 153 | .duration chrt.duration 154 | .ease chrt.ease 155 | .call textTween, data.value 156 | build 157 | 158 | 159 | 160 | 161 | for let it of chrt 162 | build[it] = (v)-> 163 | if arguments.length is 0 164 | return chrt[it] 165 | else 166 | chrt[it] := v 167 | build 168 | 169 | build 170 | 171 | 172 | -------------------------------------------------------------------------------- /donut/js/exec.js: -------------------------------------------------------------------------------- 1 | var emptyHouses, firstDonut, lowUilization, firstDonut2, selfOwned, firstDonut3; 2 | emptyHouses = { 3 | "value": 0.2, 4 | "total": 1, 5 | "notes": "我是一個甜甜圈！" 6 | }; 7 | firstDonut = donutChart().data(emptyHouses).container('#donut1').textFunc(function(it){ 8 | return (it * 100).toFixed(0) + "%"; 9 | }); 10 | firstDonut(); 11 | firstDonut.draw(); 12 | lowUilization = { 13 | "value": 0.105, 14 | "total": 1, 15 | "notes": "我是另一個甜甜圈！" 16 | }; 17 | firstDonut2 = donutChart().data(lowUilization).container('#donut2').textFunc(function(it){ 18 | return (it * 100).toFixed(0) + "%"; 19 | }); 20 | firstDonut2(); 21 | firstDonut2.draw(); 22 | selfOwned = { 23 | "value": 0.88, 24 | "total": 1, 25 | "notes": "我是第三個甜甜圈" 26 | }; 27 | firstDonut3 = donutChart().data(selfOwned).container('#donut3').textFunc(function(it){ 28 | return (it * 100).toFixed(0) + "%"; 29 | }); 30 | firstDonut3(); 31 | firstDonut3.draw(); -------------------------------------------------------------------------------- /donut/js/exec.ls: -------------------------------------------------------------------------------- 1 | 2 | emptyHouses = { 3 | "value": 0.2 4 | "total": 1 5 | "notes": "我是一個甜甜圈！" 6 | } 7 | 8 | firstDonut = donutChart! 9 | .data emptyHouses 10 | .container '#donut1' 11 | .textFunc (-> ((it * 100).toFixed 0) + "%" ) 12 | firstDonut! 13 | firstDonut.draw! 14 | 15 | 16 | lowUilization = { 17 | "value": 0.105 18 | "total": 1 19 | "notes": "我是另一個甜甜圈！" 20 | } 21 | 22 | firstDonut2 = donutChart! 23 | .data lowUilization 24 | .container '#donut2' 25 | .textFunc (-> ((it * 100).toFixed 0) + "%" ) 26 | firstDonut2! 27 | firstDonut2.draw! 28 | 29 | selfOwned = { 30 | "value": 0.88 31 | "total": 1 32 | "notes": "我是第三個甜甜圈" 33 | } 34 | 35 | firstDonut3 = donutChart! 36 | .data selfOwned 37 | .container '#donut3' 38 | .textFunc (-> ((it * 100).toFixed 0) + "%" ) 39 | firstDonut3! 40 | firstDonut3.draw! 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /lib/colorbrewer.v1.min.js: -------------------------------------------------------------------------------- 1 | var colorbrewer={YlGn:{3:["#f7fcb9","#addd8e","#31a354"],4:["#ffffcc","#c2e699","#78c679","#238443"],5:["#ffffcc","#c2e699","#78c679","#31a354","#006837"],6:["#ffffcc","#d9f0a3","#addd8e","#78c679","#31a354","#006837"],7:["#ffffcc","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],8:["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],9:["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"]},YlGnBu:{3:["#edf8b1","#7fcdbb","#2c7fb8"],4:["#ffffcc","#a1dab4","#41b6c4","#225ea8"],5:["#ffffcc","#a1dab4","#41b6c4","#2c7fb8","#253494"],6:["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"],7:["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],8:["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],9:["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]},GnBu:{3:["#e0f3db","#a8ddb5","#43a2ca"],4:["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"],5:["#f0f9e8","#bae4bc","#7bccc4","#43a2ca","#0868ac"],6:["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#43a2ca","#0868ac"],7:["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],8:["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],9:["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"]},BuGn:{3:["#e5f5f9","#99d8c9","#2ca25f"],4:["#edf8fb","#b2e2e2","#66c2a4","#238b45"],5:["#edf8fb","#b2e2e2","#66c2a4","#2ca25f","#006d2c"],6:["#edf8fb","#ccece6","#99d8c9","#66c2a4","#2ca25f","#006d2c"],7:["#edf8fb","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],8:["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],9:["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"]},PuBuGn:{3:["#ece2f0","#a6bddb","#1c9099"],4:["#f6eff7","#bdc9e1","#67a9cf","#02818a"],5:["#f6eff7","#bdc9e1","#67a9cf","#1c9099","#016c59"],6:["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#1c9099","#016c59"],7:["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],8:["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],9:["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"]},PuBu:{3:["#ece7f2","#a6bddb","#2b8cbe"],4:["#f1eef6","#bdc9e1","#74a9cf","#0570b0"],5:["#f1eef6","#bdc9e1","#74a9cf","#2b8cbe","#045a8d"],6:["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#2b8cbe","#045a8d"],7:["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],8:["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],9:["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"]},BuPu:{3:["#e0ecf4","#9ebcda","#8856a7"],4:["#edf8fb","#b3cde3","#8c96c6","#88419d"],5:["#edf8fb","#b3cde3","#8c96c6","#8856a7","#810f7c"],6:["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8856a7","#810f7c"],7:["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],8:["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],9:["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"]},RdPu:{3:["#fde0dd","#fa9fb5","#c51b8a"],4:["#feebe2","#fbb4b9","#f768a1","#ae017e"],5:["#feebe2","#fbb4b9","#f768a1","#c51b8a","#7a0177"],6:["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#c51b8a","#7a0177"],7:["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],8:["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],9:["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]},PuRd:{3:["#e7e1ef","#c994c7","#dd1c77"],4:["#f1eef6","#d7b5d8","#df65b0","#ce1256"],5:["#f1eef6","#d7b5d8","#df65b0","#dd1c77","#980043"],6:["#f1eef6","#d4b9da","#c994c7","#df65b0","#dd1c77","#980043"],7:["#f1eef6","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],8:["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],9:["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"]},OrRd:{3:["#fee8c8","#fdbb84","#e34a33"],4:["#fef0d9","#fdcc8a","#fc8d59","#d7301f"],5:["#fef0d9","#fdcc8a","#fc8d59","#e34a33","#b30000"],6:["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#e34a33","#b30000"],7:["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],8:["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],9:["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]},YlOrRd:{3:["#ffeda0","#feb24c","#f03b20"],4:["#ffffb2","#fecc5c","#fd8d3c","#e31a1c"],5:["#ffffb2","#fecc5c","#fd8d3c","#f03b20","#bd0026"],6:["#ffffb2","#fed976","#feb24c","#fd8d3c","#f03b20","#bd0026"],7:["#ffffb2","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],8:["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],9:["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"]},YlOrBr:{3:["#fff7bc","#fec44f","#d95f0e"],4:["#ffffd4","#fed98e","#fe9929","#cc4c02"],5:["#ffffd4","#fed98e","#fe9929","#d95f0e","#993404"],6:["#ffffd4","#fee391","#fec44f","#fe9929","#d95f0e","#993404"],7:["#ffffd4","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],8:["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],9:["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"]},Purples:{3:["#efedf5","#bcbddc","#756bb1"],4:["#f2f0f7","#cbc9e2","#9e9ac8","#6a51a3"],5:["#f2f0f7","#cbc9e2","#9e9ac8","#756bb1","#54278f"],6:["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#756bb1","#54278f"],7:["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],8:["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],9:["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"]},Blues:{3:["#deebf7","#9ecae1","#3182bd"],4:["#eff3ff","#bdd7e7","#6baed6","#2171b5"],5:["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"],6:["#eff3ff","#c6dbef","#9ecae1","#6baed6","#3182bd","#08519c"],7:["#eff3ff","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],8:["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],9:["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]},Greens:{3:["#e5f5e0","#a1d99b","#31a354"],4:["#edf8e9","#bae4b3","#74c476","#238b45"],5:["#edf8e9","#bae4b3","#74c476","#31a354","#006d2c"],6:["#edf8e9","#c7e9c0","#a1d99b","#74c476","#31a354","#006d2c"],7:["#edf8e9","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],8:["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],9:["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"]},Oranges:{3:["#fee6ce","#fdae6b","#e6550d"],4:["#feedde","#fdbe85","#fd8d3c","#d94701"],5:["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"],6:["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#e6550d","#a63603"],7:["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],8:["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],9:["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"]},Reds:{3:["#fee0d2","#fc9272","#de2d26"],4:["#fee5d9","#fcae91","#fb6a4a","#cb181d"],5:["#fee5d9","#fcae91","#fb6a4a","#de2d26","#a50f15"],6:["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#de2d26","#a50f15"],7:["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],8:["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],9:["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]},Greys:{3:["#f0f0f0","#bdbdbd","#636363"],4:["#f7f7f7","#cccccc","#969696","#525252"],5:["#f7f7f7","#cccccc","#969696","#636363","#252525"],6:["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#636363","#252525"],7:["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],8:["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],9:["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"]},PuOr:{3:["#f1a340","#f7f7f7","#998ec3"],4:["#e66101","#fdb863","#b2abd2","#5e3c99"],5:["#e66101","#fdb863","#f7f7f7","#b2abd2","#5e3c99"],6:["#b35806","#f1a340","#fee0b6","#d8daeb","#998ec3","#542788"],7:["#b35806","#f1a340","#fee0b6","#f7f7f7","#d8daeb","#998ec3","#542788"],8:["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"],9:["#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788"],10:["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],11:["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"]},BrBG:{3:["#d8b365","#f5f5f5","#5ab4ac"],4:["#a6611a","#dfc27d","#80cdc1","#018571"],5:["#a6611a","#dfc27d","#f5f5f5","#80cdc1","#018571"],6:["#8c510a","#d8b365","#f6e8c3","#c7eae5","#5ab4ac","#01665e"],7:["#8c510a","#d8b365","#f6e8c3","#f5f5f5","#c7eae5","#5ab4ac","#01665e"],8:["#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e"],9:["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"],10:["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],11:["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"]},PRGn:{3:["#af8dc3","#f7f7f7","#7fbf7b"],4:["#7b3294","#c2a5cf","#a6dba0","#008837"],5:["#7b3294","#c2a5cf","#f7f7f7","#a6dba0","#008837"],6:["#762a83","#af8dc3","#e7d4e8","#d9f0d3","#7fbf7b","#1b7837"],7:["#762a83","#af8dc3","#e7d4e8","#f7f7f7","#d9f0d3","#7fbf7b","#1b7837"],8:["#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837"],9:["#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837"],10:["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],11:["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"]},PiYG:{3:["#e9a3c9","#f7f7f7","#a1d76a"],4:["#d01c8b","#f1b6da","#b8e186","#4dac26"],5:["#d01c8b","#f1b6da","#f7f7f7","#b8e186","#4dac26"],6:["#c51b7d","#e9a3c9","#fde0ef","#e6f5d0","#a1d76a","#4d9221"],7:["#c51b7d","#e9a3c9","#fde0ef","#f7f7f7","#e6f5d0","#a1d76a","#4d9221"],8:["#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221"],9:["#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221"],10:["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],11:["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"]},RdBu:{3:["#ef8a62","#f7f7f7","#67a9cf"],4:["#ca0020","#f4a582","#92c5de","#0571b0"],5:["#ca0020","#f4a582","#f7f7f7","#92c5de","#0571b0"],6:["#b2182b","#ef8a62","#fddbc7","#d1e5f0","#67a9cf","#2166ac"],7:["#b2182b","#ef8a62","#fddbc7","#f7f7f7","#d1e5f0","#67a9cf","#2166ac"],8:["#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac"],9:["#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac"],10:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],11:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"]},RdGy:{3:["#ef8a62","#ffffff","#999999"],4:["#ca0020","#f4a582","#bababa","#404040"],5:["#ca0020","#f4a582","#ffffff","#bababa","#404040"],6:["#b2182b","#ef8a62","#fddbc7","#e0e0e0","#999999","#4d4d4d"],7:["#b2182b","#ef8a62","#fddbc7","#ffffff","#e0e0e0","#999999","#4d4d4d"],8:["#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d"],9:["#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d"],10:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],11:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"]},RdYlBu:{3:["#fc8d59","#ffffbf","#91bfdb"],4:["#d7191c","#fdae61","#abd9e9","#2c7bb6"],5:["#d7191c","#fdae61","#ffffbf","#abd9e9","#2c7bb6"],6:["#d73027","#fc8d59","#fee090","#e0f3f8","#91bfdb","#4575b4"],7:["#d73027","#fc8d59","#fee090","#ffffbf","#e0f3f8","#91bfdb","#4575b4"],8:["#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4"],9:["#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4"],10:["#a50026","#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],11:["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"]},Spectral:{3:["#fc8d59","#ffffbf","#99d594"],4:["#d7191c","#fdae61","#abdda4","#2b83ba"],5:["#d7191c","#fdae61","#ffffbf","#abdda4","#2b83ba"],6:["#d53e4f","#fc8d59","#fee08b","#e6f598","#99d594","#3288bd"],7:["#d53e4f","#fc8d59","#fee08b","#ffffbf","#e6f598","#99d594","#3288bd"],8:["#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd"],9:["#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd"],10:["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],11:["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"]},RdYlGn:{3:["#fc8d59","#ffffbf","#91cf60"],4:["#d7191c","#fdae61","#a6d96a","#1a9641"],5:["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"],6:["#d73027","#fc8d59","#fee08b","#d9ef8b","#91cf60","#1a9850"],7:["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"],8:["#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850"],9:["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"],10:["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],11:["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]},Accent:{3:["#7fc97f","#beaed4","#fdc086"],4:["#7fc97f","#beaed4","#fdc086","#ffff99"],5:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0"],6:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f"],7:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17"],8:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"]},Dark2:{3:["#1b9e77","#d95f02","#7570b3"],4:["#1b9e77","#d95f02","#7570b3","#e7298a"],5:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e"],6:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02"],7:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d"],8:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"]},Paired:{3:["#a6cee3","#1f78b4","#b2df8a"],4:["#a6cee3","#1f78b4","#b2df8a","#33a02c"],5:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99"],6:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c"],7:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f"],8:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00"],9:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6"],10:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a"],11:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99"],12:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]},Pastel1:{3:["#fbb4ae","#b3cde3","#ccebc5"],4:["#fbb4ae","#b3cde3","#ccebc5","#decbe4"],5:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6"],6:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc"],7:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd"],8:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec"],9:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]},Pastel2:{3:["#b3e2cd","#fdcdac","#cbd5e8"],4:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4"],5:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9"],6:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae"],7:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc"],8:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"]},Set1:{3:["#e41a1c","#377eb8","#4daf4a"],4:["#e41a1c","#377eb8","#4daf4a","#984ea3"],5:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00"],6:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33"],7:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628"],8:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf"],9:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"]},Set2:{3:["#66c2a5","#fc8d62","#8da0cb"],4:["#66c2a5","#fc8d62","#8da0cb","#e78ac3"],5:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854"],6:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f"],7:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494"],8:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"]},Set3:{3:["#8dd3c7","#ffffb3","#bebada"],4:["#8dd3c7","#ffffb3","#bebada","#fb8072"],5:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3"],6:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462"],7:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69"],8:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5"],9:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9"],10:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd"],11:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5"],12:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]}}; -------------------------------------------------------------------------------- /lib/prelude-browser-min.js: -------------------------------------------------------------------------------- 1 | // Generated by LiveScript 1.2.0 2 | // prelude.ls 1.1.1 3 | // Copyright (c) George Zahariev 4 | // Released under the MIT License 5 | // https://raw.githubusercontent.com/gkz/prelude-ls/master/LICENSE 6 | require=function n(r,t,e){function i(o,a){if(!t[o]){if(!r[o]){var c=typeof require=="function"&&require;if(!a&&c)return c(o,!0);if(u)return u(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=t[o]={exports:{}};r[o][0].call(f.exports,function(n){var t=r[o][1][n];return i(t?t:n)},f,f.exports,n,r,t,e)}return t[o].exports}var u=typeof require=="function"&&require;for(var o=0;o1?function(){var u=i?i.concat():[];t=r?t||this:this;return u.push.apply(u,arguments)=0;--e){i=t[e];r=n(i,r)}return r});k=xr(function(n,r){return z(n,r[r.length-1],r.slice(0,-1))});w=xr(function(n,r){var t,e,i;t=[];e=r;while((i=n(e))!=null){t.push(i[0]);e=i[1]}return t});W=function(n){return[].concat.apply([],n)};q=xr(function(n,r){var t;return[].concat.apply([],function(){var e,i,u,o=[];for(e=0,u=(i=r).length;er){return 1}else if(nn(t)){return 1}else if(n(r)r){r=u}}return r};G=function(n){var r,t,e,i,u;r=n[0];for(t=0,i=(e=n.slice(1)).length;tn(t)){t=o}}return t});J=xr(function(n,r){var t,e,i,u,o;t=r[0];for(e=0,u=(i=r.slice(1)).length;e1?function(){var u=i?i.concat():[];t=r?t||this:this;return u.push.apply(u,arguments)>>0;while(++tr?n:r});i=S(function(n,r){return n0){return 1}else{return 0}};c=S(function(n,r){return~~(n/r)});f=S(function(n,r){return n%r});l=S(function(n,r){return Math.floor(n/r)});s=S(function(n,r){var t;return(n%(t=r)+t)%t});p=function(n){return 1/n};h=Math.PI;g=h*2;v=Math.exp;m=Math.sqrt;d=Math.log;y=S(function(n,r){return Math.pow(n,r)});j=Math.sin;x=Math.tan;b=Math.cos;M=Math.asin;z=Math.acos;k=Math.atan;w=S(function(n,r){return Math.atan2(n,r)});W=function(n){return~~n};q=Math.round;B=Math.ceil;L=Math.floor;I=function(n){return n!==n};A=function(n){return n%2===0};T=function(n){return n%2!==0};N=S(function(n,r){var t;n=Math.abs(n);r=Math.abs(r);while(r!==0){t=n%r;n=r;r=t}return n});O=S(function(n,r){return Math.abs(Math.floor(n/N(n,r)*r))});r.exports={max:e,min:i,negate:u,abs:o,signum:a,quot:c,rem:f,div:l,mod:s,recip:p,pi:h,tau:g,exp:v,sqrt:m,ln:d,pow:y,sin:j,tan:x,cos:b,acos:z,asin:M,atan:k,atan2:w,truncate:W,round:q,ceiling:B,floor:L,isItNaN:I,even:A,odd:T,gcd:N,lcm:O};function S(n,r){var t,e=function(i){return n.length>1?function(){var u=i?i.concat():[];t=r?t||this:this;return u.push.apply(u,arguments)1?function(){var u=i?i.concat():[];t=r?t||this:this;return u.push.apply(u,arguments)1?t:t.toLowerCase())}).replace(/^([A-Z]+)/,function(n,r){if(r.length>1){return r+"-"}else{return r.toLowerCase()}})};r.exports={split:e,join:i,lines:u,unlines:o,words:a,unwords:c,chars:f,unchars:l,reverse:s,repeat:p,capitalize:h,camelize:g,dasherize:v};function m(n,r){var t,e=function(i){return n.length>1?function(){var u=i?i.concat():[];t=r?t||this:this;return u.push.apply(u,arguments)1?function(){var u=i?i.concat():[];t=r?t||this:this;return u.push.apply(u,arguments) 16 | gulp.src "./js/*.ls" 17 | .pipe gulp-livescript bare: false, prelude: true 18 | .pipe gulp-uglify! 19 | .pipe gulp.dest "./js/" 20 | .pipe gulp-rename extname: ".min.js" 21 | .pipe gulp.dest "./js/" 22 | 23 | gulp.task "reimg" -> 24 | gulp.src "./image/*" 25 | .pipe(gulp-imagemin({ 26 | optimizationLevel: 6 27 | progressive: true 28 | svgoPlugins: [{removeViewBox: false}] 29 | use: [imagemin-pngcrush!] 30 | })) 31 | .pipe gulp.dest "./reimg/" 32 | 33 | gulp.task "smlimg" -> 34 | gulp.src "./reimg/*" 35 | .pipe gulp-gm -> 36 | it.resize 100 37 | .pipe gulp.dest "smlimg" 38 | 39 | 40 | gulp.task "js-dev" -> 41 | gulp.src "./js/*.ls" 42 | .pipe gulp-livescript bare: true, prelude: true 43 | .pipe gulp.dest "./js/" 44 | 45 | gulp.task "css-dev" -> 46 | gulp.src "./css/*.styl" 47 | .pipe gulp-stylus! 48 | .pipe gulp.dest "./css/" 49 | 50 | 51 | gulp.task "jd-dev" -> 52 | gulp.src "*.jade" 53 | .pipe gulp-jade pretty: true 54 | .pipe gulp.dest "." 55 | 56 | gulp.task "watch" -> 57 | gulp.watch "./js/*.ls", ["js-dev"] 58 | gulp.watch "./css/*.styl", ["css-dev"] 59 | gulp.watch "*.jade", ["jd-dev"] 60 | 61 | 62 | 63 | gulp.task "default" ["watch"] -------------------------------------------------------------------------------- /line/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line Chart 5 | 6 | 7 | 8 | 9 | 37 | 38 |
65 歲以上人口總佔比
39 |
平均年齡
40 |
41 | 總人口數 42 | 43 |
資料來源：中華民國人口推計 - 採低推計預估：國家發展委員會 (2014 年)；資料計算表 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /line/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title Line Chart 5 | meta(http-equiv="Content-Type", content="text/html; charset=UTF-8") 6 | script(type="text/javascript", src="../lib/d3.min.js") 7 | script(type="text/javascript", src="../lib/prelude-browser-min.js") 8 | 9 | style. 10 | .line { 11 | height: 400px; 12 | width: 400px; 13 | float: left; 14 | } 15 | 16 | .axis path, 17 | .axis line { 18 | fill: none; 19 | stroke: grey; 20 | stroke-width: 1px; 21 | shape-rendering: crispEdges; 22 | } 23 | 24 | .axis text { 25 | font-size: 14px; 26 | fill: grey; 27 | shape-rendering: crispEdges; 28 | } 29 | 30 | .number { 31 | font-size: 16px; 32 | } 33 | 34 | 35 | 36 | body 37 | div#line1.line(style="text-align:center"). 38 | 65 歲以上人口總佔比 39 | div#line2.line(style="text-align:center"). 40 | 平均年齡 41 | div#line3.line(style="text-align:center"). 42 | 總人口數 43 | 44 | span(style="float:right; color:grey") 45 | 資料來源：中華民國人口推計 - 採低推計預估：國家發展委員會 (2014 年)；資料計算表 46 | 47 | 48 | 49 | script(type="text/javascript", src="./js/line.js") 50 | script(type="text/javascript", src="./js/exec.js") -------------------------------------------------------------------------------- /line/js/exec.js: -------------------------------------------------------------------------------- 1 | d3.tsv("./data.tsv", function(err, data){ 2 | var ratio, population, average, thousand, drawRatio, drawAverage, drawPopulation; 3 | ratio = _.map(function(it){ 4 | return { 5 | "key": new Date(+it.year, 0, 1), 6 | "value": +it.ratio 7 | }; 8 | })( 9 | data); 10 | population = _.map(function(it){ 11 | return { 12 | "key": new Date(+it.year, 0, 1), 13 | "value": +it.population 14 | }; 15 | })( 16 | data); 17 | average = _.map(function(it){ 18 | return { 19 | "key": new Date(+it.year, 0, 1), 20 | "value": +it.average 21 | }; 22 | })( 23 | data); 24 | thousand = d3.format("0,000"); 25 | drawRatio = lineChart().data([ratio]).container('#line1').numberFormat(function(it){ 26 | return function(it){ 27 | return it + "%"; 28 | }( 29 | function(it){ 30 | return it.toFixed(0); 31 | }( 32 | it.value * 100)); 33 | }); 34 | drawAverage = lineChart().data([average]).container('#line2').numberFormat(function(it){ 35 | return it.value.toFixed(0) + "歲"; 36 | }); 37 | drawPopulation = lineChart().data([population]).container('#line3').numberFormat(function(it){ 38 | return function(it){ 39 | return it + "萬人"; 40 | }( 41 | thousand( 42 | Math.round( 43 | it.value / 10))); 44 | }); 45 | drawRatio(); 46 | drawAverage(); 47 | drawPopulation(); 48 | drawRatio.draw(); 49 | drawAverage.draw(); 50 | return drawPopulation.draw(); 51 | }); -------------------------------------------------------------------------------- /line/js/exec.ls: -------------------------------------------------------------------------------- 1 | 2 | err, data <- d3.tsv "./data.tsv" 3 | 4 | 5 | ratio = data 6 | |> _.map (-> 7 | { 8 | "key": new Date(+it.year, 0, 1) 9 | "value": +it.ratio 10 | } 11 | ) 12 | 13 | population = data 14 | |> _.map (-> 15 | { 16 | "key": new Date(+it.year, 0, 1) 17 | "value": +it.population 18 | } 19 | ) 20 | 21 | 22 | average = data 23 | |> _.map (-> 24 | { 25 | "key": new Date(+it.year, 0, 1) 26 | "value": +it.average 27 | } 28 | ) 29 | 30 | thousand = d3.format "0,000" 31 | 32 | drawRatio = lineChart! 33 | .data [ratio] 34 | .container '#line1' 35 | .numberFormat -> it.value * 100 |> (-> it.toFixed 0) |> (-> it + "%") 36 | 37 | drawAverage = lineChart! 38 | .data [average] 39 | .container '#line2' 40 | .numberFormat -> (it.value.toFixed 0) + "歲" 41 | 42 | drawPopulation = lineChart! 43 | .data [population] 44 | .container '#line3' 45 | .numberFormat -> (it.value / 10) |> Math.round |> thousand |> (-> it + "萬人") 46 | 47 | 48 | drawRatio! 49 | drawAverage! 50 | drawPopulation! 51 | 52 | drawRatio.draw! 53 | drawAverage.draw! 54 | drawPopulation.draw! -------------------------------------------------------------------------------- /line/js/line.js: -------------------------------------------------------------------------------- 1 | var _, lineChart; 2 | _ = require("prelude-ls"); 3 | lineChart = function(){ 4 | var chrt, svg, build, i$; 5 | chrt = {}; 6 | chrt.container = null; 7 | chrt.data = null; 8 | chrt.margin = { 9 | top: 80, 10 | left: 80, 11 | right: 80, 12 | bottom: 80 13 | }; 14 | chrt.w = 480 - chrt.margin.left - chrt.margin.right; 15 | chrt.h = 480 - chrt.margin.top - chrt.margin.bottom; 16 | chrt.duration = 500; 17 | chrt.delay = 2000; 18 | chrt.numberFormat = null; 19 | chrt.color = '#41afa5'; 20 | chrt.strokeWidth = "3px"; 21 | chrt.xGridNumber = 5; 22 | chrt.tickValues = null; 23 | chrt.scaleX = null; 24 | chrt.tickFormat = d3.time.format("%Y"); 25 | svg = null; 26 | build = function(){ 27 | if (chrt.data === null || chrt.container === null) { 28 | return; 29 | } 30 | return svg = d3.select(chrt.container).insert("svg", "span").attr({ 31 | "viewBox": "0 0 " + (chrt.w + chrt.margin.left + chrt.margin.right) + " " + (chrt.h + chrt.margin.top + chrt.margin.bottom), 32 | "width": "100%", 33 | "height": "100%", 34 | "preserveAspectRatio": "xMinYMin meet" 35 | }).append("g").attr({ 36 | "transform": "translate(" + chrt.margin.left + "," + chrt.margin.top + ")" 37 | }); 38 | }; 39 | build.draw = function(){ 40 | var extent, max, scaleX, scaleY, path, line, track, circle, translateAlong, xAxis; 41 | extent = function(it){ 42 | return d3.extent(it); 43 | }( 44 | _.flatten( 45 | _.map(function(row){ 46 | return d3.extent(row, function(it){ 47 | return it.key; 48 | }); 49 | })( 50 | chrt.data))); 51 | max = function(it){ 52 | return d3.max(it); 53 | }( 54 | _.flatten( 55 | _.map(function(row){ 56 | return d3.max(row, function(it){ 57 | return it.value; 58 | }); 59 | })( 60 | chrt.data))); 61 | if (chrt.scaleX === null) { 62 | scaleX = d3.time.scale().domain(extent).range([0, chrt.w]); 63 | } else { 64 | scaleX = chrt.scaleX; 65 | } 66 | scaleY = d3.scale.linear().domain([0, max]).range([chrt.h, 0]); 67 | svg.selectAll(".gridX").data((function(){ 68 | var i$, step$, to$, results$ = []; 69 | for (i$ = 0, to$ = chrt.w, step$ = chrt.w / chrt.xGridNumber; step$ < 0 ? i$ >= to$ : i$ <= to$; i$ += step$) { 70 | results$.push(i$); 71 | } 72 | return results$; 73 | }())).enter().append("line").attr({ 74 | "x1": function(it){ 75 | return it; 76 | }, 77 | "x2": function(it){ 78 | return it; 79 | }, 80 | "y1": 0, 81 | "y2": chrt.h, 82 | "class": "gridX" 83 | }).style({ 84 | "stroke": '#D8D5D5', 85 | "stroke-width": "1px" 86 | }); 87 | svg.selectAll(".gridY").data((function(){ 88 | var i$, step$, to$, results$ = []; 89 | for (i$ = 0, to$ = chrt.h, step$ = chrt.h / 5; step$ < 0 ? i$ >= to$ : i$ <= to$; i$ += step$) { 90 | results$.push(i$); 91 | } 92 | return results$; 93 | }())).enter().append("line").attr({ 94 | "x1": 0, 95 | "x2": chrt.w, 96 | "y1": function(it){ 97 | return it; 98 | }, 99 | "y2": function(it){ 100 | return it; 101 | }, 102 | "class": "gridY" 103 | }).style({ 104 | "stroke": '#D8D5D5', 105 | "stroke-width": "1px" 106 | }); 107 | path = d3.svg.line().x(function(it){ 108 | return scaleX( 109 | it.key); 110 | }).y(function(it){ 111 | return scaleY( 112 | it.value); 113 | }).interpolate("monotone"); 114 | line = svg.selectAll(".line").data(chrt.data); 115 | line.enter().append("path").attr({ 116 | "class": "line" 117 | }); 118 | line.attr({ 119 | "d": path 120 | }).style({ 121 | "stroke": chrt.color, 122 | "stroke-width": chrt.strokeWidth, 123 | "fill": "none", 124 | "stroke-dasharray": function(){ 125 | var l; 126 | l = d3.select(this).node().getTotalLength(); 127 | return l + " " + l; 128 | }, 129 | "stroke-dashoffset": function(){ 130 | return d3.select(this).node().getTotalLength(); 131 | } 132 | }).transition().duration(chrt.duration).delay(chrt.delay).ease('linear').style({ 133 | "stroke-dashoffset": 0 134 | }); 135 | track = line.attr({ 136 | "d": path 137 | }).style({ 138 | "fill": "none" 139 | }); 140 | svg.selectAll(".head").data(_.map(function(it){ 141 | return _.head( 142 | it); 143 | })( 144 | chrt.data)).enter().append("circle").attr({ 145 | "cx": function(it){ 146 | return scaleX( 147 | it.key); 148 | }, 149 | "cy": function(it){ 150 | return scaleY( 151 | it.value); 152 | }, 153 | "r": 3, 154 | "class": "head" 155 | }).style({ 156 | "fill": chrt.color, 157 | "stroke": chrt.color, 158 | "stroke-width": chrt.strokeWidth 159 | }); 160 | circle = svg.selectAll(".tail").data(_.map(function(it){ 161 | return _.head( 162 | it); 163 | })( 164 | chrt.data)).enter().append("circle").attr({ 165 | "cx": 0, 166 | "cy": 0, 167 | "r": 3, 168 | "class": "tail" 169 | }).style({ 170 | "fill": chrt.color, 171 | "stroke": chrt.color, 172 | "stroke-width": chrt.strokeWidth, 173 | "opacity": 0 174 | }); 175 | translateAlong = function(path){ 176 | var l; 177 | l = path.getTotalLength(); 178 | return function(d, i, a){ 179 | return function(t){ 180 | var p; 181 | p = path.getPointAtLength(t * l); 182 | return "translate(" + p.x + "," + p.y + ")"; 183 | }; 184 | }; 185 | }; 186 | circle.transition().duration(chrt.duration).delay(chrt.delay).ease('linear').style({ 187 | "opacity": 1 188 | }).attrTween("transform", function(it, i){ 189 | var f; 190 | f = translateAlong( 191 | d3.select(track[0][i]).node()); 192 | return f( 193 | it); 194 | }); 195 | svg.selectAll(".numberGroup").data(_.map(function(it){ 196 | return [_.head(it), _.last(it)]; 197 | })( 198 | chrt.data)).enter().append("g").attr({ 199 | "class": "numberGroup" 200 | }).selectAll("text").data(function(it){ 201 | return it; 202 | }).enter().append("text").text(function(it){ 203 | if (chrt.numberFormat === null) { 204 | return it.value; 205 | } else { 206 | return chrt.numberFormat( 207 | it); 208 | } 209 | }).attr({ 210 | "class": "number", 211 | "x": function(it){ 212 | return scaleX( 213 | it.key); 214 | }, 215 | "y": function(it){ 216 | return scaleY( 217 | it.value) - 20; 218 | } 219 | }).style({ 220 | "text-anchor": "middle", 221 | "opacity": 0 222 | }).transition().duration(0).delay(function(it, i){ 223 | return i * (chrt.duration + chrt.delay); 224 | }).ease('linear').style({ 225 | "opacity": 1 226 | }); 227 | xAxis = d3.svg.axis().scale(scaleX).tickValues(chrt.tickValues ? chrt.tickValues : extent).tickFormat(chrt.tickFormat).orient("bottom"); 228 | return svg.append("g").call(xAxis).attr({ 229 | "transform": "translate(0," + chrt.h + ")", 230 | "class": "axis" 231 | }); 232 | }; 233 | for (i$ in chrt) { 234 | (fn$.call(this, i$)); 235 | } 236 | return build; 237 | function fn$(it){ 238 | build[it] = function(v){ 239 | if (arguments.length === 0) { 240 | return chrt[it]; 241 | } else { 242 | chrt[it] = v; 243 | return build; 244 | } 245 | }; 246 | } 247 | }; -------------------------------------------------------------------------------- /line/js/line.ls: -------------------------------------------------------------------------------- 1 | _ = require "prelude-ls" 2 | 3 | lineChart = -> 4 | 5 | chrt = {} 6 | 7 | chrt.container = null 8 | chrt.data = null 9 | 10 | chrt.margin = {top: 80, left: 80, right: 80, bottom: 80} 11 | chrt.w = 480 - chrt.margin.left - chrt.margin.right 12 | chrt.h = 480 - chrt.margin.top - chrt.margin.bottom 13 | 14 | chrt.duration = 500 15 | chrt.delay = 2000 16 | chrt.numberFormat = null 17 | chrt.color = '#41afa5' 18 | chrt.strokeWidth = "3px" 19 | 20 | chrt.xGridNumber = 5 21 | chrt.tickValues = null 22 | chrt.scaleX = null 23 | chrt.tickFormat = d3.time.format "%Y" 24 | 25 | svg = null 26 | 27 | 28 | 29 | build = -> 30 | if chrt.data is null or chrt.container is null then return 31 | 32 | svg := d3.select chrt.container 33 | .insert "svg", "span" 34 | .attr { 35 | "viewBox": "0 0 " + (chrt.w + chrt.margin.left + chrt.margin.right) + " " + (chrt.h + chrt.margin.top + chrt.margin.bottom) 36 | "width": "100%" 37 | "height": "100%" 38 | "preserveAspectRatio": "xMinYMin meet" 39 | } 40 | .append "g" 41 | .attr { 42 | "transform": "translate(" + chrt.margin.left + "," + chrt.margin.top + ")" 43 | } 44 | 45 | build.draw = -> 46 | 47 | 48 | extent = chrt.data 49 | |> _.map ((row)-> d3.extent row, -> it.key ) 50 | |> _.flatten 51 | |> (-> d3.extent it) 52 | 53 | max = chrt.data 54 | |> _.map ((row)-> d3.max row, -> it.value ) 55 | |> _.flatten 56 | |> (-> d3.max it) 57 | 58 | # scaleX = d3.scale.linear! 59 | # .domain extent 60 | # .range [0, chrt.w] 61 | 62 | # scaleX = d3.time.scale! 63 | # .domain extent 64 | # .range [0, chrt.w] 65 | 66 | if chrt.scaleX is null 67 | scaleX = d3.time.scale! 68 | .domain extent 69 | .range [0, chrt.w] 70 | else 71 | scaleX = chrt.scaleX 72 | 73 | scaleY = d3.scale.linear! 74 | .domain [0, max] 75 | .range [chrt.h, 0] 76 | 77 | 78 | svg 79 | .selectAll ".gridX" 80 | .data [0 to chrt.w by (chrt.w / chrt.xGridNumber)] 81 | .enter! 82 | .append "line" 83 | .attr { 84 | "x1": -> it 85 | "x2": -> it 86 | "y1": 0 87 | "y2": chrt.h 88 | "class": "gridX" 89 | } 90 | .style { 91 | "stroke": '#D8D5D5' 92 | "stroke-width": "1px" 93 | # "shape-rendering": "crispEdges" 94 | } 95 | 96 | 97 | svg 98 | .selectAll ".gridY" 99 | .data [0 to chrt.h by (chrt.h / 5)] 100 | .enter! 101 | .append "line" 102 | .attr { 103 | "x1": 0 104 | "x2": chrt.w 105 | "y1": -> it 106 | "y2": -> it 107 | "class": "gridY" 108 | } 109 | .style { 110 | "stroke": '#D8D5D5' 111 | "stroke-width": "1px" 112 | # "shape-rendering": "crispEdges" 113 | } 114 | 115 | 116 | 117 | 118 | path = d3.svg.line! 119 | .x -> it.key |> scaleX 120 | .y -> it.value |> scaleY 121 | .interpolate "monotone" 122 | 123 | line = svg 124 | .selectAll ".line" 125 | .data chrt.data 126 | 127 | line 128 | .enter! 129 | .append "path" 130 | .attr { 131 | "class": "line" 132 | } 133 | 134 | line 135 | .attr { 136 | "d": path 137 | } 138 | .style { 139 | "stroke": chrt.color 140 | "stroke-width": chrt.strokeWidth 141 | "fill": "none" 142 | "stroke-dasharray": -> 143 | l = (d3.select @ ).node!.getTotalLength! 144 | (l) + " " + (l) ## in case that zooming caused path to be too short 145 | "stroke-dashoffset": -> (d3.select @ ).node!.getTotalLength! 146 | } 147 | .transition! 148 | .duration chrt.duration 149 | .delay chrt.delay 150 | .ease 'linear' 151 | .style { 152 | "stroke-dashoffset": 0 153 | } 154 | 155 | track = line 156 | .attr { 157 | "d": path 158 | } 159 | .style { 160 | "fill": "none" 161 | } 162 | 163 | 164 | 165 | svg 166 | .selectAll ".head" 167 | .data (chrt.data |> _.map (-> it |> _.head)) 168 | .enter! 169 | .append "circle" 170 | .attr { 171 | "cx": -> it.key |> scaleX 172 | "cy": -> it.value |> scaleY 173 | "r": 3 174 | "class": "head" 175 | } 176 | .style { 177 | "fill": chrt.color 178 | "stroke": chrt.color 179 | "stroke-width": chrt.strokeWidth 180 | } 181 | 182 | 183 | circle = svg 184 | .selectAll ".tail" 185 | .data (chrt.data |> _.map (-> it |> _.head)) 186 | .enter! 187 | .append "circle" 188 | .attr { 189 | "cx": 0 190 | "cy": 0 191 | "r": 3 192 | "class": "tail" 193 | # "translate": -> "transform(" + (it.key |> scaleX) + "," + (it.value |> scaleY) + ")" 194 | } 195 | .style { 196 | "fill": chrt.color 197 | "stroke": chrt.color 198 | "stroke-width": chrt.strokeWidth 199 | "opacity": 0 200 | } 201 | 202 | translateAlong = (path)-> 203 | l = path.getTotalLength! 204 | (d, i, a)-> 205 | (t)-> 206 | p = path.getPointAtLength(t * l) 207 | return "translate(" + p.x + "," + p.y + ")" 208 | 209 | 210 | circle 211 | .transition! 212 | .duration chrt.duration 213 | .delay chrt.delay 214 | .ease 'linear' 215 | .style { 216 | "opacity": 1 217 | } 218 | .attrTween "transform", (it, i)-> 219 | f = (d3.select(track[0][i]).node!) |> translateAlong 220 | it |> f 221 | 222 | svg 223 | .selectAll ".numberGroup" 224 | .data (chrt.data |> _.map (-> [(_.head it), (_.last it)])) 225 | .enter! 226 | .append "g" 227 | .attr { 228 | "class": "numberGroup" 229 | } 230 | .selectAll "text" 231 | .data -> it 232 | .enter! 233 | .append "text" 234 | .text -> if chrt.numberFormat is null then it.value else it |> chrt.numberFormat 235 | .attr { 236 | "class": "number" 237 | "x": -> it.key |> scaleX 238 | "y": -> (it.value |> scaleY) - 20 239 | } 240 | .style { 241 | "text-anchor": "middle" 242 | "opacity": 0 243 | } 244 | .transition! 245 | .duration 0 246 | .delay (it, i)-> i * (chrt.duration + chrt.delay) 247 | .ease 'linear' 248 | .style { 249 | "opacity": 1 250 | } 251 | 252 | 253 | xAxis = d3.svg.axis! 254 | .scale scaleX 255 | .tickValues (if chrt.tickValues then chrt.tickValues else extent) 256 | .tickFormat chrt.tickFormat 257 | 258 | .orient "bottom" 259 | 260 | 261 | svg 262 | .append "g" 263 | .call xAxis 264 | .attr { 265 | "transform": "translate(0," + chrt.h + ")" 266 | "class": "axis" 267 | } 268 | 269 | 270 | for let it of chrt 271 | build[it] = (v)-> 272 | if arguments.length is 0 273 | return chrt[it] 274 | else 275 | chrt[it] := v 276 | build 277 | 278 | build 279 | 280 | -------------------------------------------------------------------------------- /line/ratio.tsv: -------------------------------------------------------------------------------- 1 | Year Aruba Andorra Afghanistan Angola Albania Arab World 2 | 2000 6.97 12.149 19.432 5.727 6.465841465 3 | 2001 7.02 11.878 18.77 5.677 6.393112174 4 | 2002 7.08 11.594 18.145 5.663 6.337712891 5 | 2003 7.147 11.302 17.574 5.691 6.290775313 6 | 2004 7.222 3.8 11.003 17.071 5.763 6.232533763 7 | 2005 7.305 3.6 10.696 16.635 5.873 6.172190418 8 | 2006 7.4 3.3 10.386 16.259 6.013 6.101462637 9 | 2007 7.507 2.8 10.075 15.918 6.167 6.032043561 10 | 2008 7.628 2.8 9.771 15.593 6.321 5.975119054 11 | 2009 7.761 3.2 9.475 15.275 6.466 5.907638481 12 | 2010 7.905 2.8 9.193 14.959 6.596 5.845962398 13 | 2011 8.054 8.927 14.642 6.71 5.791453161 14 | 2012 8.207 3.9 8.677 14.329 6.812 5.739888806 15 | 2013 8.361 8.445 14.021 6.905 5.692407166 --------------------------------------------------------------------------------