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 [email protected] d.o - asherry
Top Related