Implementation of Stephen Few's Student Dashboard with Bandlines in d3.js
Brush rows for updating distribution aggregates. Click and hold column headers for temporary resorting.
Article on Stephen Few's perceptualedge.com
Key quote from Steve's article (andrepetras.de)
Introducing Bandlines by Stephen Few (perceptualedge.com)
Code repo (github.com) Making of the dashboard - draft (retinatics.com)
Dashboard design: © Stephen Few
Code: © Robert Monfera
Follow @monfera
| <!DOCTYPE html> | |
| <html lang=en> | |
| <head> | |
| <meta charset='utf-8'> | |
| <title>Student Overview Dashboard</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-touch-fullscreen" content="yes"> | |
| <meta http-equiv="cache-control" content="max-age=0" /> | |
| <meta http-equiv="cache-control" content="no-cache" /> | |
| <meta http-equiv="expires" content="0" /> | |
| <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> | |
| <meta http-equiv="pragma" content="no-cache" /> | |
| <link href="http://rawgit.com/monfera/sf-student-dashboard/master/bandline.css" rel="stylesheet" type="text/css" /> | |
| <link href="http://rawgit.com/monfera/sf-student-dashboard/master/dashboard.css" rel="stylesheet" type="text/css" /> | |
| <script src="http://rawgit.com/monfera/sf-student-dashboard/master/d3.js" type="text/javascript"></script> | |
| <script src="http://rawgit.com/monfera/sf-student-dashboard/master/du.js" type="text/javascript"></script> | |
| <script src="http://rawgit.com/monfera/sf-student-dashboard/master/data.js" type="text/javascript"></script> | |
| <script src="http://rawgit.com/monfera/sf-student-dashboard/master/model.js" type="text/javascript"></script> | |
| <script src="http://rawgit.com/monfera/sf-student-dashboard/master/bandline.js" type="text/javascript"></script> | |
| <script src="http://rawgit.com/monfera/sf-student-dashboard/master/interactions.js" type="text/javascript"></script> | |
| <script src="http://rawgit.com/monfera/sf-student-dashboard/master/render.js" type="text/javascript"></script> | |
| <script defer="defer" src="http://rawgit.com/monfera/sf-student-dashboard/master/dashboard.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <svg xmlns="http://www.w3.org/2000/svg"> | |
| </svg> | |
| </body> | |
| </html> |
