in this chapter, we will develop a dashboard in dc by clicking and selecting a chart.
working example
now, we have the background and can start to write some code. it contains the following steps −
step 1: add styles
let us add styles in the css using the coding given below.
<style>
.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>
here, we have assigned styles for the chart, grid-top and the grid-item.
step 2: create a variable
let us create a variable in dc as shown below.
var barchart = dc.barchart('#line');
var piechart = dc.piechart('#pie');
var countchart = dc.datacount("#mystats");
var gridchart = dc.datagrid("#mygrid");
here, we have assigned a barchart variable id in line, countchart id is mystats, piechart is pie and gridchart id is mygrid.
step 3: read the data
read the data from the people.csv file as shown below.
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
if the data is not present, then it returns an error. now, assign the data to a crossfilter. here, we have used the same people.csv file, which we have used in our previous charting examples. it looks as shown below.
id,name,gender,dob,maritalstatus,creditcardtype 1,damaris,female,1973-02-18,false,visa-electron 2,barbe,female,1969-04-10,true,americanexpress 3,belia,female,1960-04-16,false,maestro 4,leoline,female,1995-01-19,true,bankcard 5,valentine,female,1992-04-16,false, 6,rosanne,female,1985-01-05,true,bankcard 7,shalna,female,1956-11-01,false,jcb 8,mordy,male,1990-03-27,true,china-unionpay ......................................... .........................................
step 4: set the dimension for age
you can set the dimension using the coding below.
var agedimension = mycrossfilter.dimension(function(data) {
return ~~((date.now() - new date(data.dob)) / (31557600000))
});
after the dimension has been assigned, group the age using the coding given below.
var agegroup = agedimension.group().reducecount();
step 5: set the dimension for gender
you can set the dimension using the coding below.
// gender dimension
var genderdimension = mycrossfilter.dimension(function(data) { return data.gender; });
var gendergroup = genderdimension.group().reducecount();
step 6: generate a bar chart
now, generate a bar chart using the coding below.
barchart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yaxislabel("count")
.xaxislabel("age")
.elasticy(true)
.elasticx(true)
.dimension(agedimension)
.group(agegroup);
here,
- we have assigned the chart width as 400 and height as 200.
- next, we have specified the domain range as [15, 70].
- we have set the x-axis label as age and the y-axis label as count.
- we have specified the elasticy and x function as true.
step 7: generate a pie chart
now, generate a pie chart using the coding below.
piechart .width(200) .height(100) .dimension(genderdimension) .group(gendergroup);
here,
- we have assigned the chart width as 200 and height as 100.
- now, group the dimension by gender.
step 8: create the grid and count chart
now, create the grid and count the chart using the coding given below.
countchart
.dimension(mycrossfilter)
.group(mycrossfilter.groupall());
gridchart
.dimension(agedimension)
.group(function (data) {
return ~~((date.now() - new date(data.dob)) / (31557600000));
})
step 9: render the grid and count
now, render the grid and count using the coding below.
.size(100)
.htmlgroup (function(d) {
return 'age: ' + d.key +
'; count: ' + d.values.length +
' people'
})
.html (function(d) { return d.name; })
.sortby(function (d) {
return d.name;
})
.order(d3.ascending);
barchart.render();
piechart.render();
countchart.render();
gridchart.render();
here, we have sorted the name by using the html() function and have finally rendered the chart.
step 10: working example
the complete code is as follows. create a webpage dashboard.html and add the following changes to it.
<html>
<head>
<title>dc dashboard sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<style>
.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div style = "width: 600px;">
<div id = "mystats" class = "dc-data-count" style = "float: right">
<span class = "filter-count"></span> selected out of <span
class = "total-count"></span> | <a href = "javascript:dc.filterall();
dc.renderall();">reset all</a>
</div>
</div>
<div style = "clear: both; padding-top: 20px;">
<div>
<div id = "line"></div>
<div id = "pie"></div>
</div>
</div>
<div style = "clear: both">
<div class = "dc-data-grid" id = "mygrid"></div>
</div>
</div>
<script language = "javascript">
var barchart = dc.barchart('#line'); // , 'mychartgroup');
var piechart = dc.piechart('#pie'); //, 'mychartgroup');
var countchart = dc.datacount("#mystats");
var gridchart = dc.datagrid("#mygrid");
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
// age dimension
var agedimension = mycrossfilter.dimension(function(data) {
return ~~((date.now() - new date(data.dob)) / (31557600000))
});
var agegroup = agedimension.group().reducecount();
// gender dimension
var genderdimension = mycrossfilter.dimension(function(data) {
return data.gender;
});
var gendergroup = genderdimension.group().reducecount();
barchart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yaxislabel("count")
.xaxislabel("age")
.elasticy(true)
.elasticx(true)
.dimension(agedimension)
.group(agegroup);
piechart
.width(200)
.height(100)
.dimension(genderdimension)
.group(gendergroup);
countchart
.dimension(mycrossfilter)
.group(mycrossfilter.groupall());
gridchart
.dimension(agedimension)
.group(function (data) {
return ~~((date.now() - new date(data.dob)) / (31557600000));
})
.size(100)
.htmlgroup (function(d) {
return 'age: ' + d.key +
'; count: ' + d.values.length +
' people'
})
.html (function(d) { return d.name; })
.sortby(function (d) {
return d.name;
})
.order(d3.ascending);
barchart.render();
piechart.render();
countchart.render();
gridchart.render();
});
</script>
</body>
</html>
now, request the browser and we will see the following response.
you can check yourself by clicking bar, pie charts and see how the data changes.