neilhawkins/gist:9069114

## gistfile1.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>

  <title>dc.js Experiment</title>

  <script src='bower_components/d3/d3.js' type='text/javascript'></script>
  <script src='bower_components/crossfilter/crossfilter.js' type='text/javascript'></script>
  <script src='dc.js' type='text/javascript'></script>
  <script src='bower_components/jquery/dist/jquery.js' type='text/javascript'></script>
  <script src='bower_components/bootstrap/dist/js/bootstrap.js' type='text/javascript'></script>

  <link href='bower_components/bootstrap/dist/css/bootstrap.css' rel='stylesheet' type='text/css'>
  <link href='bower_components/dcjs/dc.css' rel='stylesheet' type='text/css'>

  <style type="text/css"></style>
</head>

<body>

<div class='container' style='font: 12px sans-serif;'>
  <div class="row">
    <div class="col-md-12" id="monthly-change-chart">
      <h4>Monthly Circulation</h4>
    </div>
    <div class="col-md-12" id="yearly-total">
      <h4>Total sales</h4>
    </div>

  </div>
  <div class='row'>
    <div class='col-md-12'>
      <table class='table table-hover' id='circ-table-graph'>
        <thead>
          <tr class='header'>
            <th>Month</th>
            <th>Sales</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

<script>

var lineChart = dc.seriesChart("#monthly-change-chart");
var volumeChart = dc.barChart("#yearly-total");

var dataTable = dc.dataTable("#circ-table-graph");

