julian-boolean/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/rickshaw.css">
  <style>  body{ margin: 10px; padding: 0 } </style>
</head>
<body>

  <div id="dowChart"></div>

  <script src="js/jquery.js"></script>
  <script src="js/d3.js" charset="utf-8"></script>
  <script src="js/rickshaw.js"></script>

  <script>
    var countsPerDay15MinInterval = {
      "SUN":[361,324,315,280,213,218,188,183,159,149,121,126,102,103,83,77,68,68,83,102,112,125,163,182,207,195,233,348,324,344,418,622,579,694,737,924,888,921,1089,1298,1179,1296,1410,1416,1366,1516,1512,1497,1445,1652,1607,1684,1579,1459,1545,1669,1504,1535,1552,1563,1597,1537,1512,1532,1497,1500,1526,1607,1437,1391,1374,1375,1351,1336,1243,1120,1067,978,927,835,774,807,668,583,526,501,504,438,370,371,297,260,234,212,181,160],
      "MON":[139,148,122,108,82,86,67,68,59,69,61,58,51,67,108,110,147,171,282,393,438,605,790,863,742,859,1061,1394,1309,1516,1836,1901,1753,1518,1332,1384,1179,1170,1094,1244,1132,1154,953,589,603,0,474,683,721,697,0,0,0,731,757,778,928,1033,1094,1125,1150,1225,1214,1282,1158,890,830,1386,1348,1376,1294,1319,1222,1138,1050,971,868,813,669,630,585,579,510,502,395,413,367,230,274,213,115,147,162,121,118,108],
      "TUE":[87,64,78,34,64,55,35,35,48,37,43,35,34,28,51,56,84,76,188,264,250,424,475,505,549,516,510,660,619,528,1178,839,1117,799,721,729,396,646,470,777,607,518,664,783,681,589,162,651,778,772,818,541,894,780,436,221,0,576,156,1169,996,793,418,804,613,0,0,874,933,1127,1117,1337,1674,1810,1664,1595,1404,1361,1116,969,807,877,731,752,821,658,487,538,477,393,298,278,271,180,210,201],
      "WED":[165,154,113,106,94,77,80,37,48,40,27,43,39,47,67,62,66,141,285,378,303,545,635,708,722,689,864,1218,1178,1366,1363,1246,1216,1439,1322,1382,1196,1264,1209,1303,1129,954,1153,1187,775,1232,1338,1331,1364,1473,1428,1373,1372,1546,1401,1524,1428,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1210,1870,1830,1657,1389,1386,1259,1100,984,1082,870,1004,925,827,676,564,572,494,438,336,307,263,242,209],
      "THU":[172,169,150,119,118,84,77,70,94,66,72,81,94,96,82,128,115,181,298,408,454,614,830,1019,823,932,1113,1499,1341,1575,1866,1908,1688,1568,1287,1358,1268,1166,1068,1217,1163,1230,1268,1265,1185,1303,1365,1480,1179,1351,1433,1404,1433,1502,1501,1656,1579,1731,823,846,852,920,855,1262,1185,1299,1006,1034,967,1440,1378,1391,1272,1276,1229,1122,1089,986,870,856,727,735,582,627,589,529,492,423,420,349,316,242,239,181,181,153],
      "FRI":[144,130,108,97,85,66,72,62,61,72,63,55,58,64,71,81,83,120,195,246,289,374,497,597,520,566,667,967,899,1052,1175,1269,1110,989,883,1038,776,839,804,933,853,960,1279,1372,1316,1426,1477,1518,1594,1552,1605,1650,1616,1530,1478,1268,1585,1706,1651,1690,1733,1862,1303,1594,830,1658,1586,2035,1810,2135,2014,1846,1766,1494,1592,1340,1385,1440,1344,1076,955,1086,871,929,921,853,877,872,896,749,657,581,515,446,413,379],
      "SAT":[336,314,278,232,212,173,192,173,166,119,121,102,93,83,96,84,94,83,152,171,183,225,302,356,306,336,443,579,581,716,831,1019,893,1033,1141,1316,1161,1394,1397,1514,1534,1647,1675,1677,1795,1814,1836,1855,1847,1953,1847,1815,1853,1850,1728,1727,1781,1815,1794,1779,1723,1790,1730,1687,1643,1638,1601,1697,1665,1497,1524,1519,1518,1461,1380,1374,1225,1191,1147,1048,1015,985,873,861,794,785,709,697,702,701,560,527,496,470,433,392]
    };

    var container = d3.select('#dowChart');
    var graphElement  = container.append('div');
    var sliderElement = container.append('div');

    var colors = d3.scale.category20();

    var graphData = d3.entries(countsPerDay15MinInterval)
        .map(function(entry,i){
          return {
            name:entry.key,
            color:colors(i),
            data:entry.value.map(function(d,i){
              return { y:d, x:i };
            })
          }
        });

    var graph = new Rickshaw.Graph({
      element: graphElement.node(),
      width: window.innerWidth - 20,
      height: window.innerHeight / 2 - 100,
      series: graphData,
      preserve: true
    });

    var xAxis = new Rickshaw.Graph.Axis.X({
      graph: graph,
      tickFormat: tickFormat
    });

    var yAxis = new Rickshaw.Graph.Axis.Y({
      graph:graph
    });

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
      graph:graph,
      xFormatter:tickFormat
    });

    var slider = new Rickshaw.Graph.RangeSlider.Preview({
      graph: graph,
      element: sliderElement.node()
    });

    graph.render();

    function tickFormat(d){
      var date = new Date(0);
      date.setUTCMinutes(d * 15);
      return d3.time.format.utc('%H:%M')(date);
    }

    $(window).on('resize', function(){
      graph.configure({
        width: window.innerWidth - 20,
        height: window.innerHeight / 2 - 100
      });
      graph.render();
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="css/rickshaw.css">
	<style> body{ margin: 10px; padding: 0 } </style>
	</head>
	<body>

	<div id="dowChart"></div>

	<script src="js/jquery.js"></script>
	<script src="js/d3.js" charset="utf-8"></script>
	<script src="js/rickshaw.js"></script>

	<script>
	var countsPerDay15MinInterval = {
	"SUN":[361,324,315,280,213,218,188,183,159,149,121,126,102,103,83,77,68,68,83,102,112,125,163,182,207,195,233,348,324,344,418,622,579,694,737,924,888,921,1089,1298,1179,1296,1410,1416,1366,1516,1512,1497,1445,1652,1607,1684,1579,1459,1545,1669,1504,1535,1552,1563,1597,1537,1512,1532,1497,1500,1526,1607,1437,1391,1374,1375,1351,1336,1243,1120,1067,978,927,835,774,807,668,583,526,501,504,438,370,371,297,260,234,212,181,160],
	"MON":[139,148,122,108,82,86,67,68,59,69,61,58,51,67,108,110,147,171,282,393,438,605,790,863,742,859,1061,1394,1309,1516,1836,1901,1753,1518,1332,1384,1179,1170,1094,1244,1132,1154,953,589,603,0,474,683,721,697,0,0,0,731,757,778,928,1033,1094,1125,1150,1225,1214,1282,1158,890,830,1386,1348,1376,1294,1319,1222,1138,1050,971,868,813,669,630,585,579,510,502,395,413,367,230,274,213,115,147,162,121,118,108],
	"TUE":[87,64,78,34,64,55,35,35,48,37,43,35,34,28,51,56,84,76,188,264,250,424,475,505,549,516,510,660,619,528,1178,839,1117,799,721,729,396,646,470,777,607,518,664,783,681,589,162,651,778,772,818,541,894,780,436,221,0,576,156,1169,996,793,418,804,613,0,0,874,933,1127,1117,1337,1674,1810,1664,1595,1404,1361,1116,969,807,877,731,752,821,658,487,538,477,393,298,278,271,180,210,201],
	"WED":[165,154,113,106,94,77,80,37,48,40,27,43,39,47,67,62,66,141,285,378,303,545,635,708,722,689,864,1218,1178,1366,1363,1246,1216,1439,1322,1382,1196,1264,1209,1303,1129,954,1153,1187,775,1232,1338,1331,1364,1473,1428,1373,1372,1546,1401,1524,1428,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1210,1870,1830,1657,1389,1386,1259,1100,984,1082,870,1004,925,827,676,564,572,494,438,336,307,263,242,209],
	"THU":[172,169,150,119,118,84,77,70,94,66,72,81,94,96,82,128,115,181,298,408,454,614,830,1019,823,932,1113,1499,1341,1575,1866,1908,1688,1568,1287,1358,1268,1166,1068,1217,1163,1230,1268,1265,1185,1303,1365,1480,1179,1351,1433,1404,1433,1502,1501,1656,1579,1731,823,846,852,920,855,1262,1185,1299,1006,1034,967,1440,1378,1391,1272,1276,1229,1122,1089,986,870,856,727,735,582,627,589,529,492,423,420,349,316,242,239,181,181,153],
	"FRI":[144,130,108,97,85,66,72,62,61,72,63,55,58,64,71,81,83,120,195,246,289,374,497,597,520,566,667,967,899,1052,1175,1269,1110,989,883,1038,776,839,804,933,853,960,1279,1372,1316,1426,1477,1518,1594,1552,1605,1650,1616,1530,1478,1268,1585,1706,1651,1690,1733,1862,1303,1594,830,1658,1586,2035,1810,2135,2014,1846,1766,1494,1592,1340,1385,1440,1344,1076,955,1086,871,929,921,853,877,872,896,749,657,581,515,446,413,379],
	"SAT":[336,314,278,232,212,173,192,173,166,119,121,102,93,83,96,84,94,83,152,171,183,225,302,356,306,336,443,579,581,716,831,1019,893,1033,1141,1316,1161,1394,1397,1514,1534,1647,1675,1677,1795,1814,1836,1855,1847,1953,1847,1815,1853,1850,1728,1727,1781,1815,1794,1779,1723,1790,1730,1687,1643,1638,1601,1697,1665,1497,1524,1519,1518,1461,1380,1374,1225,1191,1147,1048,1015,985,873,861,794,785,709,697,702,701,560,527,496,470,433,392]
	};

	var container = d3.select('#dowChart');
	var graphElement = container.append('div');
	var sliderElement = container.append('div');

	var colors = d3.scale.category20();

	var graphData = d3.entries(countsPerDay15MinInterval)
	.map(function(entry,i){
	return {
	name:entry.key,
	color:colors(i),
	data:entry.value.map(function(d,i){
	return { y:d, x:i };
	})
	}
	});

	var graph = new Rickshaw.Graph({
	element: graphElement.node(),
	width: window.innerWidth - 20,
	height: window.innerHeight / 2 - 100,
	series: graphData,
	preserve: true
	});

	var xAxis = new Rickshaw.Graph.Axis.X({
	graph: graph,
	tickFormat: tickFormat
	});

	var yAxis = new Rickshaw.Graph.Axis.Y({
	graph:graph
	});

	var hoverDetail = new Rickshaw.Graph.HoverDetail({
	graph:graph,
	xFormatter:tickFormat
	});

	var slider = new Rickshaw.Graph.RangeSlider.Preview({
	graph: graph,
	element: sliderElement.node()
	});

	graph.render();

	function tickFormat(d){
	var date = new Date(0);
	date.setUTCMinutes(d * 15);
	return d3.time.format.utc('%H:%M')(date);
	}

	$(window).on('resize', function(){
	graph.configure({
	width: window.innerWidth - 20,
	height: window.innerHeight / 2 - 100
	});
	graph.render();
	});
	</script>
	</body>
	</html>