Visualizations in Drupal with d3.js – Alan Sherry

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

D3 module: Background

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

Drupal Chart module

● Old Google image API● Minimally maintained

Drupal Charts module

● Ported to Drupal 7 in late July● Added Google support in late July

Drupal Google Chart Tools module

● GCT fully released in August, 2012● Project build date is July, 2012

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

Engine agnostic / Abstracted

● Module is usable with any chart engine● Consistent PHP API● No JS

D3 module v1 (not really though)

● Basically what the charts module does now – except not releasable

● Incorporated d3 and google charts

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);

Sample bar chart with the d3 module

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]); } ...

Label format - Currency, percentages, etc.

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

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);}

Engine agnostic / Abstracted

● API changes often result in significant module rewrites● Some alterations and custom requests are simply not

possible● One chart per dataset

D3 module v1 (the real one)

● Utilizes libraries module● Visualizations are libraries● Much less PHP, more JS

D3 module: Getting Started

Creating a custom visualization

$ mkdir d3.myvisualization

$ cd d3.myvisualization

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'

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'

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'

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'

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'

myvisualization.js

(function($) {

Drupal.d3.myvisualization = function (select, settings) {

// Your javascript code here

}

})(jQuery);

Sample bar chart with the d3 module

$chart = array( 'id' => 'visualization', 'type' => 'myvisualization',);

return d3_draw($chart);

Sample bar chart with the d3 module

$chart = array( 'id' => 'visualization', 'type' => 'myvisualization', 'myCustomVar' => 'myCustomVal',);

return d3_draw($chart);

myvisualization.js

(function($) {

Drupal.d3.myvisualization = function (select, settings) {

var myCustomVar = settings.myCustomVar;

// Your javascript code here

}

})(jQuery);

Conclusion / Next steps

● 'A' solution not 'The' solution● UI tools● Testing / Contributors

Alan Sherry alan.sherry@freeflowdigital.com d.o - asherry