gordonwoodhull · March 27, 2017 15:12
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" />
  <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
  <script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <style>
  </style>
 </head>

 <body>
  <div class="container">
    <h2>My Visualization </h2>


 <p>
    This has been implemented using dc.js is a javascript charting library with native <a href="http://square.github.com/crossfilter/">crossfilter</a>
    support and allowing highly efficient exploration on large multi-dimensional dataset (inspired by crossfilter's
    demo). It leverages <a href="http://d3js.org/">d3</a> engine to render charts in css friendly svg format. Charts
    rendered using dc.js are naturally data driven and reactive therefore providing instant feedback on user's
    interaction. The main objective of this project is to provide an easy yet powerful javascript library which can be
    utilized to perform data visualization and analysis in browser as well as on mobile device.
 </p>

 <h3>Example</h3>

 <p>
    The following charts provide a live example of dc.js used against Nasdaq 100 index for the last 27 years. (You
    can run this example completely off-line). Although it is just an example, using it you can
    already ask some quite interesting questions. If I am going to gamble whether Nasdaq 100 will gain or lose
    tomorrow what is my chance? Is Friday or Monday the most unlucky day for investors? Is spring better than winter to
    invest? Can you find the outliers? When did the outliers occur?

    Public data source: <a href="http://pitrading.com/free_market_data.htm" target="_blank">PiTrading.com</a>.
 </p>
    <h2>Nasdaq 100 Index 1985/11/01-2012/06/29</h2>
    <div class="row">
    <div id="yearly-bubble-chart" class="dc-chart">
        <strong>age</strong> (radius: fluctuation/index ratio, color: gain/loss)
        <a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();"
           style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
 </div>
 <br>
 <div class="row">
    <div id="gain-loss-chart">
        <strong>gender</strong>
        <a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
 	
  <div id="quarter-chart">
        <strong>value</strong>
        <a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
 <div id="day-of-week-chart">
        <strong>name</strong>
        <a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
 <div id="fluctuation-chart">
        <strong>age</strong>
        <span class="reset" style="display: none;">range: <span class="filter"></span></span>
        <a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
 <div class="row">
    <div id="monthly-move-chart">
        <strong>date</strong>
        <span class="reset" style="display: none;">range: <span class="filter"></span></span>
        <a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
           style="display: none;">reset</a>

        <div class="clearfix"></div>
    </div>
 </div>
 <div class="row">
    <div id="monthly-volume-chart">
    </div>
    <p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
 </div>
 <div class="row">
    <div>
        <div class="dc-data-count">
            <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a
                href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
        </div>
    </div>
    <table class="table table-hover dc-data-table">
    </table>
 </div>

  <div class="clearfix"></div> 
  <script>
 var gainOrLossChart = dc.pieChart('#gain-loss-chart');
 var fluctuationChart = dc.barChart('#fluctuation-chart');
 var quarterChart = dc.pieChart('#quarter-chart');
 var dayOfWeekChart = dc.rowChart('#day-of-week-chart');
 var moveChart = dc.lineChart('#monthly-move-chart');
 var volumeChart = dc.barChart('#monthly-volume-chart');
 var yearlyBubbleChart = dc.bubbleChart('#yearly-bubble-chart');
 var nasdaqCount = dc.dataCount('.dc-data-count');
 var nasdaqTable = dc.dataTable('.dc-data-table');
    
 d3.csv('data.csv', function (data) {
   var dateFormat = d3.time.format('%Y-%m-%dT%H:%M:%S.%L');
      var numberFormat = d3.format('.2f');





 data.forEach(function (d) {
 d.age=+d.age;
 d.gender=d.gender;
 d.value=+d.value;
 d.age=+d.age;
 d.name=d.name;
 var date = dateFormat.parse(d.date);
 if(!date) debugger;
 d.date = date;
 });

 //### Create Crossfilter Dimensions and Groups

    //See the [crossfilter API](https://github.com/square/crossfilter/wiki/API-Reference) for reference.
    var ndx= crossfilter(data);
    var all = ndx.groupAll();
 	
 	var yearlyDimension = ndx.dimension(function (d) {
        return d3.time.year(d.date).getFullYear();
    });
  d3.select('body').text('Hello world')
  
  
  
  
  
  
  
  
 });
  </script>
 </body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" />
	<script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
	<script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
	<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
	<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
	<script src="https://npmcdn.com/universe@latest/universe.js"></script>
	<style>
	</style>
	</head>

	<body>
	<div class="container">
	<h2>My Visualization </h2>


	<p>
	This has been implemented using dc.js is a javascript charting library with native <a href="http://square.github.com/crossfilter/">crossfilter</a>
	support and allowing highly efficient exploration on large multi-dimensional dataset (inspired by crossfilter's
	demo). It leverages <a href="http://d3js.org/">d3</a> engine to render charts in css friendly svg format. Charts
	rendered using dc.js are naturally data driven and reactive therefore providing instant feedback on user's
	interaction. The main objective of this project is to provide an easy yet powerful javascript library which can be
	utilized to perform data visualization and analysis in browser as well as on mobile device.
	</p>

	<h3>Example</h3>

	<p>
	The following charts provide a live example of dc.js used against Nasdaq 100 index for the last 27 years. (You
	can run this example completely off-line). Although it is just an example, using it you can
	already ask some quite interesting questions. If I am going to gamble whether Nasdaq 100 will gain or lose
	tomorrow what is my chance? Is Friday or Monday the most unlucky day for investors? Is spring better than winter to
	invest? Can you find the outliers? When did the outliers occur?

	Public data source: <a href="http://pitrading.com/free_market_data.htm" target="_blank">PiTrading.com</a>.
	</p>
	<h2>Nasdaq 100 Index 1985/11/01-2012/06/29</h2>
	<div class="row">
	<div id="yearly-bubble-chart" class="dc-chart">
	<strong>age</strong> (radius: fluctuation/index ratio, color: gain/loss)
	<a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();"
	style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	</div>
	<br>
	<div class="row">
	<div id="gain-loss-chart">
	<strong>gender</strong>
	<a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>

	<div id="quarter-chart">
	<strong>value</strong>
	<a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	<div id="day-of-week-chart">
	<strong>name</strong>
	<a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	<div id="fluctuation-chart">
	<strong>age</strong>
	<span class="reset" style="display: none;">range: <span class="filter"></span></span>
	<a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	<div class="row">
	<div id="monthly-move-chart">
	<strong>date</strong>
	<span class="reset" style="display: none;">range: <span class="filter"></span></span>
	<a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
	style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	</div>
	<div class="row">
	<div id="monthly-volume-chart">
	</div>
	<p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
	</div>
	<div class="row">
	<div>
	<div class="dc-data-count">
	<span class="filter-count"></span> selected out of <span class="total-count"></span> records \| <a
	href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
	</div>
	</div>
	<table class="table table-hover dc-data-table">
	</table>
	</div>

	<div class="clearfix"></div>
	<script>
	var gainOrLossChart = dc.pieChart('#gain-loss-chart');
	var fluctuationChart = dc.barChart('#fluctuation-chart');
	var quarterChart = dc.pieChart('#quarter-chart');
	var dayOfWeekChart = dc.rowChart('#day-of-week-chart');
	var moveChart = dc.lineChart('#monthly-move-chart');
	var volumeChart = dc.barChart('#monthly-volume-chart');
	var yearlyBubbleChart = dc.bubbleChart('#yearly-bubble-chart');
	var nasdaqCount = dc.dataCount('.dc-data-count');
	var nasdaqTable = dc.dataTable('.dc-data-table');

	d3.csv('data.csv', function (data) {
	var dateFormat = d3.time.format('%Y-%m-%dT%H:%M:%S.%L');
	var numberFormat = d3.format('.2f');





	data.forEach(function (d) {
	d.age=+d.age;
	d.gender=d.gender;
	d.value=+d.value;
	d.age=+d.age;
	d.name=d.name;
	var date = dateFormat.parse(d.date);
	if(!date) debugger;
	d.date = date;
	});

	//### Create Crossfilter Dimensions and Groups

	//See the [crossfilter API](https://github.com/square/crossfilter/wiki/API-Reference) for reference.
	var ndx= crossfilter(data);
	var all = ndx.groupAll();

	var yearlyDimension = ndx.dimension(function (d) {
	return d3.time.year(d.date).getFullYear();
	});
	d3.select('body').text('Hello world')








	});
	</script>
	</body>