kevinkraus92 · April 27, 2017 01:50
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <title>Ejemplo de uso de dc.js Visualizacion de informacion 2016</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/kevinkraus92/cc5ac08b30c244e54e2c96bbe5fea110/raw/608ea6bc5564c9705a6b3c41281b5dddc84b8879/dc.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 type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
 <script type="text/javascript" src="https://cdn.rawgit.com/kevinkraus92/ccfc1f0fc79f8c4f21fb93fd836b3bb8/raw/25d3bf7c727efef76ffbf1d319ab3d40be070932/dc.js"></script>
 <script type="text/javascript">

 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: 7
 // 2012: 3
 // 2013: 2
 // 2014: 1

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

 //Mapeo por plata
 // $10: 1
 // $20: 1
 // $30: 4
 // $40: 4
 // $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);}),
    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});
 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 dc.js Visualizacion de informacion 2016</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/kevinkraus92/cc5ac08b30c244e54e2c96bbe5fea110/raw/608ea6bc5564c9705a6b3c41281b5dddc84b8879/dc.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 type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
	<script type="text/javascript" src="https://cdn.rawgit.com/kevinkraus92/ccfc1f0fc79f8c4f21fb93fd836b3bb8/raw/25d3bf7c727efef76ffbf1d319ab3d40be070932/dc.js"></script>
	<script type="text/javascript">

	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: 7
	// 2012: 3
	// 2013: 2
	// 2014: 1

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

	//Mapeo por plata
	// $10: 1
	// $20: 1
	// $30: 4
	// $40: 4
	// $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);}),
	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});
	spendHistChart.yAxis().ticks(2);

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

	dc.renderAll();

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