Skip to content

Instantly share code, notes, and snippets.

@monfera
Last active May 28, 2019 04:18
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save monfera/0b4b038fd4dd3a046168 to your computer and use it in GitHub Desktop.
Save monfera/0b4b038fd4dd3a046168 to your computer and use it in GitHub Desktop.
Stephen Few's Student Dashboard with d3.js
license: gpl-3.0
height: 768
border: no
scrolling: no

sf-student-dashboard

Implementation of Stephen Few's Student Dashboard with Bandlines in d3.js See my related bl.ocks at http://bl.ocks.org/monfera or follow @monfera on twitter.

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="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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment