![Page 1: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/1.jpg)
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
![Page 2: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/2.jpg)
D3 module: Background
![Page 3: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/3.jpg)
Quick/Easy/Free/Out-of-the-box=
![Page 4: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/4.jpg)
Drupal Chart module
● Old Google image API● Minimally maintained
![Page 5: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/5.jpg)
Drupal Charts module
● Ported to Drupal 7 in late July● Added Google support in late July
![Page 6: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/6.jpg)
Drupal Google Chart Tools module
● GCT fully released in August, 2012● Project build date is July, 2012
![Page 7: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/7.jpg)
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
![Page 8: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/8.jpg)
Engine agnostic / Abstracted
● Module is usable with any chart engine● Consistent PHP API● No JS
![Page 9: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/9.jpg)
D3 module v1 (not really though)
● Basically what the charts module does now – except not releasable
● Incorporated d3 and google charts
![Page 10: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/10.jpg)
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);
![Page 11: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/11.jpg)
Sample bar chart with the d3 module
![Page 12: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/12.jpg)
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]); } ...
![Page 13: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/13.jpg)
Label format - Currency, percentages, etc.
![Page 14: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/14.jpg)
Chart editor - https://code.google.com/apis/ajax/playground/?type=visualization#chart_editor
![Page 15: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/15.jpg)
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);}
![Page 16: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/16.jpg)
Engine agnostic / Abstracted
● API changes often result in significant module rewrites● Some alterations and custom requests are simply not
possible● One chart per dataset
![Page 17: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/17.jpg)
D3 module v1 (the real one)
● Utilizes libraries module● Visualizations are libraries● Much less PHP, more JS
![Page 18: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/18.jpg)
D3 module: Getting Started
![Page 19: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/19.jpg)
Creating a custom visualization
$ mkdir d3.myvisualization
$ cd d3.myvisualization
![Page 20: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/20.jpg)
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'
![Page 21: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/21.jpg)
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'
![Page 22: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/22.jpg)
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'
![Page 23: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/23.jpg)
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'
![Page 24: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/24.jpg)
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'
![Page 25: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/25.jpg)
myvisualization.js
(function($) {
Drupal.d3.myvisualization = function (select, settings) {
// Your javascript code here
}
})(jQuery);
![Page 26: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/26.jpg)
Sample bar chart with the d3 module
$chart = array( 'id' => 'visualization', 'type' => 'myvisualization',);
return d3_draw($chart);
![Page 27: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/27.jpg)
Sample bar chart with the d3 module
$chart = array( 'id' => 'visualization', 'type' => 'myvisualization', 'myCustomVar' => 'myCustomVal',);
return d3_draw($chart);
![Page 28: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/28.jpg)
myvisualization.js
(function($) {
Drupal.d3.myvisualization = function (select, settings) {
var myCustomVar = settings.myCustomVar;
// Your javascript code here
}
})(jQuery);
![Page 29: Visualizations in Drupal with d3.js – Alan Sherry](https://reader035.vdocuments.us/reader035/viewer/2022062222/56815b11550346895dc8bb72/html5/thumbnails/29.jpg)
Conclusion / Next steps
● 'A' solution not 'The' solution● UI tools● Testing / Contributors
Alan Sherry [email protected] d.o - asherry