mahuntington
/
d3-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjustments to scatter plot

Browse Source
master
Matt Huntington 7 years ago
parent de4796da6c
commit a13fd4523e
4 changed files with 62 additions and 24 deletions
Show Stats Download Patch File Download Diff File

56
BUILD.md
Unescape View File

@ -570,26 +570,28 @@ Now our axes are complete:
## Display data in a table ## 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 ```html
<svg></svg> <body>
<table> <svg></svg>
<thead> <table>
<tr> <thead>
<th>id</th> <tr>
<th>date</th> <th>id</th>
<th>distance</th> <th>date</th>
</tr> <th>distance</th>
</thead> </tr>
<tbody> </thead>
</tbody> <tbody>
</table> </tbody>
<script src="d3.v5.min.js"></script> </table>
<script src="app.js" charset="utf-8"></script> <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 ```javascript
var createTable = function(){ var createTable = function(){
@ -604,14 +606,9 @@ var createTable = function(){
createTable(); createTable();
``` ```
And a little styling: Add some styling for the table at the bottom of `app.css`:
```css ```css
svg {
overflow: visible;
margin-bottom: 50px;
}
table, th, td { table, th, td {
border: 1px solid black; 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) ![](https://i.imgur.com/luGiAys.png)
## Create click handler ## Create click handler

8
examples/scatter_plot/app.css
Unescape View File

@ -4,7 +4,15 @@ circle {
} }
svg { svg {
overflow: visible; overflow: visible;
margin-bottom: 50px;
} }
body { body {
margin: 20px 40px; margin: 20px 40px;
} }
table, th, td {
border: 1px solid black;
}
th, td {
padding:10px;
text-align: center;
}

11
examples/scatter_plot/app.js
Unescape View File

@ -65,3 +65,14 @@ var leftAxis = d3.axisLeft(yScale);
d3.select('svg') d3.select('svg')
.append('g') .append('g')
.call(leftAxis); //no need to transform, since it's placed correctly initially .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();

11
examples/scatter_plot/index.html
Unescape View File

@ -7,6 +7,17 @@
</head> </head>
<body> <body>
<svg></svg> <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="https://d3js.org/d3.v5.min.js"></script>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>
</body> </body>

Write Preview
Loading…
Cancel
Save