В этой главе мы разработаем панель мониторинга в DC, щелкнув и выбрав диаграмму.
Рабочий пример
Теперь у нас есть фон и мы можем начать писать код. Он содержит следующие шаги —
Шаг 1: Добавить стили
Давайте добавим стили в 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>
Здесь мы назначили стили для диаграммы, верхней части сетки и элемента сетки.
Шаг 2. Создайте переменную
Давайте создадим переменную в DC, как показано ниже.
var barChart = dc.barChart('#line'); var pieChart = dc.pieChart('#pie'); var countChart = dc.dataCount("#mystats"); var gridChart = dc.dataGrid("#mygrid");
Здесь мы присвоили идентификатор переменной barChart в строке, id countChart — это mystats, pieChart — это pie, а идентификатор gridChart — это mygrid.
Шаг 3: Считайте данные
Прочитайте данные из файла people.csv, как показано ниже.
d3.csv("data/people.csv", function(errors, people) { var mycrossfilter = crossfilter(people); }
Если данных нет, то возвращается ошибка. Теперь присвойте данные перекрестному фильтру. Здесь мы использовали тот же файл people.csv , который мы использовали в наших предыдущих примерах построения диаграмм. Это выглядит как показано ниже.
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 ......................................... .........................................
Шаг 4: Установите размер для возраста
Вы можете установить размер, используя кодировку ниже.
var ageDimension = mycrossfilter.dimension(function(data) { return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) });
После назначения измерения сгруппируйте возраст, используя приведенную ниже кодировку.
var ageGroup = ageDimension.group().reduceCount();
Шаг 5: Установите размер для пола
Вы можете установить размер, используя кодировку ниже.
// gender dimension var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; }); var genderGroup = genderDimension.group().reduceCount();
Шаг 6: сгенерируйте гистограмму
Теперь сгенерируйте гистограмму, используя приведенную ниже кодировку.
barChart .width(400) .height(200) .x(d3.scale.linear().domain([15,70])) .yAxisLabel("Count") .xAxisLabel("Age") .elasticY(true) .elasticX(true) .dimension(ageDimension) .group(ageGroup);
Вот,
- Мы присвоили ширину графика 400 и высоту 200.
- Далее мы определили диапазон доменов как [15, 70].
- Мы установили метку оси X как возраст, а метку оси Y — количество.
- Мы указали функции эластичности Y и X как true.
Шаг 7: Генерация круговой диаграммы
Теперь сгенерируйте круговую диаграмму, используя приведенную ниже кодировку.
pieChart .width(200) .height(100) .dimension(genderDimension) .group(genderGroup);
Вот,
- Мы присвоили ширину графика 200 и высоту 100.
- Теперь сгруппируйте измерение по полу.
Шаг 8: Создать сетку и график
Теперь создайте сетку и посчитайте график, используя приведенную ниже кодировку.
countChart .dimension(mycrossfilter) .group(mycrossfilter.groupAll()); gridChart .dimension(ageDimension) .group(function (data) { return ~~((Date.now() - new Date(data.DOB)) / (31557600000)); })
Шаг 9: Отрисовать сетку и сосчитать
Теперь визуализируйте сетку и посчитайте, используя кодировку ниже.
.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();
Здесь мы отсортировали имя с помощью функции html () и, наконец, отредактировали диаграмму.
Шаг 10: Рабочий пример
Полный код выглядит следующим образом. Создайте веб-страницу dashboard.html и добавьте в нее следующие изменения.
<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>
Теперь запросите браузер, и мы увидим следующий ответ.
Вы можете проверить себя, нажав на панель, круговые диаграммы и посмотреть, как изменяются данные.