diff --git a/BUILD.md b/BUILD.md
index a1932c2..0b653df 100644
--- a/BUILD.md
+++ b/BUILD.md
@@ -570,26 +570,28 @@ Now our axes are complete:
## Display data in a table
-Just for debugging purposes, let's create a table which will show all of our data:
+Just for debugging purposes, let's create a table which will show all of our data. Make your `` tag in `index.html` look like this:
```html
-
-
-
-
-
id
-
date
-
distance
-
-
-
-
-
-
-
-```
-
-D3 can also be used to manipulate the DOM, just like jQuery. Let's populate the `` in that style:
+
+
+
+
+
+
id
+
date
+
distance
+
+
+
+
+
+
+
+
+```
+
+D3 can also be used to manipulate the DOM, just like jQuery. Let's populate the `` in that style. Add the following to the bottom of `app.js`:
```javascript
var createTable = function(){
@@ -604,14 +606,9 @@ var createTable = function(){
createTable();
```
-And a little styling:
+Add some styling for the table at the bottom of `app.css`:
```css
-svg {
- overflow: visible;
- margin-bottom: 50px;
-}
-
table, th, td {
border: 1px solid black;
}
@@ -621,6 +618,17 @@ th, td {
}
```
+Adjust the CSS for `svg` to add a bottom margin. This will create some space between the graph and the table:
+
+```css
+svg {
+ overflow: visible;
+ margin-bottom: 50px;
+}
+```
+
+Now the browser should look like this:
+
## Create click handler
diff --git a/examples/scatter_plot/app.css b/examples/scatter_plot/app.css
index b8d5d37..1eaa0a4 100644
--- a/examples/scatter_plot/app.css
+++ b/examples/scatter_plot/app.css
@@ -4,7 +4,15 @@ circle {
}
svg {
overflow: visible;
+ margin-bottom: 50px;
}
body {
margin: 20px 40px;
}
+table, th, td {
+ border: 1px solid black;
+}
+th, td {
+ padding:10px;
+ text-align: center;
+}
diff --git a/examples/scatter_plot/app.js b/examples/scatter_plot/app.js
index f778dc2..1f1ad0e 100644
--- a/examples/scatter_plot/app.js
+++ b/examples/scatter_plot/app.js
@@ -65,3 +65,14 @@ var leftAxis = d3.axisLeft(yScale);
d3.select('svg')
.append('g')
.call(leftAxis); //no need to transform, since it's placed correctly initially
+
+var createTable = function(){
+ for (var i = 0; i < runs.length; i++) {
+ var row = d3.select('tbody').append('tr');
+ row.append('td').html(runs[i].id);
+ row.append('td').html(runs[i].date);
+ row.append('td').html(runs[i].distance);
+ }
+}
+
+createTable();
diff --git a/examples/scatter_plot/index.html b/examples/scatter_plot/index.html
index 9379eed..1c4d70a 100644
--- a/examples/scatter_plot/index.html
+++ b/examples/scatter_plot/index.html
@@ -7,6 +7,17 @@
+