D3.js Hello World

D3 DataVisualization Cookbook Chapter 2

by Denise Nepraunig

HTML

<table class="table">
    <thead>
        <tr>
            <th>Time</th>
            <th>Type</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10:22</td>
            <td>Purchase</td>
            <td>$10.00</td>
        </tr>
        <tr>
            <td>12:12</td>
            <td>Purchase</td>
            <td>$12.50</td>
        </tr>
        <tr>
            <td>14:11</td>
            <td>Expense</td>
            <td>$9.70</td>
        </tr>
    </tbody>
</table>

CSS

.table-row-odd {
    background-color: gray;
}
.table-row-even {
    background-color: white;
}
td {
    padding: 15px;
}

JavaScript

var rows = d3.selectAll("tr");
var headerElement = rows[0][0];

console.log(rows);

d3.select(headerElement).attr("class", "table-header");

d3.select(rows[0][1]).attr("class", "table-row-odd");
d3.select(rows[0][2]).attr("class", "table-row-even");
d3.select(rows[0][3]).attr("class", "table-row-odd");