aaizemberg/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ejemplo de uso de crossfilter y dc - Visualización de información 2016</title>
    <meta name="author" content="kevinkraus92">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.27/dc.min.css"/>
</head>
<body>

  <div id="chart-ring-year"></div>
  <div id="chart-hist-spend"></div>
  <div id="chart-row-spenders"></div>
  <div id="chart-box-plot"></div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.27/dc.min.js"></script>

<script>
var yearRingChart   = dc.pieChart("#chart-ring-year"),
    spendHistChart  = dc.barChart("#chart-hist-spend"),
    spenderRowChart = dc.rowChart("#chart-row-spenders"),
    mostExpensiveYear = dc.boxPlot("#chart-box-plot");

var spendData = [
    {Name: 'Jose', Spent: '$40', Year: 2011},
    {Name: 'Jose', Spent: '$40', Year: 2011},
    {Name: 'Jose', Spent: '$40', Year: 2011},
    {Name: 'Jose', Spent: '$70', Year: 2012},
    {Name: 'Jose', Spent: '$30', Year: 2011},
    {Name: 'Jose', Spent: '$30', Year: 2011},
    {Name: 'Jose', Spent: '$30', Year: 2014},
    {Name: 'Jose', Spent: '$70', Year: 2012},
    {Name: 'Pedro', Spent: '$10', Year: 2011},
    {Name: 'Pedro', Spent: '$20', Year: 2012},
    {Name: 'Pedro', Spent: '$50', Year: 2013},
    {Name: 'Pepe', Spent: '$40', Year: 2011},
    {Name: 'Pepe', Spent: '$30', Year: 2013}
];

//Mapeo por año
// 2011: 5
// 2012: 3
// 2013: 2
// 2014: 1

//Mapeo por nombre
// Jose: 6
// Pedro: 3
// Pepe: 2

//Mapeo por plata
// $10: 1
// $20: 1
// $30: 4
// $40: 2
// $50: 1
// $60: 0
// $70: 2

spendData.forEach(function(d) {
    d.Spent = d.Spent.match(/\d+/);
});

/*
	What is a dimension?

	Constructs a new dimension using the specified value accessor function. The function must return naturally-ordered values, i.e., values that behave correctly with respect to JavaScript's <, <=, >= and > operators. This typically means primitives: booleans, numbers or strings; however, you can override object.valueOf to provide a comparable value from a given object, such as a Date.
*/

var ndx = crossfilter(spendData),
    yearDim  = ndx.dimension(function(d) {return +d.Year;}),
    spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
    nameDim  = ndx.dimension(function(d) {return d.Name;}),
    spendPerYear = yearDim.group().reduceCount(function(d) {return +d.Spent;}),
    spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendHist    = spendDim.group().reduceCount(),

 spentArrayGroup   = nameDim.group().reduce(
        function(p,v) {
          p.push(v.Spent);
          return p;
        },
        function(p,v) {
          p.splice(p.indexOf(v.Spent), 1);
          return p;
        },
        function() {
          return [];
        }
      );

mostExpensiveYear
    .width(768)
    .height(480)
    .margins({top: 50, right: 50, bottom: 30, left: 50})
    .dimension(spendDim)
    .group(spentArrayGroup)
    .elasticX(true)
    .y(d3.scale.linear().domain([0, 100]));


/*
    # group.reduceSum(value)
		A convenience method for setting the reduce functions to sum records using the specified value accessor function; returns this group. For example, to group payments by type and sum by total:
*/
yearRingChart
    .width(200).height(200)
    .dimension(yearDim)
    .group(spendPerYear)
    .innerRadius(40);

spendHistChart
    .width(300).height(200)
    .dimension(spendDim)
    .group(spendHist)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .elasticX(true)
    .elasticY(true);


spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
spendHistChart.yAxis().ticks(2);

spenderRowChart
    .width(350).height(200)
    .dimension(nameDim)
    .group(spendPerName)
    .elasticX(true);

