Old school D3 from simpler times

All examples By author By category About

uredkar

Full window Github gist

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

forked from foolosopher's block: Stephen Few's Student Dashboard with d3.js

<!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>

xxxxxxxxxx
 
<!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