more stuff!

cheat-sheet.md

@@ -1,22 +1,46 @@
-# 1
-First append to body 
+This guide/presentation/demo contains material from [Let's make a bar
+chart](http://bost.ocks.org/mike/bar/),
+[Three little circles](http://bost.ocks.org/mike/circles/),
+[Thinking with joins](http://bost.ocks.org/mike/join/) and
+[How selections work](http://bost.ocks.org/mike/selection/).
+
+# What is d3 and why you should care
+D3 is a JavaScript library for manipulating documents based on data. With it you
+can bring any type of data to life in a modern web browser. It uses HTML, SVG
+and CSS putting an emphasis on web standards. You can use D3 to do virtually
+anything with your data. Create a table or make some fancy graphics with insane
+animations.
+
+But be aware this is JavaScript we're dealing with! (For fun, try to enter `[] +
+[]` or `[] + {}` or `{} + []` or `{} + {}` in a console in your browser. You'll
+be surprised of what it actually does!å)
+
+# HTML?
+The first thing we're going to do is looking at how you typically would modify a
+web page through some javascript. First up, from an empty `html` page, create a
+div and insert some text into it.
+
+Open up [1.html](1.html) in a web  browser and open the console (In Chrome you can
+open it by ⌥⌘J).
 ```javascript
 var div = document.createElement("div");
 div.innerHTML = "Hello, world!";
 document.body.appendChild(div);
 ```
 
+Now with HTML we can create nice little graphics with SVGs. We can modify the
+contents of the div we just created with a circle!
 
-Then let's create a circle. 
 ```javascript
-div.innerHTML = '<svg width="100" height="100"> <circle cx="30" cy="60" r="10"></circle></svg>' 
+div.innerHTML = '<svg width="100" height="100"> <circle cx="30" cy="60" r="10"></circle></svg>'
 ```
 
+Cool right? Next up: D3.
 
-# 2
 
-Using d3 to do the same thing as we did. With d3 we can handle groups of related
-elements called *selections*. 
+# D3
+Using d3 to do the same thing as we did.
+
 ```javascript
 var body = d3.select("body");
 var div = body.append("div");
@@ -28,49 +52,150 @@ Another nice thing about selections is *method chaining*
 var body = d3.select("body").append("div").html("Hello, mate!");
 ```
 
-Now, let's make some visual stuff! 
+What is really cool though is that with D3 modifying the DOM is pretty easy.
+First let's set up some more divs and I'll show you the power of D3. 
+
+```js
+for (var i = 0; i < 10; i++){
+    var div = document.createElement("div");
+    div.innerHTML = "Hello " + i;
+    document.body.appendChild(div);
+}
+```
+
+Normally, if we would like to make the text in these divs turn red, we would
+type something like:
+
+```js
+var divs = document.getElementsByTagName("div");
+for (j = 0; j < divs.length; j++){
+    var div = divs.item(j)
+    div.style.setProperty("color", "red", null);
+}
+```
+
+In D3 we have something that's called selections that can select and operate on
+arbitrary sets of elements. Let's turn the text blue. 
+
+```js
+d3.selectAll("div").style("color","blue");
+```
+
+
+
+Now, we'll go some more into the details of how selections work. 
+
+# Selections
+Before we continue I think we should have a look at how selections work. As you
+can see the web page contains a body with 4 div's. D3 is really about mapping
+data to something in the DOM, divs, svgs, anything. Selections are
+really just groups of arrays of things. Lets try to create
+some data that we can map to these divs:
+
+In the console type
+```js
+var div = d3.selectAll("div");
+```
+to get a selection containing all of the 4 divs on our page. Check it by
+inspecting the object it returned. Now, if we want to map some data to these
+elements, we need a dataset
+
+```js
+var dataset = [4,5,8,13]
+```
+
+Since we have got 4 items in the dataset array and 4 divs, each item should
+match its own div. Lets go ahead and join the the elements (divs) with data:
+
+```js
+var div = d3.selectAll("div").data(dataset);
+```
 
-# 3
+In D3 when you're joining elements to data by a key (in our case the index in
+the array will be the key) there are three outcomes:
 
+- Update. There was a matching element for a given datum (what we got now, every
+  element correspond to a datum)
+- Enter. There was no matching element for a given datum (if we had 4 div
+  elements, but 5 items in the dataset array, maybe we should create another
+  element for this datum?).
+- Exit. There was no matching datum for a given element (if we had 4 divs but
+  our dataset array only contained 3 items, could possibly remove a div?)
+
+
+These are returned by `div`, `div.enter()` and `div.exit()`
+respectively. Have a look at them in the console. You should find that `div`
+contains a group of 4 divs, and `div.enter()` and `div.exit()` are both empty.
+
+
+
+# .selectAll - Wat
+
+So what if we have a completely empty HTML page, but have some data to show? We
+create an array of some arbitrary numbers and want to create a paragraph for
+each of them. 
+
+```js
+var dataset = [4, 8, 15, 16, 23, 42]; 
+var p = d3.select("body").selectAll("p")
+    .data(dataset)
+```
+
+If we now have a look at `p`, `p.enter()` and  `p.exit()` we'll notice that only
+`p.enter()` has got any items. This is because there are no matching elements
+for any of the datum. 
+
+To make elements, we simply get the enter selection and create a `<p>` for each
+of them! 
+```js
+p.enter().append("p")
+        .text(function(d){
+            return "Hi, I'm number " + d;
+        });
+```
+
+
+
+# Circles
 
 Select them all
 ```javascript
 var circle = d3.selectAll("circle");
 ```
 
-New color and different radius 
+New color and different radius
 
 ```javascript
 circle.style("fill", "steelblue");
 circle.attr("r", 30);
-``` 
+```
 
-Dancing circles. 
+Dancing circles.
 
 ```javascript
 circle.attr("cx", function() { return Math.random() * 720; });
 ```
 
-We need data! Refresh 2.html. 
+We need data! Refresh 2.html.
 
 ```javascript
 var circle = d3.selectAll("circle");
 circle.data([20, 40, 70])
 ```
 
-Change their radius according to the data we entered. 
+Change their radius according to the data we entered.
 ```javascript
 circle.attr("r", function(d){return d;});
 ```
 
-Move them a bit from each other, note we're using the index. 
+Move them a bit from each other, note we're using the index.
 ```javascript
 circle.attr("cx", function(d,i){return i * 100 + 30;})
 ```
 
-What if we had more than 3 data elements? We need a new circle! 
+What if we had more than 3 data elements? We need a new circle!
 
-```javascript 
+```javascript
 var svg = d3.select("svg");
 
 var circle = svg.selectAll("circle").data([20, 40, 70, 90]);
@@ -79,72 +204,72 @@ var circleEnter = circle.enter().append("circle");
 
 ```
 
-Update the attributes, so that the new one will have them as well 
+Update the attributes, so that the new one will have them as well
 ```javascript
 circle.attr("r", function(d){return d/2;});
-circle.attr("cy", 60) 
+circle.attr("cy", 60)
 circle.attr("cx", function(d,i){return i * 100 + 30;});
 ```
 
-Now removing the last two items. 
+Now removing the last two items.
 ```javascript
 var circle = svg.selectAll("circle").data([20,40]);
-circle.exit().remove() 
+circle.exit().remove()
 ```
 
-# 4 
+# Circles complete
 
 Putting it all together
 
-```javascript 
+```javascript
 
-var svg = d3.select("svg") 
+var svg = d3.select("svg")
 
 var circle = svg.selectAll("circle")
     .data([20,40,70,90], function(d) { return d; });
 
 circle.enter().append("circle")
     .attr("r", function(d){return d/2;})
-    .attr("cy", 60) 
+    .attr("cy", 60)
     .attr("cx", function(d,i){return i * 100 + 30;});
 
 circle.exit().remove();
 ```
 
-# 5 Lets make a scatterplot! 
+# Lets make a scatterplot!
 
 First some data
 ```javascript
-    var dataset = [{x:10, y:10}, 
+    var dataset = [{x:10, y:10},
                     {x:20, y:80}]
-``` 
+```
 
-Make a *svg* thing where we can plot and that 
-```javascript 
+Make a *svg* thing where we can plot and that
+```javascript
     var svg = d3.select("body")
                 .append("svg")
                 .attr("width", "300")
-                .attr("height", "200"); 
+                .attr("height", "200");
 ```
 
-Now dataset! 
-```javascript 
+Now dataset!
+```javascript
     var circle = svg.selectAll("circle")
-                    .data(dataset) 
+                    .data(dataset)
 ```
 
 Surplus elements are removed since they end up in the exit selection
 ```javascript
-    circle.exit().remove() 
+    circle.exit().remove()
 ```
 
-New data and circles are added 
+New data and circles are added
 ```javascript
-    circle.enter().append("circle")   
+    circle.enter().append("circle")
           .attr("r", "3");
 ```
 
-Update the location of existing circles 
+Update the location of existing circles
 ```javascript
     circle.attr("cx", function(d) {
                 return d.x
@@ -154,4 +279,4 @@ Update the location of existing circles
           });
 ```
 
-What about axes? 
+What about axes?

4.html → circles_full.html

@@ -18,7 +18,7 @@
 
 
     var circle = svg.selectAll("circle")
-        .data([20,40,70,90], function(d) { return d; });
+        .data([20,40,70,90]);
 
     circle.enter().append("circle")
         .attr("r", function(d){return d/2;})
@@ -40,7 +40,7 @@
                     .attr("height", "120"); 
 
     var circle = svg.selectAll("circle")
-        .data([20,40,70,90], function(d) { return d; });
+        .data([20,40,70,90]);
 
     circle.enter().append("circle")
         .attr("r", function(d){return d/2;})

index.html

@@ -2,22 +2,23 @@
 <head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
-<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
+<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 
 <body>
-<h1> D3 Presentation </h1> 
+<h1> D3 Presentation </h1>
 
-<p> </p> 
+<p> </p>
+
+<ul>
+    <li> <a href="1.html">HTML?</a></li>
+    <li> <a href="d3.html">D3</a></li>
+    <li> <a href="selections.html">Selections, how do they work?</a></li>
+    <li> <a href="circles.html">Let's make some circles!</a></li>
+    <li> <a href="circles_full.html">Putting all of that together</a></li>
+    <li> <a href="scatter.html">Dataset and two circles</a></li>
 
-<ul> 
-    <li> <a href="1.html">HTML?</a></li> 
-    <li> <a href="2.html">D3</a></li> 
-    <li> <a href="3.html">Let's make some circles!</a></li> 
-    <li> <a href="4.html">Putting all of that together</a></li> 
-    <li> <a href="5.html">Dataset and two circles</a></li> 
-
 </ul>
-</body> 
+</body>
 </html>

select_all.html

@@ -0,0 +1,7 @@
+<html>
+<head>
+<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+</head>
+<body>
+</body>
+</html>

selections.html

@@ -0,0 +1,11 @@
+<html>
+<head>
+<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+</head>
+<body>
+<div></div> 
+<div></div> 
+<div></div> 
+<div></div> 
+</body>
+</html>