Функции для работы с данными

При работе с данными мы можем полагаться на дополнительные функции, которые нам предлагает библиотека D3.js. Что представляют эти функции?

• d3.min(data): возвращает минимальное значение в массиве data

• d3.max: возвращает максимальное значение

• d3.extent: возвращает минимальное и максимальное значения в виде массива из двух элементов

• d3.sum: возвращает сумму всех элементов массива

• d3.median: возвращает медиану массива

• d3.mean: получает среднее значение

• d3.ascending / d3.descending: представляют функции, упорядочивающие массив по возрастанию / по убыванию

• d3.quantile: возвращает квантиль элементов массива, отсортированного по возрастанию

• d3.bisect: функция, которая возвращает позицию в отсортированном массиве, куда можно поместить определенный объект, не нарушая порядка возрастания.

• d3.nest: представляет функцию, которая преобразует некоторый массив объект в другую иерархическую структуру, более удобную для визуализации данных

Например, в javascript определен следующий код:

<script type="text/javascript">
var data = [3, 8, 21, 13, 1, 2, 5];
console.log('d3.max: ' + d3.max(data));
console.log('d3.min: ' + d3.min(data));
console.log('d3.extent: ' + d3.extent(data));
console.log('d3.sum: ' + d3.sum(data));
console.log('d3.median: ' + d3.median(data));
console.log('d3.mean: ' + d3.mean(data));
console.log('d3.quantile: ' + d3.quantile(data.sort(d3.ascending), 0.25));
console.log('d3.ascending: ' + data.sort(d3.ascending));
console.log('d3.descending: ' + data.sort(d3.descending));
console.log('d3.bisect: '+ d3.bisect(data.sort(d3.ascending), 11))
</script>

Тогда мы получим следующий вывод:

"d3.max: 21"
"d3.min: 1"
"d3.extent: 1,21"
"d3.sum: 53"
"d3.median: 5"
"d3.mean: 7.571428571428571"
"d3.quantile: 2.5"
"d3.ascending: 1,2,3,5,8,13,21"
"d3.descending: 21,13,8,5,3,2,1"
"d3.bisect: 5" // число 11 можно вставить на 5-ю позицию в отсортированном массиве

Отдельно разберем функцию nest, которая возвращает сгруппированные по определенному ключу данные:

var phones = [ {name: 'iPhone 6', price: 64, company: 'Apple'},
{name: 'iPhone 5s', price: 49, company: 'Apple'},
{name: 'iPad Air', price: 37, company: 'Apple'},
{name: 'Samsung Galaxy S5', price: 48, company:'Samsung'},
{name: 'Samsung Galaxy Note', price: 36, company:'Samsung'},
{name: 'Samsung Galaxy Tab 4', price: 28, company:'Samsung'}];

var nest = d3.nest().key(function (d) {
		return d.company;
}).entries(phones);

//специальная функция для вывода объектов
function printArray(nest) {

	nest.forEach(function (e) {
		if (e.key)
			console.log(e.key);
		else
			console.log(printObject(e));
		if (e.values)
			printArray(e.values);
	});
}
function printObject(obj) {
	var s = "{";
	for (var f in obj) {
		s += f + ": " + obj[f] + ", ";
	}
	s += "}";
	return s;
};

// печать данных
printArray(nest);

Каждый элемент массива phones имеет три свойства, и по свойству "company" мы проводим группировку. То есть в данном случае у нас будет две группы объектов.

Для группировки применяется функция d3.nest().key(...), которая возвращает свойство, служащее ключом. Сгруппированные наборы затем формируются с помощью функции entries().

Для вывода объектов используются две вспомогательные функции printArray() и printObject(). Итоговый вывод будет выглядеть следующим образом:

"Apple"
"{name: iPhone 6, price: 64, company: Apple, }"
"{name: iPhone 5s, price: 49, company: Apple, }"
"{name: iPad Air, price: 37, company: Apple, }"
"Samsung"
"{name: Samsung Galaxy S5, price: 48, company: Samsung, }"
"{name: Samsung Galaxy Note, price: 36, company: Samsung, }"
"{name: Samsung Galaxy Tab 4, price: 28, company: Samsung, }"