crossfilter y DC (kevinkraus92) by aaizemberg

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>