More Table Madness
Explore techniques to improve D3 tables by adding new data columns, creating calculated fields, and sorting data. Understand how to style tables with borders and prettify headers to create more readable and visually appealing data presentations in your visualizations.
We'll cover the following...
Sorting, prettifying, and adding columns
When we last left our tables, they were happily producing a faithful list of the data points that we had in our graph.
But what if we wanted more?
Add another column of information
Firstly, let’s add another column of data to our table. To do this, we want to have something extra in our CSV file to use, so let’s resurrect our old friend data2.csv that we used for the graph with two lines previously. All we have to do to make this a reality is change the reference that loads data.csv to data2.csv here:
d3.csv("data2.csv").then(function(data) {
From here, it’s just a matter of adding in the extra column you want (in this case, it’s the open column) like so: