Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

slide tweaks

  • Loading branch information...
commit c442d05df576af9712172827eb7e8f4af562f67b 1 parent 18abbfa
@vogievetsky authored
View
1  deck/deck.css
@@ -8,6 +8,7 @@ section{width:1024px;height:768px;position:absolute;top:50%;left:50%;margin-left
section.main_title h2{margin-top:20px;font-size:56px;}
section.title h1{margin-top:310px;font-size:40px;}
section.top_title h1{margin-top:22px;margin-bottom:15px;font-size:36px;}
+section.top_title a{display:block;margin-top:30px;font-size:28px;}
section.code_title h1{font-family:"Courier New",monospace;margin-top:310px;font-size:42px;}
section.code_slide h1{font-family:"Courier New",monospace;margin-top:22px;font-size:36px;}
section.code_slide div.codes{position:absolute;left:10px;bottom:10px;right:517px;top:90px;}section.code_slide div.codes textarea{font-family:"Courier New",monospace;text-align:left;width:100%;height:100%;border:1px solid #ccc;font-size:16px;padding:4px 4px;resize:none;outline:none;white-space:pre;}section.code_slide div.codes textarea.init{display:none;}
View
6 deck/deck.less
@@ -118,6 +118,12 @@ section {
margin-bottom: 15px;
font-size: 36px;
}
+
+ a {
+ display: block;
+ margin-top: 30px;
+ font-size: 28px;
+ }
}
&.code_title {
View
9 index.html
@@ -14,12 +14,19 @@
<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">Feb 16, 2012</div>
+ <div class="date">Slides last updated: Feb 21, 2012</div>
</section>
<script src="slides.js"></script>
<section class="top_title">
+ <h1>Where to learn more about D3?</h1>
+ <a href="http://mbostock.github.com/d3/">http://mbostock.github.com/d3/</a>
+ <a href="http://groups.google.com/group/d3-js">http://groups.google.com/group/d3-js</a>
+ <a href="http://www.janwillemtulp.com/category/d3/">http://www.janwillemtulp.com/category/d3/</a>
+ </section>
+
+ <section class="top_title">
<h1>Where to learn more about SVG?</h1>
<img src="images/svgbook.png" alt="SVG Book"/>
<img src="images/inspect.png" alt="Chrome Inspect Element"/>
View
28 slides.coffee
@@ -133,7 +133,7 @@ slide.code title, rect3, """
var svg = d3.select("div.output svg")
svg.selectAll("rect")
- .data([64, 128, 256])
+ .data([127, 61, 256])
.attr("x", 0)
.attr("y", function(d,i) { return i*90+50 })
.attr("width", function(d,i) { return d; })
@@ -148,7 +148,7 @@ slide.code title, rect3, """
var svg = d3.select("div.output svg")
var selection = svg.selectAll("rect")
- .data([64, 128, 256, 71])
+ .data([127, 61, 256, 71])
selection
.attr("x", 0)
@@ -162,7 +162,7 @@ slide.code title, rect3, """
var svg = d3.select("div.output svg")
var selection = svg.selectAll("rect")
- .data([64, 128, 256, 71])
+ .data([127, 61, 256, 71])
selection
.attr("x", 0)
@@ -183,7 +183,7 @@ slide.code title, rect3, """
var svg = d3.select("div.output svg")
var selection = svg.selectAll("rect")
- .data([64, 128, 256, 71])
+ .data([127, 61, 256, 71])
selection
.attr("x", 0)
@@ -204,7 +204,7 @@ slide.code title, rect3, """
var svg = d3.select("div.output svg")
var selection = svg.selectAll("rect")
- .data([64, 128, 256, 71])
+ .data([127, 61, 256, 71])
// Shorter
selection.enter().append("rect")
@@ -225,7 +225,7 @@ slide.code title, empty_svg, """
var svg = d3.select("div.output svg")
svg.selectAll("rect")
- .data([64, 128, 256])
+ .data([127, 61, 256])
.enter().append("rect")
.attr("x", 0)
.attr("y", function(d,i) { return i*90+50 })
@@ -242,7 +242,7 @@ slide.code title, rect3, """
var svg = d3.select("div.output svg")
var selection = svg.selectAll("rect")
- .data([64, 128])
+ .data([127, 61])
selection
.attr("x", 0)
@@ -256,7 +256,7 @@ slide.code title, rect3, """
var svg = d3.select("div.output svg")
var selection = svg.selectAll("rect")
- .data([64, 128])
+ .data([127, 61])
selection
.attr("x", 0)
@@ -277,7 +277,7 @@ slide.code title, rect3, """
var svg = d3.select("div.output svg")
svg.selectAll("rect")
- .data([64, 128, 256])
+ .data([127, 61, 256])
.transition()
.duration(3000) // 3 seconds
.attr("x", 0)
@@ -291,7 +291,7 @@ slide.code title, rect3, """
var svg = d3.select("div.output svg")
var selection = svg.selectAll("rect")
- .data([64, 128, 256, 71])
+ .data([127, 61, 256, 71])
selection.enter().append("rect")
.attr("x", 200)
@@ -331,7 +331,7 @@ init_svg = ->
svg = d3.select("div.output").append("svg")
svg.selectAll("rect")
- .data([64, 128, 256])
+ .data([127, 61, 256])
.enter().append("rect")
.attr("x", 0)
.attr("y", (d,i) -> i*90+50)
@@ -345,7 +345,7 @@ var svg = d3.select("div.output svg")
// Let's say we start here:
/*
svg.selectAll("rect")
- .data([64, 128, 256])
+ .data([127, 61, 256])
.enter().append("rect")
.attr("x", 0)
.attr("y", function(d,i) { return i*90+50 })
@@ -356,7 +356,7 @@ svg.selectAll("rect")
// And then we do this:
var selection = svg.selectAll("rect")
- .data([128, 256, 71]) // <- incomplete?
+ .data([61, 256, 71]) // <- incomplete?
selection.enter().append("rect")
.attr("x", 0)
@@ -384,7 +384,7 @@ slide.code title, init_svg, """
var svg = d3.select("div.output svg")
var selection = svg.selectAll("rect")
- .data([128, 256, 71], String)
+ .data([61, 256, 71], String)
selection.enter().append("rect")
.attr("x", 0)
View
26 slides.js
@@ -26,32 +26,32 @@
slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nsvg.selectAll(\"rect\")\n .attr(\"width\", 100)\n .attr(\"height\", 100)\n .style(\"fill\", \"steelblue\")");
slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nsvg.selectAll(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) {\n return i*150+100;\n })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
slide.code_title(title = ".data()");
- slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nsvg.selectAll(\"rect\")\n .data([64, 128, 256])\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
+ slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nsvg.selectAll(\"rect\")\n .data([127, 61, 256])\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
slide.code_title(title = ".enter()");
- slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([64, 128, 256, 71])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
- slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([64, 128, 256, 71])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection.enter().append(\"rect\")\n .attr(\"x\", 10) // let\"s just put it somewhere\n .attr(\"y\", 10)\n .attr(\"width\", 30)\n .attr(\"height\", 30)\n .style(\"fill\", \"green\")");
- slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([64, 128, 256, 71])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection.enter().append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
- slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([64, 128, 256, 71])\n\n// Shorter\nselection.enter().append(\"rect\")\n\n// when updating the regular selection then\n// enter selection is joined in to the update\n// selection for convenience.\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
+ slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([127, 61, 256, 71])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
+ slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([127, 61, 256, 71])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection.enter().append(\"rect\")\n .attr(\"x\", 10) // let\"s just put it somewhere\n .attr(\"y\", 10)\n .attr(\"width\", 30)\n .attr(\"height\", 30)\n .style(\"fill\", \"green\")");
+ slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([127, 61, 256, 71])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection.enter().append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
+ slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([127, 61, 256, 71])\n\n// Shorter\nselection.enter().append(\"rect\")\n\n// when updating the regular selection then\n// enter selection is joined in to the update\n// selection for convenience.\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
title += " // a common pattern";
- slide.code(title, empty_svg, "var svg = d3.select(\"div.output svg\")\n\nsvg.selectAll(\"rect\")\n .data([64, 128, 256])\n .enter().append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
+ slide.code(title, empty_svg, "var svg = d3.select(\"div.output svg\")\n\nsvg.selectAll(\"rect\")\n .data([127, 61, 256])\n .enter().append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
slide.code_title(title = ".exit()");
- slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([64, 128])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
- slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([64, 128])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection.exit()\n .remove()");
+ slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([127, 61])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
+ slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([127, 61])\n\nselection\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection.exit()\n .remove()");
slide.code_title(title = ".transition()");
- slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nsvg.selectAll(\"rect\")\n .data([64, 128, 256])\n .transition()\n .duration(3000) // 3 seconds\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
- slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([64, 128, 256, 71])\n\nselection.enter().append(\"rect\")\n .attr(\"x\", 200)\n .attr(\"y\", 200)\n .attr(\"width\", 10)\n .attr(\"height\", 10)\n .style(\"fill\", \"red\")\n\nselection\n .transition()\n .duration(3000)\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n .transition()\n .duration(3000)\n .delay(3000)\n .style(\"fill\", \"green\")\n .attr(\"width\", function(d,i) {\n return d*1.5;\n })\n\nselection.exit()\n .attr(\"opacity\", 1)\n .transition()\n .duration(3000)\n .attr(\"opacity\", 0)\n .remove()");
+ slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nsvg.selectAll(\"rect\")\n .data([127, 61, 256])\n .transition()\n .duration(3000) // 3 seconds\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")");
+ slide.code(title, rect3, "var svg = d3.select(\"div.output svg\")\n\nvar selection = svg.selectAll(\"rect\")\n .data([127, 61, 256, 71])\n\nselection.enter().append(\"rect\")\n .attr(\"x\", 200)\n .attr(\"y\", 200)\n .attr(\"width\", 10)\n .attr(\"height\", 10)\n .style(\"fill\", \"red\")\n\nselection\n .transition()\n .duration(3000)\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n .transition()\n .duration(3000)\n .delay(3000)\n .style(\"fill\", \"green\")\n .attr(\"width\", function(d,i) {\n return d*1.5;\n })\n\nselection.exit()\n .attr(\"opacity\", 1)\n .transition()\n .duration(3000)\n .attr(\"opacity\", 0)\n .remove()");
slide.code_title(title = ".data(..., join)");
init_svg = function() {
var svg;
svg = d3.select("div.output").append("svg");
- return svg.selectAll("rect").data([64, 128, 256]).enter().append("rect").attr("x", 0).attr("y", function(d, i) {
+ return svg.selectAll("rect").data([127, 61, 256]).enter().append("rect").attr("x", 0).attr("y", function(d, i) {
return i * 90 + 50;
}).attr("width", function(d, i) {
return d;
}).attr("height", 20).style("fill", "steelblue");
};
- slide.code(title, init_svg, "var svg = d3.select(\"div.output svg\")\n\n// Let's say we start here:\n/*\nsvg.selectAll(\"rect\")\n .data([64, 128, 256])\n .enter().append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n*/\n\n// And then we do this:\nvar selection = svg.selectAll(\"rect\")\n .data([128, 256, 71]) // <- incomplete?\n\nselection.enter().append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection\n .transition()\n .duration(3000)\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection.exit()\n .remove()");
- 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([128, 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.code(title, init_svg, "var svg = d3.select(\"div.output svg\")\n\n// Let's say we start here:\n/*\nsvg.selectAll(\"rect\")\n .data([127, 61, 256])\n .enter().append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n*/\n\n// And then we do this:\nvar selection = svg.selectAll(\"rect\")\n .data([61, 256, 71]) // <- incomplete?\n\nselection.enter().append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection\n .transition()\n .duration(3000)\n .attr(\"x\", 0)\n .attr(\"y\", function(d,i) { return i*90+50 })\n .attr(\"width\", function(d,i) { return d; })\n .attr(\"height\", 20)\n .style(\"fill\", \"steelblue\")\n\nselection.exit()\n .remove()");
+ 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.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)");
slide.code("Shuffle (v2)", 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().duration(500)\n .attr(\"x\", function(d,i) {return (i%8)*30+30})\n .transition().duration(500).delay(500)\n .attr(\"y\", function(d,i) { return i*35+40 })\n .transition().duration(500).delay(1000)\n .attr(\"x\", 30)\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)");
Please sign in to comment.
Something went wrong with that request. Please try again.