dc.renderAll();

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Ejemplo de uso de crossfilter y dc - Visualización de información 2016</title>
	<meta name="author" content="kevinkraus92">
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.27/dc.min.css"/>
	</head>
	<body>

	<div id="chart-ring-year"></div>
	<div id="chart-hist-spend"></div>
	<div id="chart-row-spenders"></div>
	<div id="chart-box-plot"></div>

	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.27/dc.min.js"></script>

	<script>
	var yearRingChart = dc.pieChart("#chart-ring-year"),
	spendHistChart = dc.barChart("#chart-hist-spend"),
	spenderRowChart = dc.rowChart("#chart-row-spenders"),
	mostExpensiveYear = dc.boxPlot("#chart-box-plot");

	var spendData = [
	{Name: 'Jose', Spent: '$40', Year: 2011},
	{Name: 'Jose', Spent: '$40', Year: 2011},
	{Name: 'Jose', Spent: '$40', Year: 2011},
	{Name: 'Jose', Spent: '$70', Year: 2012},
	{Name: 'Jose', Spent: '$30', Year: 2011},
	{Name: 'Jose', Spent: '$30', Year: 2011},
	{Name: 'Jose', Spent: '$30', Year: 2014},
	{Name: 'Jose', Spent: '$70', Year: 2012},
	{Name: 'Pedro', Spent: '$10', Year: 2011},
	{Name: 'Pedro', Spent: '$20', Year: 2012},
	{Name: 'Pedro', Spent: '$50', Year: 2013},
	{Name: 'Pepe', Spent: '$40', Year: 2011},
	{Name: 'Pepe', Spent: '$30', Year: 2013}
	];

	//Mapeo por año
	// 2011: 5
	// 2012: 3
	// 2013: 2
	// 2014: 1

	//Mapeo por nombre
	// Jose: 6
	// Pedro: 3
	// Pepe: 2

	//Mapeo por plata
	// $10: 1
	// $20: 1
	// $30: 4
	// $40: 2
	// $50: 1
	// $60: 0
	// $70: 2

	spendData.forEach(function(d) {
	d.Spent = d.Spent.match(/\d+/);
	});

	/*
	What is a dimension?

	Constructs a new dimension using the specified value accessor function. The function must return naturally-ordered values, i.e., values that behave correctly with respect to JavaScript's <, <=, >= and > operators. This typically means primitives: booleans, numbers or strings; however, you can override object.valueOf to provide a comparable value from a given object, such as a Date.
	*/

	var ndx = crossfilter(spendData),
	yearDim = ndx.dimension(function(d) {return +d.Year;}),
	spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
	nameDim = ndx.dimension(function(d) {return d.Name;}),
	spendPerYear = yearDim.group().reduceCount(function(d) {return +d.Spent;}),
	spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
	spendHist = spendDim.group().reduceCount(),

	spentArrayGroup = nameDim.group().reduce(
	function(p,v) {
	p.push(v.Spent);
	return p;
	},
	function(p,v) {
	p.splice(p.indexOf(v.Spent), 1);
	return p;
	},
	function() {
	return [];
	}
	);

	mostExpensiveYear
	.width(768)
	.height(480)
	.margins({top: 50, right: 50, bottom: 30, left: 50})
	.dimension(spendDim)
	.group(spentArrayGroup)
	.elasticX(true)
	.y(d3.scale.linear().domain([0, 100]));


	/*
	# group.reduceSum(value)
	A convenience method for setting the reduce functions to sum records using the specified value accessor function; returns this group. For example, to group payments by type and sum by total:
	*/
	yearRingChart
	.width(200).height(200)
	.dimension(yearDim)
	.group(spendPerYear)
	.innerRadius(40);

	spendHistChart
	.width(300).height(200)
	.dimension(spendDim)
	.group(spendHist)
	.x(d3.scale.ordinal())
	.xUnits(dc.units.ordinal)
	.elasticX(true)
	.elasticY(true);


	spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
	spendHistChart.yAxis().ticks(2);

	spenderRowChart
	.width(350).height(200)
	.dimension(nameDim)
	.group(spendPerName)
	.elasticX(true);

	dc.renderAll();

	</script>
	</body>
	</html>