-
-
Save aaizemberg/bf58f98d643b057857fe6bf4aca8f8a5 to your computer and use it in GitHub Desktop.
crossfilter y DC (kevinkraus92)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment