Presentation is loading. Please wait.

Presentation is loading. Please wait.

Visualizations in Drupal with d3.js – Alan Sherry

Similar presentations


Presentation on theme: "Visualizations in Drupal with d3.js – Alan Sherry"— Presentation transcript:

1 Visualizations in Drupal with d3.js – Alan Sherry
What this session will cover Why we created the d3 module Choosing a visualization engine, and a visualization module in Drupal How to get started with the d3 Drupal module Next steps for d3.js and related modules What this session will NOT cover Writing javascript code for d3.js Visualization tools for site builders The d3 module, and visualizations in Drupal Intermediate – Advanced coders, themers Some module writing Views not in its maturity

2 D3 module: Background The 'why'

3 Project for a client: build a simple site.
Prototype site Take in survey data Visualizations Break the mold Step outside the box Drupal site

4 Project for a client: build a simple site.
Prototype site Take in survey data Visualizations D3.js Views integration UI tools for end user Bar, Column, Force directed graphs, Pie Fairly easy API Maybe ask if people have written d3.js code? Examples impressive https://github.com/mbostock/d3/wiki/Gallery Building blocks highly customizable – jQuery of data

5 A 'site' for sore eyes Heat maps, chord diagrams, scatter plots
The real goal

6 Build a simple site, except it has to be able to have special algorithims for dolphins to enter in special data that Complex user/form architecture Complex data entry workflow Shortened time for visualizations Ran into a number of hurdles 1) Project left no time to really focus on d3 Bulk of the visualizations needed to happen fast/out of the box

7 Quick/Easy/Free/Out-of-the-box
= 2) Not a lot of support for other vis engines besides d3 https://developers.google.com/chart/

8 Drupal Chart module Old Google image API Minimally maintained
Discovered the lack of support for google at the time

9 Drupal Charts module Ported to Drupal 7 in late July
Added Google support in late July

10 Drupal Google Chart Tools module
GCT fully released in August, 2012 Project build date is July, 2012

11 State of visualizations – End of 2012
Multiple advanced JS libraries Minimal integration with Drupal No integration with d3.js Focus on (vis) engine agnostic modules Ended up writing something similar to “google chart tools” Needed to integrate d3.js and google charts in the same custom module

12 Engine agnostic / Abstracted
Module is usable with any chart engine Consistent PHP API No JS

13 D3 module v1 (not really though)
Basically what the charts module does now – except not releasable Incorporated d3 and google charts

