adjustments to scatter plot

7 years ago · a13fd4523e
parent de4796da6c
commit a13fd4523e
4 changed files with 62 additions and 24 deletions
--- a/BUILD.md
+++ b/BUILD.md
@ -570,11 +570,12 @@ 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 `<body>` tag in `index.html` look like this:

 ```html
-<svg></svg>
-<table>
+<body>
+    <svg></svg>
+    <table>
        <thead>
            <tr>
                <th>id</th>
@ -584,12 +585,13 @@ Just for debugging purposes, let's create a table which will show all of our dat
        </thead>
        <tbody>
        </tbody>
-</table>
-<script src="d3.v5.min.js"></script>
-<script src="app.js" charset="utf-8"></script>
+    </table>
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+    <script src="app.js" charset="utf-8"></script>
+</body>
 ```

-D3 can also be used to manipulate the DOM, just like jQuery.  Let's populate the `<tbody>` in that style:
+D3 can also be used to manipulate the DOM, just like jQuery.  Let's populate the `<tbody>` 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:
+
 ![](https://i.imgur.com/luGiAys.png)

 ## Create click handler
--- 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;
+}
--- 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();
--- a/examples/scatter_plot/index.html
+++ b/examples/scatter_plot/index.html
@ -7,6 +7,17 @@
    </head>
    <body>
        <svg></svg>
+        <table>
+            <thead>
+                <tr>
+                    <th>id</th>
+                    <th>date</th>
+                    <th>distance</th>
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script src="app.js" charset="utf-8"></script>
    </body>