The document discusses the use of D3.js for creating data-driven web applications, emphasizing the importance of data in modern web development and the advantages of using abstractions over traditional methods. It highlights practical examples of data visualization with D3, including code snippets that demonstrate how to manipulate and present data effectively. The content serves as a tutorial for developers looking to enhance their skills in data-driven web design using D3.js.

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!