Skip to content

Instantly share code, notes, and snippets.

@kevinkraus92

kevinkraus92/index.html

Last active May 28, 2017 05:39
Show Gist options
  • Save kevinkraus92/b94d202ca510b88827d424b50fedad6f to your computer and use it in GitHub Desktop.
Save kevinkraus92/b94d202ca510b88827d424b50fedad6f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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-row-roles"></div>
<div id="chart-ring-year"></div>
<div id="chart-hist-hour"></div>
<div id="chart-row-spenders"></div>
<div id="monthly-volume-chart"></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 floorRingChart = dc.pieChart("#chart-ring-year"),
hourQuantityIdHistogram = dc.barChart("#chart-hist-hour"),
spenderRowChart = dc.rowChart("#chart-row-spenders"),
rolesRowChart = dc.rowChart("#chart-row-roles"),
volumeChart = dc.barChart('#monthly-volume-chart');
var employees = [
{macAddress: '1', Name: 'Developer', Piso: '2', Fecha: '11/11/2016', Hora: '17', Day: 'Lunes'},
{macAddress: '1', Name: 'Developer', Piso: '2', Fecha: '11/11/2016', Hora: '17', Day: 'Lunes'},
{macAddress: '2', Name: 'Developer', Piso: '2', Fecha: '11/11/2016', Hora: '10', Day: 'Lunes'},
{macAddress: '3', Name: 'Developer', Piso: '2', Fecha: '11/11/2016', Hora: '11', Day: 'Lunes'},
{macAddress: '4', Name: 'Developer', Piso: '2', Fecha: '11/11/2016', Hora: '12', Day: 'Lunes'},
{macAddress: '5', Name: 'RRHH', Piso: '4', Fecha: '11/11/2016', Hora: '13', Day: 'Lunes'},
{macAddress: '6', Name: 'RRHH', Piso: '4', Fecha: '11/11/2016', Hora: '13', Day: 'Lunes'},
{macAddress: '7', Name: 'RRHH', Piso: '4', Fecha: '11/11/2016', Hora: '13', Day: 'Martes'},
{macAddress: '8', Name: 'Ventas', Piso: '5', Fecha: '11/11/2016', Hora: '12', Day: 'Martes'},
{macAddress: '9', Name: 'Ventas', Piso: '6', Fecha: '11/11/2016', Hora: '12', Day: 'Martes'},
{macAddress: '10', Name: 'Ventas', Piso: '7', Fecha: '11/12/2016', Hora: '12', Day: 'Martes'},
{macAddress: '12', Name: 'Ventas', Piso: '7', Fecha: '12/12/2016', Hora: '12', Day: 'Lunes'},
{macAddress: '12', Name: 'Directorio', Piso: '2', Fecha: '12/12/2016', Hora: '12', Day: 'Lunes'},
{macAddress: '12', Name: 'Directorio', Piso: '5', Fecha: '12/12/2016', Hora: '12', Day: 'Martes'},
{macAddress: '3', Name: 'Developer', Piso: '2', Fecha: '12/12/2016', Hora: '9', Day: 'Lunes'},
{macAddress: '4', Name: 'Developer', Piso: '2', Fecha: '12/12/2016', Hora: '10', Day: 'Lunes'},
{macAddress: '5', Name: 'RRHH', Piso: '4', Fecha: '12/12/2016', Hora: '12', Day: 'Lunes'},
{macAddress: '6', Name: 'RRHH', Piso: '3', Fecha: '12/12/2016', Hora: '13', Day: 'Lunes'},
{macAddress: '7', Name: 'RRHH', Piso: '4', Fecha: '12/12/2016', Hora: '14', Day: 'Martes'},
{macAddress: '8', Name: 'Ventas', Piso: '5', Fecha: '12/12/2016', Hora: '15', Day: 'Martes'},
{macAddress: '9', Name: 'Ventas', Piso: '6', Fecha: '11/11/2016', Hora: '17', Day: 'Martes'},
{macAddress: '10', Name: 'Ventas', Piso: '7', Fecha: '11/11/2016', Hora: '17', Day: 'Martes'},
{macAddress: '11', Name: 'Ventas', Piso: '7', Fecha: '11/11/2016', Hora: '17', Day: 'Lunes'},
{macAddress: '12', Name: 'Directorio', Piso: '2', Fecha: '11/11/2016', Hora: '18', Day: 'Lunes'},
{macAddress: '12', Name: 'Directorio', Piso: '5', Fecha: '11/11/2016', Hora: '17', Day: 'Martes'},
{macAddress: '6', Name: 'RRHH', Piso: '3', Fecha: '11/11/2016', Hora: '13', Day: 'Miercoles'},
{macAddress: '7', Name: 'RRHH', Piso: '3', Fecha: '11/11/2016', Hora: '13', Day: 'Martes'},
{macAddress: '8', Name: 'Ventas', Piso: '3', Fecha: '11/11/2016', Hora: '12', Day: 'Martes'},
{macAddress: '9', Name: 'Ventas', Piso: '6', Fecha: '11/11/2016', Hora: '16', Day: 'Martes'},
{macAddress: '10', Name: 'Ventas', Piso: '7', Fecha: '11/11/2016', Hora: '14', Day: 'Jueves'},
{macAddress: '11', Name: 'Ventas', Piso: '7', Fecha: '11/11/2016', Hora: '14', Day: 'Miercoles'},
{macAddress: '12', Name: 'Directorio', Piso: '2', Fecha: '11/11/2016', Hora: '14', Day: 'Miercoles'},
{macAddress: '12', Name: 'Directorio', Piso: '5', Fecha: '11/11/2016', Hora: '15', Day: 'Jueves'},
{macAddress: '3', Name: 'Developer', Piso: '2', Fecha: '11/11/2016', Hora: '16', Day: 'Miercoles'},
{macAddress: '4', Name: 'Developer', Piso: '2', Fecha: '11/11/2016', Hora: '16', Day: 'Miercoles'},
{macAddress: '5', Name: 'RRHH', Piso: '4', Fecha: '11/11/2016', Hora: '11', Day: 'Miercoles'},
{macAddress: '6', Name: 'RRHH', Piso: '4', Fecha: '11/11/2016', Hora: '13', Day: 'Lunes'},
{macAddress: '7', Name: 'RRHH', Piso: '4', Fecha: '11/11/2016', Hora: '14', Day: 'Jueves'},
{macAddress: '8', Name: 'Ventas', Piso: '5', Fecha: '11/11/2016', Hora: '15', Day: 'Jueves'},
{macAddress: '9', Name: 'Ventas', Piso: '6', Fecha: '11/11/2016', Hora: '17', Day: 'Jueves'},
{macAddress: '10', Name: 'Ventas', Piso: '7', Fecha: '11/11/2016', Hora: '17', Day: 'Jueves'},
{macAddress: '11', Name: 'Ventas', Piso: '7', Fecha: '11/11/2016', Hora: '17', Day: 'Lunes'},
{macAddress: '12', Name: 'Directorio', Piso: '2', Fecha: '11/11/2016', Hora: '18', Day: 'Lunes'},
{macAddress: '12', Name: 'Directorio', Piso: '5', Fecha: '11/11/2016', Hora: '17', Day: 'Jueves'}
];
/*
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 dateFormat = d3.time.format('%d/%m/%Y');
employees.forEach(function (d) {
d.Fecha = dateFormat.parse(d.Fecha);
d.month = d3.time.month(d.Fecha);
});
var ndx = crossfilter(employees),
floorDim = ndx.dimension(function(d) {return d.Piso} )
yearDim = ndx.dimension(function(d) {return d.Fecha;}),
hourDim = ndx.dimension(function(d) {return parseInt(d.Hora);}),
dayDim = ndx.dimension(function(d) {return d.Day;}),
nameDim = ndx.dimension(function(d) {return d.Name;}),
monthlyDimension = ndx.dimension(function (d) { return d.month;}),
rolePerFloor = floorDim.group().reduceCount(function(d) {return d.Name;}),
dayReturn = dayDim.group().reduceCount(),
timeInFloor = hourDim.group().reduceCount(function(d) {return d.macAddress;}),
roleGroup = nameDim.group().reduceCount(),
volumeByMonthGroup = monthlyDimension.group().reduceCount();
;
/*
# 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:
*/
floorRingChart
.width(200).height(200)
.dimension(floorDim)
.group(rolePerFloor)
.innerRadius(40);
hourQuantityIdHistogram
.width(300).height(200)
.dimension(hourDim)
.group(timeInFloor)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.elasticX(true)
.elasticY(true);
hourQuantityIdHistogram.xAxis().tickFormat(function(d) {return d});
hourQuantityIdHistogram.yAxis().ticks(2);
spenderRowChart
.width(350).height(200)
.dimension(dayDim)
.group(dayReturn)
.elasticX(true);
rolesRowChart
.width(350).height(200)
.dimension(nameDim)
.group(roleGroup)
.elasticX(true);
volumeChart.width(990)
.height(70)
.margins({top: 0, right: 200, bottom: 20, left: 40})
.dimension(monthlyDimension)
.group(volumeByMonthGroup)
.centerBar(true)
.gap(1)
.x(d3.time.scale().domain([new Date(2016, 09, 10), new Date(2017, 04, 19)]))
.round(d3.time.month.round)
.alwaysUseRounding(true)
.xUnits(d3.time.months)
.yAxis().ticks(0);
dc.renderAll();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment