Part of the video course: D3.js in Motion.
forked from curran's block: Scatter Plot with Time Axis
license: mit |
Part of the video course: D3.js in Motion.
forked from curran's block: Scatter Plot with Time Axis
createddate | product | CountOfProduct | |
---|---|---|---|
1/1/2017 | Bank account or service | 2 | |
1/1/2017 | Consumer Loan | 1 | |
1/1/2017 | Credit card | 7 | |
1/1/2017 | Mortgage | 11 | |
1/1/2017 | Student loan | 1 | |
1/2/2017 | Bank account or service | 8 | |
1/2/2017 | Consumer Loan | 5 | |
1/2/2017 | Credit card | 9 | |
1/2/2017 | Mortgage | 17 | |
1/3/2017 | Bank account or service | 10 | |
1/3/2017 | Consumer Loan | 4 | |
1/3/2017 | Credit card | 18 | |
1/3/2017 | Mortgage | 34 | |
1/3/2017 | Payday loan | 3 | |
1/3/2017 | Student loan | 4 | |
1/4/2017 | Bank account or service | 18 | |
1/4/2017 | Consumer Loan | 8 | |
1/4/2017 | Credit card | 20 | |
1/4/2017 | Mortgage | 38 | |
1/4/2017 | Student loan | 4 | |
1/5/2017 | Bank account or service | 16 | |
1/5/2017 | Consumer Loan | 3 | |
1/5/2017 | Credit card | 20 | |
1/5/2017 | Mortgage | 31 | |
1/5/2017 | Payday loan | 1 | |
1/5/2017 | Student loan | 6 | |
1/6/2017 | Bank account or service | 16 | |
1/6/2017 | Consumer Loan | 9 | |
1/6/2017 | Credit card | 14 | |
1/6/2017 | Mortgage | 23 | |
1/6/2017 | Payday loan | 2 | |
1/6/2017 | Student loan | 2 | |
1/7/2017 | Bank account or service | 11 | |
1/7/2017 | Consumer Loan | 2 | |
1/7/2017 | Credit card | 7 | |
1/7/2017 | Mortgage | 11 | |
1/7/2017 | Payday loan | 1 | |
1/7/2017 | Student loan | 2 | |
1/8/2017 | Bank account or service | 9 | |
1/8/2017 | Consumer Loan | 2 | |
1/8/2017 | Credit card | 7 | |
1/8/2017 | Mortgage | 8 | |
1/8/2017 | Payday loan | 1 | |
1/8/2017 | Student loan | 1 | |
1/9/2017 | Bank account or service | 10 | |
1/9/2017 | Consumer Loan | 8 | |
1/9/2017 | Credit card | 14 | |
1/9/2017 | Mortgage | 26 | |
1/9/2017 | Student loan | 2 | |
1/10/2017 | Bank account or service | 12 | |
1/10/2017 | Consumer Loan | 9 | |
1/10/2017 | Credit card | 20 | |
1/10/2017 | Mortgage | 36 | |
1/10/2017 | Student loan | 8 | |
1/11/2017 | Bank account or service | 9 | |
1/11/2017 | Consumer Loan | 5 | |
1/11/2017 | Credit card | 21 | |
1/11/2017 | Mortgage | 34 | |
1/11/2017 | Payday loan | 1 | |
1/11/2017 | Student loan | 6 | |
1/12/2017 | Bank account or service | 14 | |
1/12/2017 | Consumer Loan | 9 | |
1/12/2017 | Credit card | 15 | |
1/12/2017 | Mortgage | 27 | |
1/12/2017 | Payday loan | 1 | |
1/12/2017 | Student loan | 1 | |
1/13/2017 | Bank account or service | 19 | |
1/13/2017 | Consumer Loan | 4 | |
1/13/2017 | Credit card | 13 | |
1/13/2017 | Mortgage | 32 | |
1/13/2017 | Student loan | 2 | |
1/14/2017 | Bank account or service | 11 | |
1/14/2017 | Consumer Loan | 4 | |
1/14/2017 | Credit card | 7 | |
1/14/2017 | Mortgage | 12 | |
1/14/2017 | Student loan | 2 | |
1/15/2017 | Bank account or service | 3 | |
1/15/2017 | Consumer Loan | 3 | |
1/15/2017 | Credit card | 8 | |
1/15/2017 | Mortgage | 8 | |
1/15/2017 | Payday loan | 1 | |
1/15/2017 | Student loan | 2 | |
1/16/2017 | Bank account or service | 8 | |
1/16/2017 | Consumer Loan | 5 | |
1/16/2017 | Credit card | 17 | |
1/16/2017 | Mortgage | 15 | |
1/17/2017 | Bank account or service | 12 | |
1/17/2017 | Consumer Loan | 10 | |
1/17/2017 | Credit card | 15 | |
1/17/2017 | Mortgage | 30 | |
1/17/2017 | Payday loan | 4 | |
1/17/2017 | Student loan | 6 | |
1/18/2017 | Bank account or service | 19 | |
1/18/2017 | Consumer Loan | 4 | |
1/18/2017 | Credit card | 16 | |
1/18/2017 | Mortgage | 45 | |
1/18/2017 | Payday loan | 1 | |
1/18/2017 | Student loan | 4 | |
1/19/2017 | Bank account or service | 16 | |
1/19/2017 | Consumer Loan | 7 | |
1/19/2017 | Credit card | 29 | |
1/19/2017 | Mortgage | 42 | |
1/19/2017 | Payday loan | 2 | |
1/19/2017 | Student loan | 30 | |
1/20/2017 | Bank account or service | 13 | |
1/20/2017 | Consumer Loan | 12 | |
1/20/2017 | Credit card | 16 | |
1/20/2017 | Mortgage | 24 | |
1/20/2017 | Student loan | 23 | |
1/21/2017 | Bank account or service | 15 | |
1/21/2017 | Consumer Loan | 3 | |
1/21/2017 | Credit card | 15 | |
1/21/2017 | Mortgage | 11 | |
1/21/2017 | Payday loan | 1 | |
1/21/2017 | Student loan | 6 | |
1/22/2017 | Bank account or service | 8 | |
1/22/2017 | Consumer Loan | 4 | |
1/22/2017 | Credit card | 12 | |
1/22/2017 | Mortgage | 9 | |
1/22/2017 | Student loan | 8 | |
1/23/2017 | Bank account or service | 14 | |
1/23/2017 | Consumer Loan | 9 | |
1/23/2017 | Credit card | 26 | |
1/23/2017 | Mortgage | 29 | |
1/23/2017 | Student loan | 5 | |
1/24/2017 | Bank account or service | 20 | |
1/24/2017 | Consumer Loan | 8 | |
1/24/2017 | Credit card | 21 | |
1/24/2017 | Mortgage | 46 | |
1/24/2017 | Payday loan | 1 | |
1/24/2017 | Student loan | 10 | |
1/25/2017 | Bank account or service | 22 | |
1/25/2017 | Consumer Loan | 8 | |
1/25/2017 | Credit card | 12 | |
1/25/2017 | Mortgage | 28 | |
1/25/2017 | Payday loan | 1 | |
1/25/2017 | Student loan | 9 | |
1/26/2017 | Bank account or service | 22 | |
1/26/2017 | Consumer Loan | 7 | |
1/26/2017 | Credit card | 13 | |
1/26/2017 | Mortgage | 37 | |
1/26/2017 | Student loan | 12 | |
1/27/2017 | Bank account or service | 20 | |
1/27/2017 | Consumer Loan | 9 | |
1/27/2017 | Credit card | 15 | |
1/27/2017 | Mortgage | 42 | |
1/27/2017 | Student loan | 6 | |
1/28/2017 | Bank account or service | 9 | |
1/28/2017 | Credit card | 8 | |
1/28/2017 | Mortgage | 18 | |
1/28/2017 | Student loan | 1 | |
1/29/2017 | Bank account or service | 7 | |
1/29/2017 | Consumer Loan | 2 | |
1/29/2017 | Credit card | 8 | |
1/29/2017 | Mortgage | 9 | |
1/30/2017 | Bank account or service | 9 | |
1/30/2017 | Consumer Loan | 4 | |
1/30/2017 | Credit card | 19 | |
1/30/2017 | Mortgage | 34 | |
1/30/2017 | Payday loan | 1 | |
1/30/2017 | Student loan | 2 | |
1/31/2017 | Bank account or service | 28 | |
1/31/2017 | Consumer Loan | 8 | |
1/31/2017 | Credit card | 20 | |
1/31/2017 | Mortgage | 38 | |
1/31/2017 | Student loan | 9 | |
2/1/2017 | Bank account or service | 23 | |
2/1/2017 | Consumer Loan | 6 | |
2/1/2017 | Credit card | 23 | |
2/1/2017 | Mortgage | 33 | |
2/1/2017 | Payday loan | 1 | |
2/1/2017 | Student loan | 2 | |
2/2/2017 | Bank account or service | 22 | |
2/2/2017 | Consumer Loan | 9 | |
2/2/2017 | Credit card | 18 | |
2/2/2017 | Mortgage | 27 | |
2/2/2017 | Student loan | 4 | |
2/3/2017 | Bank account or service | 20 | |
2/3/2017 | Consumer Loan | 9 | |
2/3/2017 | Credit card | 19 | |
2/3/2017 | Mortgage | 26 | |
2/3/2017 | Student loan | 7 | |
2/4/2017 | Bank account or service | 6 | |
2/4/2017 | Consumer Loan | 6 | |
2/4/2017 | Credit card | 6 | |
2/4/2017 | Mortgage | 20 | |
2/4/2017 | Student loan | 3 | |
2/5/2017 | Bank account or service | 10 | |
2/5/2017 | Consumer Loan | 4 | |
2/5/2017 | Credit card | 9 | |
2/5/2017 | Mortgage | 11 | |
2/5/2017 | Payday loan | 1 | |
2/5/2017 | Student loan | 2 | |
2/6/2017 | Bank account or service | 13 | |
2/6/2017 | Consumer Loan | 7 | |
2/6/2017 | Credit card | 12 | |
2/6/2017 | Mortgage | 29 | |
2/6/2017 | Student loan | 7 | |
2/7/2017 | Bank account or service | 20 | |
2/7/2017 | Consumer Loan | 7 | |
2/7/2017 | Credit card | 18 | |
2/7/2017 | Mortgage | 24 | |
2/7/2017 | Payday loan | 4 | |
2/7/2017 | Student loan | 7 | |
2/8/2017 | Bank account or service | 20 | |
2/8/2017 | Consumer Loan | 4 | |
2/8/2017 | Credit card | 9 | |
2/8/2017 | Mortgage | 33 | |
2/8/2017 | Payday loan | 3 | |
2/8/2017 | Student loan | 6 | |
2/9/2017 | Bank account or service | 16 | |
2/9/2017 | Consumer Loan | 10 | |
2/9/2017 | Credit card | 9 | |
2/9/2017 | Mortgage | 26 | |
2/9/2017 | Payday loan | 2 | |
2/9/2017 | Student loan | 8 | |
2/10/2017 | Bank account or service | 19 | |
2/10/2017 | Consumer Loan | 9 | |
2/10/2017 | Credit card | 20 | |
2/10/2017 | Mortgage | 23 | |
2/10/2017 | Payday loan | 3 | |
2/10/2017 | Student loan | 5 | |
2/11/2017 | Bank account or service | 12 | |
2/11/2017 | Consumer Loan | 7 | |
2/11/2017 | Credit card | 6 | |
2/11/2017 | Mortgage | 14 | |
2/11/2017 | Payday loan | 1 | |
2/12/2017 | Bank account or service | 8 | |
2/12/2017 | Consumer Loan | 3 | |
2/12/2017 | Credit card | 17 | |
2/12/2017 | Mortgage | 6 | |
2/12/2017 | Payday loan | 1 | |
2/12/2017 | Student loan | 3 | |
2/13/2017 | Bank account or service | 13 | |
2/13/2017 | Consumer Loan | 4 | |
2/13/2017 | Credit card | 20 | |
2/13/2017 | Mortgage | 24 | |
2/13/2017 | Payday loan | 1 | |
2/13/2017 | Student loan | 7 | |
2/14/2017 | Bank account or service | 23 | |
2/14/2017 | Consumer Loan | 9 | |
2/14/2017 | Credit card | 18 | |
2/14/2017 | Mortgage | 25 | |
2/14/2017 | Student loan | 8 | |
2/15/2017 | Bank account or service | 13 | |
2/15/2017 | Consumer Loan | 9 | |
2/15/2017 | Credit card | 13 | |
2/15/2017 | Mortgage | 37 | |
2/15/2017 | Payday loan | 2 | |
2/15/2017 | Student loan | 7 | |
2/16/2017 | Bank account or service | 18 | |
2/16/2017 | Consumer Loan | 4 | |
2/16/2017 | Credit card | 24 | |
2/16/2017 | Mortgage | 29 | |
2/16/2017 | Payday loan | 1 | |
2/16/2017 | Student loan | 5 | |
2/17/2017 | Bank account or service | 18 | |
2/17/2017 | Consumer Loan | 6 | |
2/17/2017 | Credit card | 12 | |
2/17/2017 | Mortgage | 23 | |
2/17/2017 | Payday loan | 1 | |
2/17/2017 | Student loan | 4 | |
2/18/2017 | Bank account or service | 9 | |
2/18/2017 | Consumer Loan | 2 | |
2/18/2017 | Credit card | 11 | |
2/18/2017 | Mortgage | 15 | |
2/18/2017 | Payday loan | 1 | |
2/18/2017 | Student loan | 2 | |
2/19/2017 | Bank account or service | 6 | |
2/19/2017 | Consumer Loan | 3 | |
2/19/2017 | Credit card | 6 | |
2/19/2017 | Mortgage | 7 | |
2/19/2017 | Payday loan | 2 | |
2/19/2017 | Student loan | 1 | |
2/20/2017 | Bank account or service | 6 | |
2/20/2017 | Consumer Loan | 6 | |
2/20/2017 | Credit card | 12 | |
2/20/2017 | Mortgage | 17 | |
2/20/2017 | Payday loan | 2 | |
2/20/2017 | Student loan | 1 | |
2/21/2017 | Bank account or service | 13 | |
2/21/2017 | Consumer Loan | 4 | |
2/21/2017 | Credit card | 14 | |
2/21/2017 | Mortgage | 30 | |
2/21/2017 | Student loan | 5 | |
2/22/2017 | Bank account or service | 20 | |
2/22/2017 | Consumer Loan | 10 | |
2/22/2017 | Credit card | 24 | |
2/22/2017 | Mortgage | 24 | |
2/22/2017 | Student loan | 4 | |
2/23/2017 | Bank account or service | 13 | |
2/23/2017 | Consumer Loan | 5 | |
2/23/2017 | Credit card | 18 | |
2/23/2017 | Mortgage | 37 | |
2/23/2017 | Payday loan | 2 | |
2/23/2017 | Student loan | 1 | |
2/24/2017 | Bank account or service | 13 | |
2/24/2017 | Consumer Loan | 12 | |
2/24/2017 | Credit card | 17 | |
2/24/2017 | Mortgage | 20 | |
2/24/2017 | Student loan | 4 | |
2/25/2017 | Bank account or service | 15 | |
2/25/2017 | Consumer Loan | 2 | |
2/25/2017 | Credit card | 9 | |
2/25/2017 | Mortgage | 14 | |
2/26/2017 | Bank account or service | 6 | |
2/26/2017 | Consumer Loan | 2 | |
2/26/2017 | Credit card | 4 | |
2/26/2017 | Mortgage | 15 | |
2/27/2017 | Bank account or service | 14 | |
2/27/2017 | Consumer Loan | 4 | |
2/27/2017 | Credit card | 14 | |
2/27/2017 | Mortgage | 36 | |
2/27/2017 | Student loan | 5 | |
2/28/2017 | Bank account or service | 28 | |
2/28/2017 | Consumer Loan | 5 | |
2/28/2017 | Credit card | 22 | |
2/28/2017 | Mortgage | 30 | |
2/28/2017 | Student loan | 9 | |
3/1/2017 | Bank account or service | 22 | |
3/1/2017 | Consumer Loan | 5 | |
3/1/2017 | Credit card | 16 | |
3/1/2017 | Mortgage | 29 | |
3/1/2017 | Payday loan | 1 | |
3/1/2017 | Student loan | 5 | |
3/2/2017 | Bank account or service | 13 | |
3/2/2017 | Consumer Loan | 7 | |
3/2/2017 | Credit card | 10 | |
3/2/2017 | Mortgage | 25 | |
3/2/2017 | Student loan | 5 | |
3/3/2017 | Bank account or service | 19 | |
3/3/2017 | Consumer Loan | 7 | |
3/3/2017 | Credit card | 14 | |
3/3/2017 | Mortgage | 28 | |
3/3/2017 | Student loan | 2 | |
3/4/2017 | Bank account or service | 7 | |
3/4/2017 | Consumer Loan | 1 | |
3/4/2017 | Credit card | 12 | |
3/4/2017 | Mortgage | 8 | |
3/4/2017 | Student loan | 1 | |
3/5/2017 | Bank account or service | 3 | |
3/5/2017 | Consumer Loan | 4 | |
3/5/2017 | Credit card | 3 | |
3/5/2017 | Mortgage | 9 | |
3/5/2017 | Student loan | 1 | |
3/6/2017 | Bank account or service | 16 | |
3/6/2017 | Consumer Loan | 4 | |
3/6/2017 | Credit card | 23 | |
3/6/2017 | Mortgage | 21 | |
3/6/2017 | Payday loan | 1 | |
3/6/2017 | Student loan | 1 | |
3/7/2017 | Bank account or service | 14 | |
3/7/2017 | Consumer Loan | 12 | |
3/7/2017 | Credit card | 16 | |
3/7/2017 | Mortgage | 48 | |
3/7/2017 | Payday loan | 2 | |
3/7/2017 | Student loan | 3 | |
3/8/2017 | Bank account or service | 10 | |
3/8/2017 | Consumer Loan | 7 | |
3/8/2017 | Credit card | 25 | |
3/8/2017 | Mortgage | 43 | |
3/8/2017 | Payday loan | 3 | |
3/8/2017 | Student loan | 1 | |
3/9/2017 | Bank account or service | 20 | |
3/9/2017 | Consumer Loan | 8 | |
3/9/2017 | Credit card | 19 | |
3/9/2017 | Mortgage | 21 | |
3/9/2017 | Payday loan | 3 | |
3/9/2017 | Student loan | 3 | |
3/10/2017 | Bank account or service | 14 | |
3/10/2017 | Consumer Loan | 3 | |
3/10/2017 | Credit card | 17 | |
3/10/2017 | Mortgage | 32 | |
3/10/2017 | Payday loan | 1 | |
3/10/2017 | Student loan | 3 | |
3/11/2017 | Bank account or service | 12 | |
3/11/2017 | Consumer Loan | 3 | |
3/11/2017 | Credit card | 13 | |
3/11/2017 | Mortgage | 10 | |
3/12/2017 | Bank account or service | 7 | |
3/12/2017 | Consumer Loan | 4 | |
3/12/2017 | Credit card | 7 | |
3/12/2017 | Mortgage | 7 | |
3/12/2017 | Student loan | 1 | |
3/13/2017 | Bank account or service | 13 | |
3/13/2017 | Consumer Loan | 10 | |
3/13/2017 | Credit card | 14 | |
3/13/2017 | Mortgage | 32 | |
3/13/2017 | Payday loan | 1 | |
3/13/2017 | Student loan | 2 | |
3/14/2017 | Bank account or service | 15 | |
3/14/2017 | Consumer Loan | 9 | |
3/14/2017 | Credit card | 19 | |
3/14/2017 | Mortgage | 34 | |
3/14/2017 | Student loan | 12 | |
3/15/2017 | Bank account or service | 16 | |
3/15/2017 | Consumer Loan | 8 | |
3/15/2017 | Credit card | 19 | |
3/15/2017 | Mortgage | 26 | |
3/15/2017 | Student loan | 3 | |
3/16/2017 | Bank account or service | 16 | |
3/16/2017 | Consumer Loan | 12 | |
3/16/2017 | Credit card | 12 | |
3/16/2017 | Mortgage | 35 | |
3/16/2017 | Payday loan | 1 | |
3/16/2017 | Student loan | 6 | |
3/17/2017 | Bank account or service | 11 | |
3/17/2017 | Consumer Loan | 2 | |
3/17/2017 | Credit card | 17 | |
3/17/2017 | Mortgage | 24 | |
3/17/2017 | Student loan | 6 | |
3/18/2017 | Bank account or service | 11 | |
3/18/2017 | Consumer Loan | 4 | |
3/18/2017 | Credit card | 14 | |
3/18/2017 | Mortgage | 5 | |
3/18/2017 | Student loan | 3 | |
3/19/2017 | Bank account or service | 10 | |
3/19/2017 | Consumer Loan | 1 | |
3/19/2017 | Credit card | 10 | |
3/19/2017 | Mortgage | 14 | |
3/20/2017 | Bank account or service | 17 | |
3/20/2017 | Consumer Loan | 11 | |
3/20/2017 | Credit card | 27 | |
3/20/2017 | Mortgage | 30 | |
3/20/2017 | Payday loan | 2 | |
3/20/2017 | Student loan | 1 | |
3/21/2017 | Bank account or service | 15 | |
3/21/2017 | Consumer Loan | 9 | |
3/21/2017 | Credit card | 18 | |
3/21/2017 | Mortgage | 26 | |
3/21/2017 | Student loan | 3 | |
3/22/2017 | Bank account or service | 23 | |
3/22/2017 | Consumer Loan | 11 | |
3/22/2017 | Credit card | 21 | |
3/22/2017 | Mortgage | 31 | |
3/22/2017 | Student loan | 9 | |
3/23/2017 | Bank account or service | 25 | |
3/23/2017 | Consumer Loan | 12 | |
3/23/2017 | Credit card | 17 | |
3/23/2017 | Mortgage | 28 | |
3/23/2017 | Payday loan | 1 | |
3/23/2017 | Student loan | 2 | |
3/24/2017 | Bank account or service | 13 | |
3/24/2017 | Consumer Loan | 5 | |
3/24/2017 | Credit card | 10 | |
3/24/2017 | Mortgage | 23 | |
3/24/2017 | Student loan | 2 | |
3/25/2017 | Bank account or service | 7 | |
3/25/2017 | Consumer Loan | 3 | |
3/25/2017 | Credit card | 5 | |
3/25/2017 | Mortgage | 11 | |
3/25/2017 | Student loan | 1 | |
3/26/2017 | Bank account or service | 4 | |
3/26/2017 | Consumer Loan | 6 | |
3/26/2017 | Credit card | 8 | |
3/26/2017 | Mortgage | 11 | |
3/26/2017 | Student loan | 1 | |
3/27/2017 | Bank account or service | 8 | |
3/27/2017 | Consumer Loan | 4 | |
3/27/2017 | Credit card | 14 | |
3/27/2017 | Mortgage | 28 | |
3/27/2017 | Payday loan | 2 | |
3/27/2017 | Student loan | 4 | |
3/28/2017 | Bank account or service | 15 | |
3/28/2017 | Consumer Loan | 7 | |
3/28/2017 | Credit card | 23 | |
3/28/2017 | Mortgage | 22 | |
3/28/2017 | Student loan | 6 | |
3/29/2017 | Bank account or service | 23 | |
3/29/2017 | Consumer Loan | 6 | |
3/29/2017 | Credit card | 13 | |
3/29/2017 | Mortgage | 30 | |
3/29/2017 | Payday loan | 1 | |
3/29/2017 | Student loan | 1 | |
3/30/2017 | Bank account or service | 9 | |
3/30/2017 | Consumer Loan | 10 | |
3/30/2017 | Credit card | 14 | |
3/30/2017 | Mortgage | 22 | |
3/30/2017 | Payday loan | 1 | |
3/30/2017 | Student loan | 4 | |
3/31/2017 | Bank account or service | 13 | |
3/31/2017 | Consumer Loan | 7 | |
3/31/2017 | Credit card | 23 | |
3/31/2017 | Mortgage | 19 | |
3/31/2017 | Payday loan | 1 | |
3/31/2017 | Student loan | 3 |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> | |
<title>CFPB Products over Time</title> | |
<style> | |
body { | |
margin: 0px; | |
} | |
.domain { | |
display: none; | |
} | |
.tick line { | |
stroke: #C0C0BB; | |
} | |
.tick text, .legendCells text { | |
fill: #8E8883; | |
font-size: 10pt; | |
font-family: sans-serif; | |
} | |
.axis-label,.legend-label { | |
fill: #635F5D; | |
font-size: 10pt; | |
font-family: sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<svg width="960" height="500"></svg> | |
<script> | |
const xValue = d => d.createddate; | |
const xLabel = 'Time'; | |
const yValue = d => d.CountOfProduct; | |
const yLabel = 'Number of Complaints'; | |
const colorValue = d => d.product; | |
const colorLabel = 'Product'; | |
const margin = { left: 100, right: 250, top: 20, bottom: 120 }; | |
const svg = d3.select('svg'); | |
const width = svg.attr('width'); | |
const height = svg.attr('height'); | |
const innerWidth = width - margin.left - margin.right; | |
const innerHeight = height - margin.top - margin.bottom; | |
const g = svg.append('g') | |
.attr('transform', `translate(${margin.left},${margin.top})`); | |
const xAxisG = g.append('g') | |
.attr('transform', `translate(0, ${innerHeight})`); | |
const yAxisG = g.append('g'); | |
const colorLegendG = g.append('g') | |
.attr('transform', `translate(${innerWidth + 60}, 150)`); | |
xAxisG.append('text') | |
.attr('class', 'axis-label') | |
.attr('x', innerWidth / 2) | |
.attr('y', 60) | |
.text(xLabel); | |
yAxisG.append('text') | |
.attr('class', 'axis-label') | |
.attr('x', -innerHeight / 2) | |
.attr('y', -80) | |
.attr('transform', `rotate(-90)`) | |
.style('text-anchor', 'middle') | |
.text(yLabel); | |
colorLegendG.append('text') | |
.attr('class', 'legend-label') | |
.attr('x', -30) | |
.attr('y', -40) | |
.text(colorLabel); | |
var parseTime = d3.timeParse("%-m/%-d/%Y"); | |
const xScale = d3.scaleTime(); | |
const yScale = d3.scaleLinear(); | |
const colorScale = d3.scaleOrdinal() | |
.range(d3.schemeCategory10); | |
const xAxis = d3.axisBottom() | |
.scale(xScale) | |
.tickPadding(15) | |
.tickSize(-innerHeight); | |
const yAxis = d3.axisLeft() | |
.scale(yScale) | |
.ticks(5) | |
.tickPadding(15) | |
.tickSize(-innerWidth); | |
const colorLegend = d3.legendColor() | |
.scale(colorScale) | |
.shape('circle'); | |
const row = d => { | |
d.createddate = parseTime(d.createddate); | |
d.CountofProduct = +d.CountOfProduct; | |
return d; | |
}; | |
d3.csv('cfpb_total_prods.csv', row, data => { | |
xScale | |
.domain(d3.extent(data, xValue)) | |
.range([0, innerWidth]) | |
yScale | |
.domain([0,d3.max(data, function(d) {return d.CountofProduct;})]) | |
.range([innerHeight, 0]) | |
.nice(5); | |
g.selectAll('circle') | |
.data(data) | |
.enter().append('svg:circle') | |
.attr('cx', function(d,i) {return xScale(d.createddate);}) | |
.attr('cy', function(d,i) {return yScale(d.CountofProduct);}) | |
.attr('fill', d => colorScale(colorValue(d))) | |
.attr('fill-opacity', 0.6) | |
.attr('r', 4); | |
xAxisG.call(xAxis); | |
yAxisG.call(yAxis); | |
colorLegendG.call(colorLegend) | |
.selectAll('.cell text') | |
.attr('dy', '0.1em'); | |
}); | |
</script> | |
</body> | |
</html> | |
�PNG | |