Skip to content
Browse files

misc updates

  • Loading branch information...
1 parent 8a8aea7 commit ea9a0c0ea896fb1ddb269d23555dd8028f0c68b4 @vogievetsky committed
Showing with 29 additions and 6 deletions.
  1. +8 −0 README.md
  2. +1 −1 index.html
  3. +16 −3 slides.coffee
  4. +4 −2 slides.js
View
8 README.md
@@ -0,0 +1,8 @@
+D3 slides in D3 that I put together after becoming frustrated with explaining D3 using PowerPoint.
+
+Questions, comments, contributions, feedback, etc.
+
+```javascript
+// base64 email for fun.
+sendEmailTo(atob("dmFkaW1Ab2dpZXZldHNreS5jb20="))
+```
View
2 index.html
@@ -14,7 +14,7 @@
<h2>Data Driven Documents</h2>
<a href="http://github.com/vogievetsky/IntroD3">http://github.com/vogievetsky/IntroD3</a>
<div class="name">Vadim Ogievetsky</div>
- <div class="date">Slides last updated: May 22, 2012</div>
+ <div class="date">Slides last updated: Oct 16, 2012</div>
</section>
<script src="slides.js"></script>
View
19 slides.coffee
@@ -42,23 +42,36 @@ slide.title "First, some JavaScript"
slide.code "JavaScript", null, """
// In JS functions are first class citizens.
// This is a very powerful concept!
-var squared = function(x) {
+function sq1(x) {
return x * x
}
-console.log("squared(7) ==", squared(7))
+var sq2 = function(x) {
+ return x * x
+}
+
+console.log("sq1(4) ==", sq1(4)) // == 16
+console.log("sq2(4) ==", sq2(4)) // == 16
+sq1.foo = 8
+sq2.bar = 3
+console.log("Wow dude:", sq1(sq1.foo + sq2.bar))
+"""
+
+slide.code "JavaScript", null, """
// D3 has many helper methods
// d3.scale.linear() returns a function that
// will map the given domain to the given
// range linearly.
var w = 640, h = 320
+// x is a function!
var x = d3.scale.linear()
.domain([-1, 1])
.range([0, w])
+// y is also a function!
var y = d3.scale.linear()
.domain([0, 1])
.range([0, h])
@@ -414,7 +427,7 @@ selection.exit()
"""
# -----------------------------------------------
-slide.title "Educational Examples"
+slide.title "Useful Examples"
slide.code "Shuffle", empty_svg, """
var cards = [
View
6 slides.js
@@ -22,7 +22,9 @@
slide.title("First, some JavaScript");
- slide.code("JavaScript", null, "// In JS functions are first class citizens.\n// This is a very powerful concept!\nvar squared = function(x) {\n return x * x\n}\n\nconsole.log(\"squared(7) ==\", squared(7))\n\n\n// D3 has many helper methods\n// d3.scale.linear() returns a function that\n// will map the given domain to the given\n// range linearly.\nvar w = 640, h = 320\n\nvar x = d3.scale.linear()\n .domain([-1, 1])\n .range([0, w])\n\nvar y = d3.scale.linear()\n .domain([0, 1])\n .range([0, h])\n\nconsole.log(\"x(0) ==\", x(0)) // == w/2\nconsole.log(\"y(3) ==\", y(3)) // == 3*h");
+ slide.code("JavaScript", null, "// In JS functions are first class citizens.\n// This is a very powerful concept!\nfunction sq1(x) {\n return x * x\n}\n\nvar sq2 = function(x) {\n return x * x\n}\n\nconsole.log(\"sq1(4) ==\", sq1(4)) // == 16\nconsole.log(\"sq2(4) ==\", sq2(4)) // == 16\n\nsq1.foo = 8\nsq2.bar = 3\n\nconsole.log(\"Wow dude:\", sq1(sq1.foo + sq2.bar))");
+
+ slide.code("JavaScript", null, "// D3 has many helper methods\n// d3.scale.linear() returns a function that\n// will map the given domain to the given\n// range linearly.\nvar w = 640, h = 320\n\n// x is a function!\nvar x = d3.scale.linear()\n .domain([-1, 1])\n .range([0, w])\n\n// y is also a function!\nvar y = d3.scale.linear()\n .domain([0, 1])\n .range([0, h])\n\nconsole.log(\"x(0) ==\", x(0)) // == w/2\nconsole.log(\"y(3) ==\", y(3)) // == 3*h");
slide.title("Core D3");
@@ -86,7 +88,7 @@
slide.code(title, init_svg, "// Start the same as before\n\nvar svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([61, 256, 71], String)\n\nselection.enter().append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) {\n return (i+1)*90+50\n })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n .style(\"opacity\", 0)\n\nselection\n .transition()\n .duration(3000)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"height\", 20)\n .style(\"opacity\", 1)\n\nselection.exit()\n .transition()\n .duration(3000)\n .attr(\"y\", function(d,i) {\n return (i-1)*90+50\n })\n .style(\"opacity\", 0)\n .remove()");
- slide.title("Educational Examples");
+ slide.title("Useful Examples");
slide.code("Shuffle", empty_svg, "var cards = [\n \"J\\u2665\", \"J\\u2666\", \"J\\u2663\", \"J\\u2660\",\n \"K\\u2665\", \"K\\u2666\", \"K\\u2663\", \"K\\u2660\",\n \"Q\\u2665\", \"Q\\u2666\", \"Q\\u2663\", \"Q\\u2660\",\n \"A\\u2665\", \"A\\u2666\", \"A\\u2663\", \"A\\u2660\"]\n\ncards.sort(function() {return Math.random()-.5})\n\nvar svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"text\")\n .data(cards, String)\n\nselection\n .transition()\n .duration(1000)\n .attr(\"y\", function(d,i) { return i*35+40 })\n\nselection.enter().append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", function(d,i) { return i*35+40 })\n .style(\"fill\", function(d) {\n return \"\\u2665\\u2666\".indexOf(d[1]) < 0 ?\n \"black\" : \"red\";\n })\n .style(\"font\", \"20px monospace\")\n .text(String)");

0 comments on commit ea9a0c0

Please sign in to comment.
Something went wrong with that request. Please try again.