ndaly500/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a blank dc.js bl.ock template - please fork
this bl.ock when asking for help on Stack Overflow or the dc.js user group, or to demonstrate bugs when filing an issue on GitHub.
This was created with blockbuilder.org - you can use blockbuilder to fork and edit this bl.ock interactively. Or you can edit your fork using gist.github.com, or even clone the gist as a git repository.
See this block for a complete example, with data: dc.js example
forked from gordonwoodhull's block: dc/crossfilter simple
forked from anonymous's block: dc/crossfilter simple
forked from anonymous's block: dc/crossfilter simple

  
## data.csv
Name,Year,Spent,Speed,Run
A,2001,10,1,1,2
B,2002,20,2,2,3
C,2003,30,3,3,4
D,2004,20,4,4,5
E,2005,40,5,5,6
F,2006,50,6,6,7
G,2007,40,7,7,8
H,2008,20,8,8,9
I,2009,30,9,10,10
J,2010,40,10,11,11
K,2011,50,11,12,12
L,2012,60,12,13,13

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Line Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <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">
<script type="text/javascript" src="header.js"></script>
<div id="test"></div>

<div id="chart-ring-year" style="width:300px; height:300px"></div>
<div id="chart-hist-spend" style="width:300px; height:300px"></div>
<div id="chart-row-spenders"></div>

<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js">#

</script>
<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<script type="text/javascript">


    var yearRingChart   = dc.pieChart("#chart-ring-year");
    var spendHistChart  = dc.barChart("#chart-hist-spend");
    var spenderRowChart = dc.rowChart("#chart-row-spenders");
    var chart = dc.lineChart("#test");

  d3.csv("data.csv", function(error, experiments) {
  experiments.forEach(function(x) {
    x.Speed = +x.Speed;
  });
  var ndx                 = crossfilter(experiments),
      runDimension        = ndx.dimension(function(d) {return +d.Run;}),
      speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed;});
  chart
    .width(700)
    .height(200)
    .x(d3.scale.linear().domain([0,20]))
    .interpolate('step-before')
    .renderArea(true)
    .brushOn(false)
    .renderDataPoints(true)
    .clipPadding(10)
    .xAxisLabel("X")
    .yAxisLabel("Y")
    .dimension(runDimension)
    .group(speedSumGroup);
  chart.render();


});


  d3.csv('data.csv',function(data) {
      var cf = crossfilter(data);
      console.log(cf.size());
      console.log(data);
      var yearDim  = cf.dimension(function(d) {return +d.Year;});
      var spendDim = cf.dimension(function(d) {return +d.Spent;});
      var nameDim  = cf.dimension(function(d) {return d.Name;});

    	var spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;});
    	var spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;});
    	var spendHist    = spendDim.group().reduceCount();

      console.log(yearDim);

			yearRingChart
    	.dimension(yearDim)
    	.group(spendPerYear)
    	.innerRadius(40);

  		spendHistChart
    	.dimension(spendDim)
    	.group(spendHist)
    	.x(d3.scale.linear().domain([0,60]))
    	.elasticY(true);

      spenderRowChart
    	.dimension(nameDim)
    	.group(spendPerName)
    	.elasticX(true);

      spendHistChart.yAxis().ticks(10);

      dc.renderAll();

    });


</script>

</div>
</body>
</html>
	Name,Year,Spent,Speed,Run
	A,2001,10,1,1,2
	B,2002,20,2,2,3
	C,2003,30,3,3,4
	D,2004,20,4,4,5
	E,2005,40,5,5,6
	F,2006,50,6,6,7
	G,2007,40,7,7,8
	H,2008,20,8,8,9
	I,2009,30,9,10,10
	J,2010,40,10,11,11
	K,2011,50,11,12,12
	L,2012,60,12,13,13
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>dc.js - Line Chart Example</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<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">
	<script type="text/javascript" src="header.js"></script>
	<div id="test"></div>

	<div id="chart-ring-year" style="width:300px; height:300px"></div>
	<div id="chart-hist-spend" style="width:300px; height:300px"></div>
	<div id="chart-row-spenders"></div>

	<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
	<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js">#

	</script>
	<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
	<script type="text/javascript">



	var yearRingChart = dc.pieChart("#chart-ring-year");
	var spendHistChart = dc.barChart("#chart-hist-spend");
	var spenderRowChart = dc.rowChart("#chart-row-spenders");
	var chart = dc.lineChart("#test");

	d3.csv("data.csv", function(error, experiments) {
	experiments.forEach(function(x) {
	x.Speed = +x.Speed;
	});
	var ndx = crossfilter(experiments),
	runDimension = ndx.dimension(function(d) {return +d.Run;}),
	speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed;});
	chart
	.width(700)
	.height(200)
	.x(d3.scale.linear().domain([0,20]))
	.interpolate('step-before')
	.renderArea(true)
	.brushOn(false)
	.renderDataPoints(true)
	.clipPadding(10)
	.xAxisLabel("X")
	.yAxisLabel("Y")
	.dimension(runDimension)
	.group(speedSumGroup);
	chart.render();


	});


	d3.csv('data.csv',function(data) {
	var cf = crossfilter(data);
	console.log(cf.size());
	console.log(data);
	var yearDim = cf.dimension(function(d) {return +d.Year;});
	var spendDim = cf.dimension(function(d) {return +d.Spent;});
	var nameDim = cf.dimension(function(d) {return d.Name;});

	var spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;});
	var spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;});
	var spendHist = spendDim.group().reduceCount();

	console.log(yearDim);

	yearRingChart
	.dimension(yearDim)
	.group(spendPerYear)
	.innerRadius(40);

	spendHistChart
	.dimension(spendDim)
	.group(spendHist)
	.x(d3.scale.linear().domain([0,60]))
	.elasticY(true);

	spenderRowChart
	.dimension(nameDim)
	.group(spendPerName)
	.elasticX(true);

	spendHistChart.yAxis().ticks(10);

	dc.renderAll();

	});


	</script>

	</div>
	</body>
	</html>