Создание визуализации данных в JavaScript с использованием Dimple и D3

Чтобы проиллюстрировать это, давайте обработаем первые три записи файла RCL_January_2015_clean.csv . Их можно сгруппировать в одну строку, утверждая, что J4500 от MCI 2013, 2014 и 2015 годов с одинаковыми годами производства имеют один и тот же дефект. Потенциальное количество затронутых единиц уже группирует эти три модели вместе в наборе данных.

Вот структура данных JSON, которую мы будем использовать:

 { "items": [ { "item": { "date": "", "models": [ "" ], "units": "", "defect": "", "consequence": "", "corrective": "" } } ] } 

После итерации этого процесса (и избежания двойных кавычек) у нас теперь есть CSV-файл RCL_January_2015_json.csv ( ссылка ). Для краткости наш рабочий пример покажет только первых трех создателей исходного файла (3 из 46).

Связывание данных с объектом D3

D3 обеспечивает встроенную поддержку форматов файлов данных, таких как CSV, TSV или JSON. Для извлечения файла выполняется Ajax-вызов, затем он анализируется и преобразуется в массив JavaScript. CSV-файл, который мы создали, можно получить с помощью следующего кода:

 d3.csv("RCL.csv", function (data) { // process the data }); 

Мы также можем определить массив JavaScript непосредственно в коде, что мы собираемся сделать здесь для целей нашей демонстрации CodePen. Структура данных была сохранена как можно ближе к массиву, который D3 создал бы из файла CSV.

 data = [ { 'Record creation date':'20150105', 'Maker':'MCI', 'Potential number of units affected':'109', 'JSON data': '{ "items":[ { "item": { "date":"January, 5 2015", "models":[ "J4500 (years 2013, 2014, 2015) ..." ], "units":"109", "defect":"...", "consequence":"...", "corrective":"..." } } ] }' }, ... ]; 

А теперь давайте окунемся!

 <div id="RecallsChart"></div> <div id="RecallDetails"></div> 

HTML- RecallsChart прост: два div, один для диаграммы ( RecallsChart ), другой для отображения дополнительной информации, если пользователь наводит курсор на одну из полос ( RecallDetails ).

 var svg = dimple.newSvg("#RecallsChart", 800, 560); var myChart = new dimple.chart(svg, data); myChart.setBounds(60, 30, 710, 355) 

Сначала мы добавляем объект SVG к элементу div, ссылаясь на него по его идентификатору. Затем мы связываем наши данные с нашей новой диаграммой, которая будет отображаться в SVG. Наконец, мы вручную устанавливаем границы диаграммы, чтобы правильно расположить ее в родительском элементе div.

 var x = myChart.addCategoryAxis("x", "Maker"); x.addOrderRule("Maker"); x.title = ''; 

Мы устанавливаем ось X диаграммы в поле Maker наших данных — мы используем метод addCategoryAxis поскольку создатели составляют категориальные данные. Мы упорядочиваем создателей в алфавитном порядке с addOrderRule метода addOrderRule и скрываем заголовок оси X (который был бы создателем), поскольку имена создателей не требуют пояснений.

 myChart.addLogAxis("y", "Potential number of units affected"); 

Мы устанавливаем ось Y диаграммы в поле « Potential Number of Units Affected наших данных. Мы могли бы использовать здесь метод addMeasureAxis , который определяет линейную ось из заданных значений, но, поскольку создатель Victory более чем в 20 раз превышает потенциальное количество затронутых единиц, чем MCI или Thor, результирующий столбец мог бы затмить два других , В этом случае логарифмическая шкала дает больше места для меньших значений, поэтому мы используем метод addLogAxis , который по умолчанию addLogAxis основанию 10.

 var mySeries = myChart.addSeries(["Maker", "JSON data"], dimple.plot.bar); 

Теперь, когда мы определили наши оси, мы можем связать их вместе для визуализации графики. Для этого мы выбираем гистограмму через dimple.plot.bar и привязываем ее к полю данных Maker . Второй элемент массива, JSON data , свяжет часть JSON наших данных с каждой полосой и позволит нам получить доступ к правильным данным при наведении курсора на мышку.

 mySeries.getTooltipText = function (e) { var datum = jQuery.parseJSON(e.aggField[1]); var titles = []; titles['date'] = 'Record creation date'; titles['units'] = 'Potential number of units affected'; titles['defect'] = 'Defect summary'; titles['consequence'] = 'Consequence summary'; titles['corrective'] = 'Corrective summary'; var html = ''; html += '<span class="maker">'+e.aggField[0]+'</span>'; html += '<br /><br />'; $.each(datum.items, function(index1, element) { $.each(element, function(index2, item) { $.each(item, function(key, value) { if (key === 'models') { if (value.length == 1) { html += '<strong>Model</strong>:'; } else { html += '<strong>Models</strong>:'; } html += '<ul>'; $.each(value, function(vk, val) { html += '<li>'+val+'</li>'; }); html += '</ul>'; } else { html += '<em>'+titles[key]+'</em>: '+value+'<br /><br />'; } }); }); }); $("#RecallDetails").html(html); return [ "Maker: " + e.aggField[0], "Potential number of units affected: " + parseInt(e.cy).toLocaleString('en') ]; }; 

По умолчанию всплывающие подсказки отображаются при наведении курсора мыши на единицу графика (здесь, столбец) и показывают данные осей и серий. В нашем случае: производитель (значение по оси x), потенциальное количество затронутых единиц (значение по оси y) и значение в виде простого текста наших JSON data .

Функция getTooltipText перегружена здесь, чтобы обработать данные JSON и отобразить их в другом элементе div. Он возвращает массив данных, которые мы хотим отобразить в виде всплывающей подсказки, а именно имя производителя (первое поле совокупности нашей строки данных) и количество затронутых единиц (которые мы получаем из оси Y и которые мы локализуем для общий английский формат чисел через встроенный метод toLocaleString JavaScript).

Но вернемся к разбору данных JSON.

 myChart.ease = "elastic"; myChart.draw(1000); 

 x.shapes.selectAll("text") .style("text-anchor", "end") .each(function () { var rec = this.getBBox(); d3.select(this) .attr("transform", "rotate(-90," + (rec.x + rec.width) + "," + (rec.y + (rec.height / 2)) + ") translate(5, 0)"); });