Old school D3 from simpler times

All examples By author By category About

skoslitz

Full window Github gist

crossfilter playground

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>**crossfilter*Playground**</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.1/lodash.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/custom/bootstrap.min.css" rel='stylesheet'>
</head>
<body>
<h1>Please use the console</h1>
<h2>Available Dimensions:</h2>
<h3>decadeDimension</h3>
<h3>countDimension</h3>

<script type="text/javascript">
  
  var data = [{"decade":72,"count":2},{"decade":88,"count":1},{"decade":97,"count":4},{"decade":100,"count":88},{"decade":101,"count":187},{"decade":102,"count":92},{"decade":103,"count":106},{"decade":104,"count":151},{"decade":105,"count":105},{"decade":106,"count":109},{"decade":107,"count":192},{"decade":108,"count":90},{"decade":109,"count":282},{"decade":110,"count":85},{"decade":111,"count":347},{"decade":112,"count":406},{"decade":113,"count":292},{"decade":114,"count":379},{"decade":115,"count":323},{"decade":116,"count":224},{"decade":117,"count":443},{"decade":118,"count":339},{"decade":119,"count":288},{"decade":120,"count":193},{"decade":121,"count":230},{"decade":122,"count":285},{"decade":123,"count":272},{"decade":124,"count":213},{"decade":125,"count":226},{"decade":126,"count":217},{"decade":127,"count":582},{"decade":128,"count":580},{"decade":129,"count":312},{"decade":130,"count":326},{"decade":131,"count":331},{"decade":132,"count":225},{"decade":133,"count":386},{"decade":134,"count":437},{"decade":135,"count":251},{"decade":136,"count":287},{"decade":137,"count":364},{"decade":138,"count":321},{"decade":139,"count":434},{"decade":140,"count":451},{"decade":141,"count":279},{"decade":142,"count":519},{"decade":143,"count":1027},{"decade":144,"count":788},{"decade":145,"count":561},{"decade":146,"count":770},{"decade":147,"count":1082},{"decade":148,"count":1904},{"decade":149,"count":1230},{"decade":150,"count":2268},{"decade":151,"count":9495},{"decade":152,"count":5447},{"decade":153,"count":2605},{"decade":154,"count":2157},{"decade":155,"count":2520},{"decade":156,"count":2824},{"decade":157,"count":3095},{"decade":158,"count":9922},{"decade":159,"count":8549},{"decade":160,"count":2186},{"decade":161,"count":2753},{"decade":162,"count":2798},{"decade":163,"count":3223},{"decade":164,"count":29419},{"decade":165,"count":6732},{"decade":166,"count":2937},{"decade":167,"count":2614},{"decade":168,"count":6269},{"decade":169,"count":2710},{"decade":170,"count":4215},{"decade":171,"count":2117},{"decade":172,"count":2944},{"decade":173,"count":3840},{"decade":174,"count":5407},{"decade":175,"count":10775},{"decade":176,"count":10552},{"decade":177,"count":11625},{"decade":178,"count":14993},{"decade":179,"count":7988},{"decade":180,"count":317},{"decade":181,"count":6},{"decade":182,"count":2424},{"decade":183,"count":7925},{"decade":184,"count":6047},{"decade":185,"count":2088},{"decade":186,"count":1918},{"decade":187,"count":1459},{"decade":188,"count":3991},{"decade":189,"count":2056},{"decade":190,"count":3387},{"decade":191,"count":2688},{"decade":194,"count":24},{"decade":195,"count":1},{"decade":198,"count":2},{"decade":199,"count":3}];

var payments = crossfilter([
  {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
  {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
  {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
]);

var ndx = crossfilter(data);
var decadeDimension = ndx.dimension(function(d){return d.decade;});
var countDimension = ndx.dimension(function(d){return d.count;});

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.1/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js