The Data-Driven Web of Now Extending D3js Travis Smith Developer - - PowerPoint PPT Presentation

▶
the data driven web of now
SMART_READER_LITE
LIVE PREVIEW

The Data-Driven Web of Now Extending D3js Travis Smith Developer - - PowerPoint PPT Presentation

Nov 05, 2022 300 likes •764 views

The Data-Driven Web of Now Extending D3js Travis Smith Developer Evangelist Atlassian @TravisTheTechie The data-driven web @TravisTheTechie Quick demo time @TravisTheTechie the entire web is data driven @TravisTheTechie why do

slide-1
SLIDE 1

Travis Smith • Developer Evangelist • Atlassian • @TravisTheTechie

The Data-Driven Web of Now

Extending D3js

slide-2
SLIDE 2

@TravisTheTechie

The data-driven web

slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6

@TravisTheTechie

Quick demo time

slide-7
SLIDE 7

@TravisTheTechie

the entire web is data driven

slide-8
SLIDE 8

@TravisTheTechie

why do you care?

slide-9
SLIDE 9

@TravisTheTechie

templates

slide-10
SLIDE 10

mustache template

slide-11
SLIDE 11

react template

slide-12
SLIDE 12

underscore

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

slide-13
SLIDE 13

underscore

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

slide-14
SLIDE 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

slide-15
SLIDE 15

@TravisTheTechie

templates are simple
 when data is simple

slide-16
SLIDE 16

@TravisTheTechie

when is data simple?

slide-17
SLIDE 17

D3.js

slide-18
SLIDE 18

@TravisTheTechie

  • kay, great, how is

this different?

slide-19
SLIDE 19

@TravisTheTechie

markup is not data

slide-20
SLIDE 20

@TravisTheTechie

markup is not code

slide-21
SLIDE 21

@TravisTheTechie

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. “ ”

  • Edsger Dijkstra
slide-22
SLIDE 22

@TravisTheTechie

express your representations

slide-23
SLIDE 23

D3.js

slide-24
SLIDE 24

@TravisTheTechie

complicated, why is that better?

slide-25
SLIDE 25

@TravisTheTechie

the value of code, abstractions

slide-26
SLIDE 26

D3.js

slide-27
SLIDE 27

@TravisTheTechie

easier than, inline blocks, partials, or helpers

slide-28
SLIDE 28

@TravisTheTechie

Selection, enter, and exit

slide-29
SLIDE 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; });

slide-30
SLIDE 30

@TravisTheTechie

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

slide-31
SLIDE 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) + "%";});

slide-32
SLIDE 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; }

slide-33
SLIDE 33

@TravisTheTechie

chart .exit() .remove();

slide-34
SLIDE 34

@TravisTheTechie

You are now experts

slide-35
SLIDE 35

@TravisTheTechie

Extending

slide-36
SLIDE 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"]; });

slide-37
SLIDE 37

@TravisTheTechie

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

slide-38
SLIDE 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; };

slide-39
SLIDE 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"]; });

slide-40
SLIDE 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"] });

slide-41
SLIDE 41

@TravisTheTechie

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

slide-42
SLIDE 42

@TravisTheTechie

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

slide-43
SLIDE 43

@TravisTheTechie

Tools in hand, it’s demo time

slide-44
SLIDE 44

Questions & take aways

  • d3js.org
  • bit.ly/fowa2014-ed3
  • @TravisTheTechie
  • spkr8.com/t/38921

Thanks for coming!