d3.csv("news-csv.csv", function(error, data) {

  var dateFormat = d3.time.format("%d/%m/%Y");
  var numberFormat = d3.format("0,000");

  data.forEach(function(d) {
    d.dd = dateFormat.parse(d.date);
    d.month = d3.time.month(d.dd);
    d.sales = +d.sales;
  });

  var facts = crossfilter(data);
  var all = facts.groupAll();

  var paperDimension = facts.dimension(function(d) { return [d.paper, d.dd]; });

  var dateDimension = facts.dimension(function(d) {return d.dd; });

  var monthDimension = facts.dimension(function(d) {return d3.time.month(d.dd) });

  var months = facts.dimension(function (d) {
        var month = d.dd.getMonth();
        var name=["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"];
        return month+"."+name[month];
     });
    var monthGroup = months.group();

  // Groupings

  var salesByPaper = paperDimension.group().reduceSum(function(d) { return +d.sales; });

  var salesByMonth = monthDimension.group().reduceSum(function(d) { return +d.sales; });

  // Charts

  lineChart.width(960).height(600)
    .margins({top: 10, right: 50, bottom: 20, left: 50})
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .dimension(monthDimension)
    .group(salesByPaper)
    .brushOn(false)
    .rangeChart(volumeChart)
    .transitionDuration(1000)
    .seriesAccessor(function(d) {return d.key[0];})
    .keyAccessor(function(d) {return d.key[1];})
    .valueAccessor(function(d) {return d.value;})
    .legend(dc.legend().x(750).y(0).itemHeight(12).gap(7).horizontal(1).legendWidth(140).itemWidth(70))
    .x(d3.time.scale().domain([new Date(2000, 01, 01), new Date(2014, 06, 01)])) // scale and domain of the graph
    .xAxis();

  volumeChart.width(960).height(200)
    .margins({top: 10, right: 50, bottom: 20, left: 50})
    .centerBar(true)
    .gap(1)
    .elasticY(true)
    .dimension(monthDimension)
    .group(salesByMonth)
    .brushOn(true)
    .x(d3.time.scale().domain([new Date(2000, 01, 01), new Date(2014, 06, 01)]));

  // Table
  dataTable.width(960).height(800)
    .dimension(dateDimension)
    .group(function(d) {
               return d.paper;
           })
    .size(128)
    .columns([
      function(d) { return d.date; },
      function(d) { return d.sales; }
    ])
    .sortBy(function(d){ return d.dd; })
    .order(d3.descending);

  // Render Charts
  dc.renderAll();

});

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<meta charset='utf-8'>

	<title>dc.js Experiment</title>

	<script src='bower_components/d3/d3.js' type='text/javascript'></script>
	<script src='bower_components/crossfilter/crossfilter.js' type='text/javascript'></script>
	<script src='dc.js' type='text/javascript'></script>
	<script src='bower_components/jquery/dist/jquery.js' type='text/javascript'></script>
	<script src='bower_components/bootstrap/dist/js/bootstrap.js' type='text/javascript'></script>

	<link href='bower_components/bootstrap/dist/css/bootstrap.css' rel='stylesheet' type='text/css'>
	<link href='bower_components/dcjs/dc.css' rel='stylesheet' type='text/css'>

	<style type="text/css"></style>
	</head>

	<body>

	<div class='container' style='font: 12px sans-serif;'>
	<div class="row">
	<div class="col-md-12" id="monthly-change-chart">
	<h4>Monthly Circulation</h4>
	</div>
	<div class="col-md-12" id="yearly-total">
	<h4>Total sales</h4>
	</div>

	</div>
	<div class='row'>
	<div class='col-md-12'>
	<table class='table table-hover' id='circ-table-graph'>
	<thead>
	<tr class='header'>
	<th>Month</th>
	<th>Sales</th>
	</tr>
	</thead>
	</table>
	</div>
	</div>
	</div>

	<script>

	var lineChart = dc.seriesChart("#monthly-change-chart");
	var volumeChart = dc.barChart("#yearly-total");

	var dataTable = dc.dataTable("#circ-table-graph");

	d3.csv("news-csv.csv", function(error, data) {

	var dateFormat = d3.time.format("%d/%m/%Y");
	var numberFormat = d3.format("0,000");

	data.forEach(function(d) {
	d.dd = dateFormat.parse(d.date);
	d.month = d3.time.month(d.dd);
	d.sales = +d.sales;
	});

	var facts = crossfilter(data);
	var all = facts.groupAll();

	var paperDimension = facts.dimension(function(d) { return [d.paper, d.dd]; });

	var dateDimension = facts.dimension(function(d) {return d.dd; });

	var monthDimension = facts.dimension(function(d) {return d3.time.month(d.dd) });

	var months = facts.dimension(function (d) {
	var month = d.dd.getMonth();
	var name=["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"];
	return month+"."+name[month];
	});
	var monthGroup = months.group();

	// Groupings

	var salesByPaper = paperDimension.group().reduceSum(function(d) { return +d.sales; });

	var salesByMonth = monthDimension.group().reduceSum(function(d) { return +d.sales; });

	// Charts

	lineChart.width(960).height(600)
	.margins({top: 10, right: 50, bottom: 20, left: 50})
	.chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
	.dimension(monthDimension)
	.group(salesByPaper)
	.brushOn(false)
	.rangeChart(volumeChart)
	.transitionDuration(1000)
	.seriesAccessor(function(d) {return d.key[0];})
	.keyAccessor(function(d) {return d.key[1];})
	.valueAccessor(function(d) {return d.value;})
	.legend(dc.legend().x(750).y(0).itemHeight(12).gap(7).horizontal(1).legendWidth(140).itemWidth(70))
	.x(d3.time.scale().domain([new Date(2000, 01, 01), new Date(2014, 06, 01)])) // scale and domain of the graph
	.xAxis();

	volumeChart.width(960).height(200)
	.margins({top: 10, right: 50, bottom: 20, left: 50})
	.centerBar(true)
	.gap(1)
	.elasticY(true)
	.dimension(monthDimension)
	.group(salesByMonth)
	.brushOn(true)
	.x(d3.time.scale().domain([new Date(2000, 01, 01), new Date(2014, 06, 01)]));

	// Table
	dataTable.width(960).height(800)
	.dimension(dateDimension)
	.group(function(d) {
	return d.paper;
	})
	.size(128)
	.columns([
	function(d) { return d.date; },
	function(d) { return d.sales; }
	])
	.sortBy(function(d){ return d.dd; })
	.order(d3.descending);

	// Render Charts
	dc.renderAll();

	});

	</script>

	</body>
	</html>