Visualizations in Drupal with d3.js – Alan Sherry

1. 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 Visualizations in Drupal with d3.js – Alan Sherry • What this session will NOT cover • Writing javascript code for d3.js • Visualization tools for site builders

2. D3 module: Background

3. Quick/Easy/Free/Out-of-the-box =

4. Drupal Chart module • Old Google image API • Minimally maintained

5. Drupal Charts module • Ported to Drupal 7 in late July • Added Google support in late July

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

7. 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

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

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

10. Sample bar chart with the d3 module • $chart=array( • 'id' => 'visualization', • 'type' => 'BarChart', • 'legend' =>array( • 'Development', • 'QA', • 'Strategy', • 'Design', • ), • 'rows' =>array( • array('2010 - (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);

11. Sample bar chart with the d3 module

12. 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 = newArray(); 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]); } ...

13. Label format - Currency, percentages, etc.

14. Chart editor - https://code.google.com/apis/ajax/playground/?type=visualization#chart_editor

15. Chart editor - https://code.google.com/apis/ajax/playground/?type=visualization#chart_editor • 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); • }

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

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

18. D3 module: Getting Started

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

20. 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'

21. 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'

22. 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'

23. 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'

24. 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'

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

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

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

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

29. Conclusion / Next steps • 'A' solution not 'The' solution • UI tools • Testing / Contributors Alan Sherry alan.sherry@freeflowdigital.com d.o - asherry