14 Sample bar chart with the d3 module
$chart = array( 'id' => 'visualization', 'type' => 'BarChart', 'legend' => array( 'Development', 'QA', 'Strategy', 'Design', ), 'rows' => array( array(' (Data only available after 3rd quarter)'), array('1st Quarter 2011'), array('2nd Quarter 2011'), array('3rd Quarter 2011'), array('4th Quarter 2011'), array('1st Quarter 2012'), ); // Generate random data, not really part of the API. for ($i = 0; $i < count($chart['rows']); $i++) { for ($j = 0; $j < 4; $j++) { array_push($chart['rows'][$i], rand(1, 70) * rand(1, 70)); } return d3_draw($chart);

15 Sample bar chart with the d3 module

16 Behind the scenes – taken from Google Chart Tools
// Create the data table. var data = new google.visualization.DataTable(); // OrgChart charts need a different format data table. if (settings.chart[chartId].chartType == "OrgChart") { data.addColumn('string', 'Title'); data.addColumn('string', 'Parent'); data.addColumn('string', 'ToolTip'); for ( var i in settings.chart[chartId].rows ) { var row = new Array(); row = [{v:settings.chart[chartId].rows[i][0], f:settings.chart[chartId].rows[i][1]}, settings.chart[chartId].rows[i][2], settings.chart[chartId].rows[i][3]]; data.addRows([row]); i = parseInt(i); data.setRowProperty(i, 'style', settings.chart[chartId].rows[i][4]); data.setRowProperty(i, 'selectedStyle', settings.chart[chartId].rows[i][5]); } else { data.addColumn('string', 'Label'); // Adding the colomns. // These are graphs titles. for (var col in settings.chart[chartId].columns) { data.addColumn('number', settings.chart[chartId].columns[col]); ...

17 Label format - Currency, percentages, etc.

18 Label formatting – Using the direct Google Charts API
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', ], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table( document.getElementById('numberformat_div')); var formatter = new google.visualization.NumberFormat( {prefix: '$', negativeColor: 'red', negativeParens: true} ); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true});

19 Label formatting – Using the direct Google Charts API
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', ], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table( document.getElementById('numberformat_div')); var formatter = new google.visualization.NumberFormat( {prefix: '$', negativeColor: 'red', negativeParens: true} ); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true});

20 Chart editor - https://code. google. com/apis/ajax/playground/
Uses ChartWrapper, and ChartEditor classes. Google chart tools always assumes DataTable.

21 Chart editor - https://code. google. com/apis/ajax/playground/
var wrapper; function init() { wrapper = new google.visualization.ChartWrapper({ dataSourceUrl: 'https://spreadsheets.google.com/spreadsheet/tq?key=tnxuU73jT7eIL- aZke85e3A&pub=1&range=A1:E13', containerId: 'visualization', chartType: 'LineChart' }); wrapper.draw(); } function openEditor() { // Handler for the "Open Editor" button. var editor = new google.visualization.ChartEditor(); google.visualization.events.addListener(editor, 'ok', function() { wrapper = editor.getChartWrapper(); wrapper.draw(document.getElementById('visualization')); editor.openDialog(wrapper); Uses ChartWrapper, and ChartEditor classes. Google chart tools always assumes DataTable.

22 Engine agnostic / Abstracted
API changes often result in significant module rewrites Some alterations and custom requests are simply not possible One chart per dataset

23 D3 module v1 (the real one)
Utilizes libraries module Visualizations are libraries Much less PHP, more JS

24 D3 module: Getting Started
The 'why'

25 Creating a custom visualization
$ mkdir d3.myvisualization $ cd d3.myvisualization

26 d3.myvisualization.libraries.info name = 'My Visualization'
files[js][] = 'myvisualization.js' files[js][] = 'data.json' files[css][] = 'myvisualization.css' version = 1 dependencies[] = d3 template = 'myvisualization'

27 d3.myvisualization.libraries.info name = 'My Visualization'
files[js][] = 'myvisualization.js' files[js][] = 'data.json' files[css][] = 'myvisualization.css' version = 1 dependencies[] = d3 template = 'myvisualization'

28 d3.myvisualization.libraries.info name = 'My Visualization'
files[js][] = 'myvisualization.js' files[js][] = 'data.json' files[css][] = 'myvisualization.css' version = 1 dependencies[] = d3 template = 'myvisualization'

29 d3.myvisualization.libraries.info name = 'My Visualization'
files[js][] = 'myvisualization.js' files[js][] = 'data.json' files[css][] = 'myvisualization.css' version = 1 dependencies[] = d3 template = 'myvisualization'

30 d3.myvisualization.libraries.info name = 'My Visualization'
files[js][] = 'myvisualization.js' files[js][] = 'data.json' files[css][] = 'myvisualization.css' version = 1 dependencies[] = d3 template = 'myvisualization'

31 myvisualization.js (function($) {
Drupal.d3.myvisualization = function (select, settings) { // Your javascript code here } })(jQuery);

32 Sample bar chart with the d3 module
$chart = array( 'id' => 'visualization', 'type' => 'myvisualization', ); return d3_draw($chart);

33 Sample bar chart with the d3 module
$chart = array( 'id' => 'visualization', 'type' => 'myvisualization', 'myCustomVar' => 'myCustomVal', ); return d3_draw($chart);

34 myvisualization.js (function($) {
Drupal.d3.myvisualization = function (select, settings) { var myCustomVar = settings.myCustomVar; // Your javascript code here } })(jQuery);

35 Conclusion / Next steps
'A' solution not 'The' solution UI tools Testing / Contributors Alan Sherry d.o - asherry


Download ppt "Visualizations in Drupal with d3.js – Alan Sherry"

Similar presentations


Ads by Google