Data on the Web can be represented in a number of ways and is often represented in more than one way at once. Maintaining entire libraries of templates to support growing applications is become harder and harder as a result. In addition, the requirement that data be live is hampered by existing methodologies. We will work through using and extending D3js to expressively generate representations of data that can be updated live.

1. The Data-Driven Web of Now
Extending D3js
Travis Smith • Developer Evangelist • Atlassian • @TravisTheTechie

2. The data-driven web
@TravisTheTechie

6. @TravisTheTechie
Quick demo time

7. @TravisTheTechie
the entire web is
data driven

8. @TravisTheTechie
why do you care?

9. @TravisTheTechie
templates

10. mustache template

11. react template

12. underscore
Post by <%= post.get(‘author’) %>

13. underscore
<% if (post.get(‘author’) { %>
Post by <%= post.get(‘author’) %>
<% } %>

14. <% if (post.get(‘author’)) { %>
Post by
<% if (post.get(‘alink’)) { %>
<a href=“<%= post.get(‘alink’)”>
<% } %>
<%= post.get(‘author’) %>
<% if (post.get(‘alink’)) { %>
</a>
<% } %>
<% } %>
underscore

15. templates are simple
when data is simple
@TravisTheTechie

16. when is data simple?
@TravisTheTechie

17. D3.js

18. okay, great, how is
this different?
@TravisTheTechie

19. markup is not data
@TravisTheTechie

20. markup is not code
@TravisTheTechie

21. Being abstract is something profoundly
different from being vague… the
purpose of abstraction is not to be
vague, but to create a new semantic
level in which one can be absolutely
precise.
@TravisTheTechie
“
”
- Edsger Dijkstra

22. @TravisTheTechie
express your
representations

23. D3.js

24. complicated, why is
@TravisTheTechie
that better?

25. @TravisTheTechie
the value of code,
abstractions

26. D3.js

27. @TravisTheTechie
easier than, inline
blocks, partials, or
helpers

28. Selection, enter, and
@TravisTheTechie
exit

29. @TravisTheTechie
var chart = d3.select(".charts")
.selectAll("div")
.data(data, function(d) { return d.action; });
chart
.selectAll("span")
.text(function(d) { return d.action; });

30. @TravisTheTechie
chart
.enter()
.append("div")
.classed({ "bar-item": true })
.append("span");

31. @TravisTheTechie
var x = d3.scale.linear()
.domain([0, d3.sum(data,
function(d) { return d.value; })])
.range([0, 100]);
chart
.data(data,
function(d) { return d.action; });
chart
.style("width",
function(d) { return x(d.value) + "%";});

32. @TravisTheTechie
.charts .bar-item {
...
width: 0%;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}

33. @TravisTheTechie
chart
.exit()
.remove();

34. You are now experts
@TravisTheTechie

35. @TravisTheTechie
Extending

36. @TravisTheTechie
row.append("td").append('span')
.classed({'aui-avatar': true,
'aui-avatar-xsmall': true})
.append('span')
.classed({'aui-avatar-inner': true})
.append('img')
.attr('src', function(item) {
return item.avatarUrls["16x16"];
});

37. @TravisTheTechie
<td>
<span class="aui-avatar aui-avatar-xsmall">
<span class="aui-avatar-inner">
<img src="..." />
</span>
</span>
</td>

38. @TravisTheTechie
d3.selection.enter.prototype.appendSelector =
d3.selection.prototype.appendSelector =
function(selector) {
var self = this;
var selectorParts = selector.split(/([.#])/);
if (selectorParts.length == 0) return self;
self = self.append(selectorParts.shift());
while (selectorParts.length > 1) {
var selectorModifier = selectorParts.shift();
var selectorItem = selectorParts.shift();
if (selectorModifier === ".") {
self = self.classed(selectorItem, true);
} else if (selectorModifier === "#") {
self = self.attr('id', selectorItem);
}
}
return self;
};

39. @TravisTheTechie
row.append("td").append('span')
.classed({'aui-avatar': true,
'aui-avatar-xsmall': true})
.append('span')
.classed({'aui-avatar-inner': true})
.append('img')
.attr('src', function(item) {
return item.avatarUrls["16x16"];
});

40. @TravisTheTechie
row.append("td")
.appendSelector('span.aui-avatar.aui-avatar-xsmall')
.appendSelector('span.aui-avatar-inner')
.append('img')
.attr('src', function(item) { return
item.avatarUrls["16x16"] });

41. @TravisTheTechie
var projHeadRow =
projTable.append("thead").append("tr");
projHeadRow.append("th");
projHeadRow.append("th").text("Key");
projHeadRow.append("th").text("Name");

42. projHeadRow = projTable.createTableHeaderWithHeadings(
@TravisTheTechie
[
"",
"Key",
“Name"
]);

43. @TravisTheTechie
Tools in hand,
it’s demo time

44. Questions & take aways
• d3js.org
• bit.ly/fowa2014-ed3
• @TravisTheTechie
• spkr8.com/t/38921
Thanks for coming!