1. Visualizations in Drupal with d3.js – Alan Sherry
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
What this session will NOT cover
Writing javascript code for d3.js
Visualization tools for site builders
The d3 module, and visualizations in Drupal
Intermediate – Advanced coders, themers
Some module writing
Views not in its maturity

2. D3 module: Background
The 'why'

3. Project for a client: build a simple site.
Prototype site
Take in survey data
Visualizations
Break the mold
Step outside the box
Drupal site

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
Fairly easy API
Maybe ask if people have written d3.js code?
Examples impressive
Building blocks highly customizable – jQuery of data

5. A 'site' for sore eyes Heat maps, chord diagrams, scatter plots
The real goal

6. Build a simple site, except it has to be able to have special algorithims for dolphins to enter in special data that
Complex user/form architecture
Complex data entry workflow
Shortened time for visualizations
Ran into a number of hurdles
1) Project left no time to really focus on d3
Bulk of the visualizations needed to happen fast/out of the box

7. Quick/Easy/Free/Out-of-the-box=
2) Not a lot of support for other vis engines besides d3

8. Drupal Chart module Old Google image API Minimally maintained
Discovered the lack of support for google at the time

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
Ended up writing something similar to “google chart tools”
Needed to integrate d3.js and google charts in the same custom module

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/
Uses ChartWrapper, and ChartEditor classes.
Google chart tools always assumes DataTable.

21. Chart editor - https://code. google. com/apis/ajax/playground/
var wrapper;
function init() {
wrapper = new google.visualization.ChartWrapper({
dataSourceUrl: ' 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);
Uses ChartWrapper, and ChartEditor classes.
Google chart tools always assumes DataTable.

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
The 'why'

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