Visualize data from google calendar through google-calendar-api in Calendar View from https://bl.ocks.org/mbostock/4063318
Last active
December 12, 2017 14:30
Star
You must be signed in to star a gist
Google_Calendar_D3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
date | colorIdNum | |
---|---|---|
2017-01-30 | 1 | |
2017-01-31 | 1 | |
2017-02-01 | 1 | |
2017-02-02 | 1 | |
2017-02-04 | 1 | |
2017-02-05 | 1 | |
2017-02-06 | 1 | |
2017-02-07 | 1 | |
2017-02-09 | 1 | |
2017-02-10 | 2 | |
2017-02-13 | 1 | |
2017-02-14 | 1 | |
2017-02-16 | 1 | |
2017-02-17 | 1 | |
2017-02-19 | 1 | |
2017-02-20 | 1 | |
2017-02-25 | 1 | |
2017-03-01 | 1 | |
2017-03-02 | 1 | |
2017-03-05 | 1 | |
2017-03-07 | 1 | |
2017-03-08 | 1 | |
2017-03-09 | 1 | |
2017-03-12 | 1 | |
2017-03-13 | 1 | |
2017-03-15 | 1 | |
2017-03-17 | 1 | |
2017-03-18 | 1 | |
2017-03-19 | 1 | |
2017-03-20 | 1 | |
2017-03-28 | 1 | |
2017-03-29 | 1 | |
2017-03-30 | 1 | |
2017-04-02 | 1 | |
2017-04-04 | 1 | |
2017-04-07 | 1 | |
2017-04-05 | 1 | |
2017-04-08 | 1 | |
2017-04-11 | 1 | |
2017-04-13 | 1 | |
2017-04-14 | 1 | |
2017-04-15 | 1 | |
2017-04-17 | 1 | |
2017-04-19 | 1 | |
2017-04-22 | 1 | |
2017-04-23 | 1 | |
2017-04-25 | 1 | |
2017-04-26 | 1 | |
2017-04-27 | 1 | |
2017-04-29 | 1 | |
2017-05-02 | 1 | |
2017-05-03 | 1 | |
2017-05-06 | 1 | |
2017-05-07 | 1 | |
2017-05-08 | 1 | |
2017-05-10 | 1 | |
2017-05-11 | 1 | |
2017-05-12 | 1 | |
2017-05-13 | 1 | |
2017-05-14 | 1 | |
2017-05-15 | 1 | |
2017-05-16 | 1 | |
2017-05-17 | 1 | |
2017-05-18 | 1 | |
2017-05-22 | 1 | |
2017-05-23 | 1 | |
2017-05-24 | 1 | |
2017-05-31 | 1 | |
2017-06-01 | 1 | |
2017-06-03 | 1 | |
2017-06-04 | 1 | |
2017-06-05 | 1 | |
2017-06-07 | 1 | |
2017-06-10 | 1 | |
2017-06-11 | 1 | |
2017-06-12 | 1 | |
2017-06-14 | 1 | |
2017-06-16 | 1 | |
2017-06-17 | 1 | |
2017-06-19 | 1 | |
2017-06-20 | 1 | |
2017-06-22 | 1 | |
2017-06-24 | 1 | |
2017-06-25 | 1 | |
2017-06-26 | 1 | |
2017-06-27 | 1 | |
2017-06-28 | 1 | |
2017-06-30 | 1 | |
2017-07-01 | 1 | |
2017-07-02 | 1 | |
2017-07-03 | 1 | |
2017-07-05 | 1 | |
2017-07-06 | 1 | |
2017-07-08 | 1 | |
2017-07-09 | 1 | |
2017-07-10 | 1 | |
2017-07-11 | 1 | |
2017-07-13 | 1 | |
2017-07-14 | 1 | |
2017-07-17 | 1 | |
2017-07-18 | 1 | |
2017-07-19 | 1 | |
2017-07-21 | 1 | |
2017-07-25 | 1 | |
2017-07-27 | 1 | |
2017-08-01 | 1 | |
2017-08-02 | 1 | |
2017-08-03 | 1 | |
2017-08-06 | 1 | |
2017-08-07 | 1 | |
2017-08-08 | 1 | |
2017-08-09 | 1 | |
2017-08-11 | 1 | |
2017-08-12 | 1 | |
2017-08-13 | 1 | |
2017-08-14 | 1 | |
2017-08-15 | 1 | |
2017-08-20 | 1 | |
2017-08-21 | 1 | |
2017-08-22 | 1 | |
2017-08-24 | 1 | |
2017-08-27 | 1 | |
2017-08-28 | 1 | |
2017-08-29 | 1 | |
2017-08-30 | 1 | |
2017-09-01 | 1 | |
2017-09-03 | 1 | |
2017-09-04 | 1 | |
2017-09-05 | 1 | |
2017-09-06 | 1 | |
2017-09-08 | 1 | |
2017-09-10 | 1 | |
2017-09-11 | 1 | |
2017-09-12 | 1 | |
2017-09-13 | 1 | |
2017-09-15 | 1 | |
2017-09-16 | 1 | |
2017-09-17 | 1 | |
2017-09-19 | 1 | |
2017-09-20 | 1 | |
2017-09-22 | 1 | |
2017-09-25 | 1 | |
2017-09-26 | 1 | |
2017-09-27 | 1 | |
2017-09-29 | 1 | |
2017-10-01 | 1 | |
2017-10-02 | 1 | |
2017-10-03 | 1 | |
2017-10-04 | 1 | |
2017-10-06 | 1 | |
2017-10-09 | 1 | |
2017-10-10 | 1 | |
2017-10-11 | 1 | |
2017-10-14 | 1 | |
2017-10-15 | 1 | |
2017-10-16 | 1 | |
2017-10-18 | 1 | |
2017-10-19 | 1 | |
2017-10-20 | 1 | |
2017-10-22 | 1 | |
2017-10-24 | 1 | |
2017-10-25 | 1 | |
2017-10-26 | 1 | |
2017-10-27 | 1 | |
2017-10-29 | 1 | |
2017-10-30 | 1 | |
2017-10-31 | 1 | |
2017-11-02 | 1 | |
2017-11-04 | 1 | |
2017-11-06 | 1 | |
2017-11-07 | 1 | |
2017-11-08 | 1 | |
2017-11-10 | 1 | |
2017-11-12 | 1 | |
2017-11-14 | 1 | |
2017-11-15 | 1 | |
2017-11-16 | 1 | |
2017-11-19 | 1 | |
2017-11-20 | 1 | |
2017-11-21 | 1 | |
2017-11-23 | 1 | |
2017-11-24 | 1 | |
2017-11-27 | 1 | |
2017-11-28 | 1 | |
2017-11-30 | 1 | |
2017-12-01 | 1 | |
2017-12-04 | 1 | |
2017-12-05 | 1 | |
2017-12-07 | 1 | |
2017-12-08 | 1 | |
2017-12-09 | 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
date | colorIdNum | |
---|---|---|
2017-03-04 | 1 | |
2017-03-14 | 1 | |
2017-04-01 | 1 | |
2017-04-05 | 1 | |
2017-04-16 | 1 | |
2017-04-18 | 1 | |
2017-04-20 | 1 | |
2017-04-25 | 2 | |
2017-04-29 | 1 | |
2017-05-05 | 1 | |
2017-05-21 | 1 | |
2017-05-27 | 1 | |
2017-05-31 | 1 | |
2017-06-01 | 1 | |
2017-06-10 | 1 | |
2017-06-17 | 1 | |
2017-06-24 | 1 | |
2017-07-22 | 1 | |
2017-08-12 | 1 | |
2017-08-19 | 1 | |
2017-08-26 | 1 | |
2017-09-20 | 1 | |
2017-09-21 | 1 | |
2017-09-23 | 1 | |
2017-10-08 | 1 | |
2017-10-21 | 1 | |
2017-10-24 | 1 | |
2017-10-28 | 1 | |
2017-11-07 | 1 | |
2017-11-11 | 2 | |
2017-11-13 | 1 | |
2017-11-15 | 1 | |
2017-11-18 | 3 | |
2017-11-17 | 1 | |
2017-11-19 | 1 | |
2017-11-21 | 1 | |
2017-11-23 | 1 | |
2017-11-24 | 1 | |
2017-11-25 | 1 | |
2017-11-27 | 1 | |
2017-11-26 | 1 | |
2017-11-28 | 1 | |
2017-11-29 | 1 | |
2017-11-30 | 1 | |
2017-12-10 | 1 | |
2017-12-11 | 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
date | colorIdNum | |
---|---|---|
2017-10-10 | 1 | |
2017-10-11 | 1 | |
2017-10-12 | 1 | |
2017-10-13 | 1 | |
2017-10-14 | 1 | |
2017-10-15 | 1 | |
2017-10-16 | 1 | |
2017-10-17 | 1 | |
2017-10-18 | 1 | |
2017-10-19 | 1 | |
2017-10-24 | 1 | |
2017-10-25 | 1 | |
2017-10-26 | 1 | |
2017-10-27 | 1 | |
2017-10-30 | 1 | |
2017-10-31 | 1 | |
2017-11-01 | 1 | |
2017-11-08 | 1 | |
2017-11-10 | 1 | |
2017-11-14 | 1 | |
2017-11-30 | 1 | |
2017-12-07 | 1 | |
2017-12-11 | 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
date | colorIdNum | |
---|---|---|
2017-01-28 | 2 | |
2017-01-29 | 3 | |
2017-01-30 | 2 | |
2017-01-31 | 2 | |
2017-02-03 | 1 | |
2017-02-04 | 1 | |
2017-02-12 | 1 | |
2017-02-24 | 2 | |
2017-02-25 | 1 | |
2017-02-26 | 3 | |
2017-02-27 | 1 | |
2017-03-03 | 1 | |
2017-03-05 | 1 | |
2017-03-16 | 1 | |
2017-03-17 | 1 | |
2017-03-18 | 2 | |
2017-03-22 | 1 | |
2017-03-28 | 1 | |
2017-04-02 | 2 | |
2017-04-03 | 1 | |
2017-04-09 | 1 | |
2017-04-21 | 1 | |
2017-04-22 | 1 | |
2017-04-23 | 1 | |
2017-04-24 | 1 | |
2017-04-28 | 1 | |
2017-05-01 | 1 | |
2017-05-05 | 1 | |
2017-05-06 | 1 | |
2017-05-07 | 1 | |
2017-05-09 | 1 | |
2017-05-11 | 1 | |
2017-05-13 | 2 | |
2017-05-20 | 4 | |
2017-05-22 | 1 | |
2017-05-24 | 1 | |
2017-05-27 | 1 | |
2017-06-06 | 1 | |
2017-06-08 | 1 | |
2017-06-09 | 1 | |
2017-06-17 | 1 | |
2017-06-24 | 1 | |
2017-06-29 | 2 | |
2017-07-02 | 1 | |
2017-07-04 | 1 | |
2017-07-08 | 1 | |
2017-07-15 | 1 | |
2017-07-20 | 1 | |
2017-07-21 | 1 | |
2017-07-23 | 1 | |
2017-07-26 | 1 | |
2017-07-28 | 1 | |
2017-07-29 | 2 | |
2017-07-31 | 1 | |
2017-08-04 | 1 | |
2017-08-10 | 1 | |
2017-08-11 | 1 | |
2017-08-16 | 1 | |
2017-08-17 | 1 | |
2017-08-19 | 2 | |
2017-08-26 | 2 | |
2017-09-08 | 1 | |
2017-09-09 | 1 | |
2017-09-15 | 1 | |
2017-10-08 | 1 | |
2017-10-07 | 1 | |
2017-10-09 | 1 | |
2017-10-10 | 1 | |
2017-10-22 | 1 | |
2017-11-05 | 2 | |
2017-11-18 | 3 | |
2017-11-19 | 1 | |
2017-11-22 | 1 | |
2017-12-01 | 1 | |
2017-12-02 | 1 | |
2017-12-03 | 2 | |
2017-12-05 | 1 | |
2017-12-06 | 1 | |
2017-12-09 | 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
date | colorIdNum | |
---|---|---|
2017-06-13 | 1 | |
2017-06-23 | 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
date | colorIdNum | |
---|---|---|
2010-11-20 | 3 | |
2010-11-21 | 2 | |
2010-11-26 | 1 | |
2010-11-29 | 1 | |
2010-11-30 | 1 | |
2010-12-05 | 1 | |
2010-12-07 | 1 | |
2012-06-15 | 1 | |
2014-01-20 | 2 | |
2014-02-01 | 1 | |
2015-10-14 | 1 | |
2015-10-15 | 1 | |
2016-06-04 | 1 | |
2016-07-15 | 1 | |
2016-08-20 | 1 | |
2016-12-03 | 1 | |
2017-01-28 | 1 | |
2017-01-29 | 1 | |
2017-01-30 | 2 | |
2017-01-31 | 1 | |
2017-02-01 | 1 | |
2017-02-02 | 3 | |
2017-02-03 | 1 | |
2017-02-04 | 3 | |
2017-02-05 | 1 | |
2017-02-06 | 1 | |
2017-02-07 | 1 | |
2017-02-08 | 3 | |
2017-02-09 | 1 | |
2017-02-10 | 3 | |
2017-02-11 | 3 | |
2017-02-13 | 2 | |
2017-02-14 | 4 | |
2017-02-15 | 1 | |
2017-02-16 | 2 | |
2017-02-17 | 1 | |
2017-02-18 | 3 | |
2017-02-19 | 3 | |
2017-02-20 | 4 | |
2017-02-21 | 3 | |
2017-02-22 | 4 | |
2017-02-23 | 3 | |
2017-02-24 | 2 | |
2017-02-25 | 1 | |
2017-02-26 | 1 | |
2017-03-01 | 2 | |
2017-03-02 | 3 | |
2017-03-03 | 2 | |
2017-03-04 | 1 | |
2017-03-06 | 3 | |
2017-03-07 | 8 | |
2017-03-08 | 3 | |
2017-03-09 | 3 | |
2017-03-10 | 3 | |
2017-03-11 | 2 | |
2017-03-12 | 3 | |
2017-03-13 | 3 | |
2017-03-14 | 4 | |
2017-03-15 | 4 | |
2017-03-16 | 3 | |
2017-03-17 | 1 | |
2017-03-18 | 2 | |
2017-03-19 | 2 | |
2017-03-20 | 2 | |
2017-03-21 | 1 | |
2017-03-28 | 2 | |
2017-03-29 | 4 | |
2017-03-30 | 2 | |
2017-03-31 | 2 | |
2017-04-01 | 2 | |
2017-04-02 | 1 | |
2017-04-03 | 2 | |
2017-04-04 | 2 | |
2017-04-05 | 3 | |
2017-04-06 | 4 | |
2017-04-07 | 4 | |
2017-04-08 | 2 | |
2017-04-09 | 1 | |
2017-04-10 | 3 | |
2017-04-11 | 3 | |
2017-04-12 | 4 | |
2017-04-13 | 3 | |
2017-04-14 | 2 | |
2017-04-15 | 3 | |
2017-04-16 | 2 | |
2017-04-17 | 2 | |
2017-04-18 | 2 | |
2017-04-19 | 2 | |
2017-04-20 | 3 | |
2017-04-21 | 5 | |
2017-04-22 | 3 | |
2017-04-23 | 2 | |
2017-04-24 | 2 | |
2017-04-25 | 1 | |
2017-04-26 | 4 | |
2017-04-27 | 5 | |
2017-04-28 | 1 | |
2017-04-29 | 1 | |
2017-04-30 | 1 | |
2017-05-01 | 5 | |
2017-05-02 | 7 | |
2017-05-03 | 4 | |
2017-05-04 | 2 | |
2017-05-06 | 1 | |
2017-05-07 | 1 | |
2017-05-08 | 4 | |
2017-05-09 | 3 | |
2017-05-10 | 2 | |
2017-05-11 | 3 | |
2017-05-12 | 4 | |
2017-05-14 | 2 | |
2017-05-15 | 3 | |
2017-05-16 | 2 | |
2017-05-17 | 5 | |
2017-05-18 | 4 | |
2017-05-19 | 5 | |
2017-05-21 | 1 | |
2017-05-22 | 4 | |
2017-05-23 | 3 | |
2017-05-24 | 4 | |
2017-05-25 | 3 | |
2017-05-26 | 3 | |
2017-05-31 | 3 | |
2017-06-01 | 4 | |
2017-06-02 | 3 | |
2017-06-03 | 2 | |
2017-06-04 | 2 | |
2017-06-05 | 4 | |
2017-06-06 | 4 | |
2017-06-07 | 5 | |
2017-06-08 | 3 | |
2017-06-10 | 1 | |
2017-06-11 | 2 | |
2017-06-12 | 4 | |
2017-06-13 | 3 | |
2017-06-14 | 1 | |
2017-06-15 | 5 | |
2017-06-16 | 2 | |
2017-06-18 | 3 | |
2017-06-19 | 3 | |
2017-06-20 | 3 | |
2017-06-21 | 3 | |
2017-06-22 | 2 | |
2017-06-23 | 3 | |
2017-06-24 | 1 | |
2017-06-25 | 2 | |
2017-06-26 | 5 | |
2017-06-27 | 4 | |
2017-06-28 | 4 | |
2017-06-29 | 3 | |
2017-06-30 | 3 | |
2017-07-01 | 3 | |
2017-07-02 | 2 | |
2017-07-03 | 3 | |
2017-07-04 | 1 | |
2017-07-05 | 3 | |
2017-07-06 | 3 | |
2017-07-07 | 5 | |
2017-07-08 | 3 | |
2017-07-09 | 4 | |
2017-07-10 | 4 | |
2017-07-11 | 5 | |
2017-07-12 | 3 | |
2017-07-13 | 6 | |
2017-07-14 | 3 | |
2017-07-15 | 6 | |
2017-07-16 | 1 | |
2017-07-17 | 3 | |
2017-07-18 | 4 | |
2017-07-19 | 3 | |
2017-07-20 | 3 | |
2017-07-21 | 4 | |
2017-07-22 | 1 | |
2017-07-23 | 3 | |
2017-07-24 | 4 | |
2017-07-25 | 3 | |
2017-07-26 | 3 | |
2017-07-27 | 3 | |
2017-07-28 | 2 | |
2017-07-29 | 3 | |
2017-07-30 | 2 | |
2017-07-31 | 3 | |
2017-08-01 | 2 | |
2017-08-02 | 1 | |
2017-08-03 | 3 | |
2017-08-04 | 1 | |
2017-08-05 | 2 | |
2017-08-06 | 2 | |
2017-08-07 | 2 | |
2017-08-08 | 3 | |
2017-08-09 | 4 | |
2017-08-10 | 1 | |
2017-08-12 | 2 | |
2017-08-13 | 1 | |
2017-08-14 | 3 | |
2017-08-15 | 3 | |
2017-08-17 | 1 | |
2017-08-18 | 4 | |
2017-08-20 | 2 | |
2017-08-21 | 7 | |
2017-08-22 | 4 | |
2017-08-23 | 5 | |
2017-08-24 | 2 | |
2017-08-25 | 4 | |
2017-08-26 | 1 | |
2017-08-27 | 1 | |
2017-08-28 | 2 | |
2017-08-29 | 1 | |
2017-08-30 | 3 | |
2017-08-31 | 4 | |
2017-09-01 | 1 | |
2017-09-02 | 3 | |
2017-09-03 | 1 | |
2017-09-04 | 4 | |
2017-09-05 | 5 | |
2017-09-06 | 4 | |
2017-09-07 | 2 | |
2017-09-08 | 1 | |
2017-09-09 | 1 | |
2017-09-10 | 1 | |
2017-09-11 | 2 | |
2017-09-12 | 2 | |
2017-09-13 | 4 | |
2017-09-14 | 2 | |
2017-09-15 | 2 | |
2017-09-16 | 1 | |
2017-09-17 | 2 | |
2017-09-18 | 3 | |
2017-09-19 | 1 | |
2017-09-20 | 3 | |
2017-09-22 | 2 | |
2017-09-23 | 1 | |
2017-09-24 | 4 | |
2017-09-25 | 4 | |
2017-09-26 | 3 | |
2017-09-27 | 3 | |
2017-09-28 | 3 | |
2017-09-29 | 4 | |
2017-09-30 | 5 | |
2017-10-01 | 5 | |
2017-10-02 | 6 | |
2017-10-03 | 4 | |
2017-10-04 | 4 | |
2017-10-05 | 4 | |
2017-10-06 | 5 | |
2017-10-07 | 2 | |
2017-10-08 | 1 | |
2017-10-09 | 3 | |
2017-10-10 | 2 | |
2017-10-11 | 1 | |
2017-10-12 | 2 | |
2017-10-13 | 4 | |
2017-10-14 | 4 | |
2017-10-15 | 3 | |
2017-10-16 | 4 | |
2017-10-17 | 3 | |
2017-10-18 | 3 | |
2017-10-19 | 2 | |
2017-10-20 | 2 | |
2017-10-23 | 6 | |
2017-10-24 | 3 | |
2017-10-25 | 7 | |
2017-10-26 | 2 | |
2017-10-27 | 5 | |
2017-10-28 | 3 | |
2017-10-29 | 3 | |
2017-10-30 | 2 | |
2017-10-31 | 5 | |
2017-11-01 | 6 | |
2017-11-02 | 5 | |
2017-11-03 | 4 | |
2017-11-04 | 2 | |
2017-11-05 | 2 | |
2017-11-06 | 2 | |
2017-11-07 | 2 | |
2017-11-08 | 3 | |
2017-11-10 | 3 | |
2017-11-12 | 3 | |
2017-11-11 | 4 | |
2017-11-13 | 2 | |
2017-11-14 | 3 | |
2017-11-15 | 2 | |
2017-11-16 | 5 | |
2017-11-17 | 2 | |
2017-11-20 | 4 | |
2017-11-21 | 2 | |
2017-11-22 | 3 | |
2017-11-23 | 3 | |
2017-11-24 | 2 | |
2017-11-27 | 3 | |
2017-11-28 | 4 | |
2017-11-29 | 3 | |
2017-11-30 | 1 | |
2017-12-01 | 1 | |
2017-12-02 | 1 | |
2017-12-03 | 1 | |
2017-12-04 | 3 | |
2017-12-05 | 2 | |
2017-12-06 | 3 | |
2017-12-07 | 3 | |
2017-12-08 | 5 | |
2017-12-11 | 1 | |
2017-11-09 | 4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<body> | |
<select id="dataSrcSelector" onchange="changeDataSrc()"> | |
<option value="default">工作/技術學習</option> | |
<option value="3">英文口說課</option> | |
<option value="5">娛樂</option> | |
<option value="11">準備演講、blog、分享</option> | |
<option value="10">運動</option> | |
<option value="9">看病</option> | |
</select> | |
<div id="calendar-chart"></div> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
function changeDataSrc() { | |
var x = document.getElementById("dataSrcSelector").value; | |
UpdateCalendar(`calendarData-${x}.csv`); | |
} | |
function UpdateCalendar(dataSrc) { | |
var width = 960, | |
height = 136, | |
cellSize = 17; | |
var formatPercent = d3.format("d"); | |
var color = d3.scaleQuantize() | |
.domain([0, 10]) | |
.range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]); | |
d3.csv(dataSrc, function (error, csv) { | |
if (error) throw error; | |
var data = d3.nest() | |
.key(function (d) { return d.date; }) | |
.rollup(function (d) { return +d[0].colorIdNum; }) | |
.object(csv); | |
d3.selectAll('rect').filter(function (d) { | |
return d in data; | |
}) | |
.transition() | |
.duration(500) | |
.attr("fill", function (d) { return color(data[d]); }); | |
d3.selectAll('rect').filter(function (d) { | |
return !(d in data); | |
}) | |
.transition() | |
.duration(500) | |
.attr("fill", function () { return '#fff'; }); | |
}); | |
} | |
function DrawCalendar(dataSrc) { | |
var width = 960, | |
height = 136, | |
cellSize = 17; | |
var formatPercent = d3.format("d"); | |
var color = d3.scaleQuantize() | |
.domain([0, 10]) | |
.range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]); | |
var svg = d3.select("#calendar-chart") | |
.selectAll("svg") | |
.data(d3.range(2017, 2018)) | |
.enter().append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")"); | |
svg.append("text") | |
.attr("transform", "translate(-6," + cellSize * 3.5 + ") rotate(-90)") | |
.attr("font-family", "sans-serif") | |
.attr("font-size", 10) | |
.attr("text-anchor", "middle") | |
.text(function (d) { return d; }); | |
var rect = svg.append("g") | |
.attr("fill", "none") | |
.attr("stroke", "#ccc") | |
.selectAll("rect") | |
.data(function (d) { return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) | |
.enter().append("rect") | |
.attr("width", cellSize) | |
.attr("height", cellSize) | |
.attr("x", function (d) { return d3.timeWeek.count(d3.timeYear(d), d) * cellSize; }) | |
.attr("y", function (d) { return d.getDay() * cellSize; }) | |
.datum(d3.timeFormat("%Y-%m-%d")); | |
svg.append("g") | |
.attr("fill", "none") | |
.attr("stroke", "#000") | |
.selectAll("path") | |
.data(function (d) { return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) | |
.enter().append("path") | |
.attr("d", pathMonth); | |
svg.append("g") | |
.selectAll("text") | |
.data(function (d) { return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) | |
.enter() | |
.append("text") | |
.attr("x", function (d, i) { | |
return (d3.timeWeek.count(d3.timeYear(d), d) + 2) * cellSize; | |
}) | |
.attr("y", 4 * cellSize) | |
.attr("dy", ".35em") | |
.attr("fill", "#000") | |
.attr("font-size", "35") | |
.text(function (d) { return (d.getMonth() + 1); }); | |
d3.csv(dataSrc, function (error, csv) { | |
if (error) throw error; | |
var data = d3.nest() | |
.key(function (d) { return d.date; }) | |
.rollup(function (d) { return +d[0].colorIdNum; }) | |
.object(csv); | |
rect.filter(function (d) { | |
return d in data; | |
}) | |
.attr("fill", function (d) { return color(data[d]); }) | |
.append("title") | |
.text(function (d) { return d + ": " + formatPercent(data[d]); }); | |
}); | |
function pathMonth(t0) { | |
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0), | |
d0 = t0.getDay(), w0 = d3.timeWeek.count(d3.timeYear(t0), t0), | |
d1 = t1.getDay(), w1 = d3.timeWeek.count(d3.timeYear(t1), t1); | |
return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize | |
+ "H" + w0 * cellSize + "V" + 7 * cellSize | |
+ "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize | |
+ "H" + (w1 + 1) * cellSize + "V" + 0 | |
+ "H" + (w0 + 1) * cellSize + "Z"; | |
} | |
} | |
DrawCalendar('calendarData-default.csv'); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment