Skip to content

Commit

Permalink
added some more slides
Browse files Browse the repository at this point in the history
  • Loading branch information
@vogievetsky
vogievetsky committed Feb 15, 2012
1 parent 535c48a commit b3ef90a
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 21 deletions.
128 changes: 109 additions & 19 deletions index.html
View file
Expand Up @@ -96,7 +96,7 @@ <h2>Data Driven Documents</h2>
slide.code(title, rect3, function() {
svg.selectAll('rect')
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return i * 150 + 100; })
.attr('height', 20)
.style('fill', 'steelblue')
Expand All @@ -110,7 +110,7 @@ <h2>Data Driven Documents</h2>
svg.selectAll('rect')
.data([64, 128, 256])
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
Expand All @@ -125,7 +125,7 @@ <h2>Data Driven Documents</h2>

selection
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
Expand All @@ -137,7 +137,7 @@ <h2>Data Driven Documents</h2>

selection
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
Expand All @@ -156,14 +156,14 @@ <h2>Data Driven Documents</h2>

selection
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')

selection.enter().append('rect')
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue') // this doesn't look out of place
Expand All @@ -180,18 +180,18 @@ <h2>Data Driven Documents</h2>
// is joined in to the update selection
selection
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
});

slide.code(title + ' // a common pattern', empty_svg, function() {
svg.selectAll('rect')
.data([64, 128, 256, 71])
.data([64, 128, 256])
.enter().append('rect')
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
Expand All @@ -207,7 +207,7 @@ <h2>Data Driven Documents</h2>

selection
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
Expand All @@ -219,7 +219,7 @@ <h2>Data Driven Documents</h2>

selection
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
Expand All @@ -238,7 +238,7 @@ <h2>Data Driven Documents</h2>
.transition()
.duration(3000) // 3 seconds
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
Expand All @@ -259,7 +259,7 @@ <h2>Data Driven Documents</h2>
.transition()
.duration(3000)
.attr('x', 0)
.attr('y', function(d,i) { return i * 100; })
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
Expand All @@ -276,13 +276,103 @@ <h2>Data Driven Documents</h2>
.attr('opacity', 0)
.remove();
});
</script>

<section class="title">
<h1>Putting it all together</h1>
</section>
// -------------------------------------------------
slide.code_title(title = '.data(..., join)');

<script>
function init_svg(parent) {
empty_svg(parent);
svg.selectAll('rect')
.data([64, 128, 256])
.enter().append('rect')
.attr('x', 0)
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
}

slide.code(title, init_svg, function() {
// Let's say we start here:

// svg.selectAll('rect')
// .data([64, 128, 256])
// .enter().append('rect')
// .attr('x', 0)
// .attr('y', function(d,i) { return i * 100 + 50; })
// .attr('width', function(d,i) { return d; })
// .attr('height', 20)
// .style('fill', 'steelblue')

// And then we do this:

var selection = svg.selectAll('rect')
.data([128, 256, 71]) // <- incomplete?

selection.enter().append('rect')
.attr('x', 0)
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')

selection
.transition()
.duration(3000)
.attr('x', 0)
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')

selection.exit()
.remove()

// Note that String(5) === "5"
});

slide.code(title, init_svg, function() {
// Let's say we start here:

// svg.selectAll('rect')
// .data([64, 128, 256])
// .enter().append('rect')
// .attr('x', 0)
// .attr('y', function(d,i) { return i * 100 + 50; })
// .attr('width', function(d,i) { return d; })
// .attr('height', 20)
// .style('fill', 'steelblue')

// And then we do this:

var selection = svg.selectAll('rect')
.data([128, 256, 71], String)

selection.enter().append('rect')
.attr('x', 0)
.attr('y', function(d,i) { return (i+1) * 100 + 50; })
.attr('width', function(d,i) { return d; })
.attr('height', 20)
.style('fill', 'steelblue')
.style('opacity', 0)


selection
.transition()
.duration(3000)
.attr('y', function(d,i) { return i * 100 + 50; })
.attr('height', 20)
.style('opacity', 1)

selection.exit()
.transition()
.duration(3000)
.attr('y', function(d,i) { return (i-1) * 100 + 50; })
.style('opacity', 0)
.remove()

// Note that String(5) === "5"
});

slide.code('d3', empty_svg, function() {
// fill me
Expand All @@ -300,7 +390,7 @@ <h1>Putting it all together</h1>

<section class="image2">
<h1>Where to learn more about SVG?</h1>
FILL ME
Fill me with SVG book slide and inspect screeenshot
</section>

<section class="title">
Expand Down
6 changes: 4 additions & 2 deletions slide_maker.js
View file
Expand Up @@ -11,8 +11,10 @@
.split('\n');

// remove common pre-space
var minSpace = d3.min(lines.map(function(line) { return line.match(/^\s*/)[0].length; }));
if (minSpace) {
var minSpace = d3.min(lines.map(function(line) {
return line ? line.match(/^\s*/)[0].length : Infinity;
}));
if (minSpace && isFinite(minSpace)) {
lines = lines.map(function(line) { return line.substr(minSpace); })
}

Expand Down

0 comments on commit b3ef90a

Please sign in to comment.