Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

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

2 D3 module: Background

3 Project for a client: build a simple site. ● Prototype site ● Take in survey data ● Visualizations

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

5 A 'site' for sore eyes

6 Build a simple site, ex ce pt it ha s t o be ab le to ha ve special algorithims for dolphins to enter in special data that ● Complex user/form architecture ● Complex data entry workflow ● Shortened time for visualizations

7 Quick/Easy/Free/Out-of-the-box =

8 Drupal Chart module ● Old Google image API ● Minimally maintained

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

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/?type=visualization#chart_editor

21 var wrapper; function init() { wrapper = new google.visualization.ChartWrapper({ dataSourceUrl: 'https://spreadsheets.google.com/spreadsheet/tq?key=tnxuU73jT7eIL- aZke85e3A&pub=1&range=A1:E13',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); }

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

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 What this session will NOT cover ● Writing javascript code for d3.js ● Visualization tools for site builders."

Similar presentations


Ads by Google