Stephen Few's Student Dashboard with d3.js

sf-student-dashboard

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)

BSD license (opensource.org)

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="https://rawgit.com/monfera/sf-student-dashboard/master/bandline.css" rel="stylesheet" type="text/css" />
    <link href="https://rawgit.com/monfera/sf-student-dashboard/master/dashboard.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/monfera/sf-student-dashboard/d3.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/monfera/sf-student-dashboard/du.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/monfera/sf-student-dashboard/data.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/monfera/sf-student-dashboard/model.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/monfera/sf-student-dashboard/bandline.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/monfera/sf-student-dashboard/interactions.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/monfera/sf-student-dashboard/render.js" type="text/javascript"></script>
    <script defer="defer" src="https://cdn.jsdelivr.net/gh/monfera/sf-student-dashboard/dashboard.js" type="text/javascript"></script>
</head>
<body>
<svg xmlns="https://www.w3.org/2000/svg">
</svg>
</body>
</html>

Modified http://rawgit.com/monfera/sf-student-dashboard/master/d3.js to a secure url

Modified http://rawgit.com/monfera/sf-student-dashboard/master/du.js to a secure url

Modified http://rawgit.com/monfera/sf-student-dashboard/master/data.js to a secure url

Modified http://rawgit.com/monfera/sf-student-dashboard/master/model.js to a secure url

Modified http://rawgit.com/monfera/sf-student-dashboard/master/bandline.js to a secure url

Modified http://rawgit.com/monfera/sf-student-dashboard/master/interactions.js to a secure url

Modified http://rawgit.com/monfera/sf-student-dashboard/master/render.js to a secure url

Modified http://rawgit.com/monfera/sf-student-dashboard/master/dashboard.js to a secure url

https://rawgit.com/monfera/sf-student-dashboard/master/d3.js

https://rawgit.com/monfera/sf-student-dashboard/master/du.js

https://rawgit.com/monfera/sf-student-dashboard/master/data.js

https://rawgit.com/monfera/sf-student-dashboard/master/model.js

https://rawgit.com/monfera/sf-student-dashboard/master/bandline.js

https://rawgit.com/monfera/sf-student-dashboard/master/interactions.js

https://rawgit.com/monfera/sf-student-dashboard/master/render.js

https://rawgit.com/monfera/sf-student-dashboard/master/dashboard.js