Published
Edited
Oct 5, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof PopulateTableExample = {
let produceList = [
{"name": "apple", "minCost": 2.43, "maxCost": 6.89, "averageCost": 4.1575},
{"name": "banana", "minCost": 0.23, "maxCost": 4.89, "averageCost": 1.6083333333333332},
{"name": "celery", "minCost": 1.99, "maxCost": 6.89, "averageCost": 4.733333333333333},
{"name": "zebra", "minCost": 12399.99, "maxCost": 39999.99, "averageCost": 26199.989999999998}
];
d3.select('#tableBody-example')
.selectAll('tr')
.data(produceList)
.join('tr')
.selectAll('td')
.data(d => [d.name, d.minCost, d.averageCost, d.maxCost])
.join('td')
.text(d => d);
// This could also be written as:
// let rowSelect = d3.select('#tableBody-example')
// .selectAll('tr')
// .data(produceList)
// .join('tr');
// let cellSelect = rowSelect.selectAll('td')
// .data(d => [d.name, d.minCost, d.averageCost, d.maxCost])
// .join('td')
// .text(d => d);
}
Insert cell
Insert cell
Insert cell
viewof PopulateTableExercise1 = {
let produceList = [
{"name": "apple", "costList": [3.32, 3.99, 2.43, 6.89]},
{"name": "banana", "costList": [1.32, 0.99, 1.43, 4.89, 0.79, 0.23]},
{"name": "celery", "costList": [5.32, 1.99, 6.89]},
{"name": "zebra", "costList": [12399.99, 39999.99]}
];
d3.select('#tableBody-exercise1')
.selectAll('tr')
.data(produceList)
.join('tr')
.selectAll('td')
.data(d =>
{
// TODO - update the body of the function to compute these stats for your table on the fly.
return []
})
.join('td')
.text(d => d);
}
Insert cell
Insert cell
Insert cell
viewof PopulateTableExample2 = {
let produceList = [
{"name": "banana", "minCost": 0.23, "maxCost": 4.89, "averageCost": 1.6083333333333332},
{"name": "apple", "minCost": 2.43, "maxCost": 6.89, "averageCost": 4.1575},
{"name": "celery", "minCost": 1.99, "maxCost": 6.89, "averageCost": 4.733333333333333},
{"name": "zebra", "minCost": 12399.99, "maxCost": 39999.99, "averageCost": 26199.989999999998}
];
let drawTable = (containerId) => {
let rowSelect = d3.select('#' + containerId)
.selectAll('tr')
.data(produceList)
.join('tr');
let cellSelect = rowSelect.selectAll('td')
.data(d => [d.name, d.minCost, d.averageCost, d.maxCost])
.join('td')
.text(d => d);
}
drawTable('tableBody-example2');
d3.select('#sort-product')
.on('click', () =>
{
produceList.sort((a, b) =>
{
if (a.name > b.name)
{
return 1;
}
else if (a.name < b.name) {
return -1;
}
return 0;
});
drawTable('tableBody-example2');
});
// TODO - Add a click handler to the "Sort by Min Cost" button so it sort sorts the table by the min cost column.
// TODO - if time: instead of just creating another anonymous function with hard-coded attributes. Make a generic function that either takes an attribute key, or accessor function so it is easy to sort on any attribute.

}
Insert cell
Insert cell
Insert cell
viewof PopulateTableExample3 = {
let produceList = [
{"name": "banana", "minCost": 0.23, "maxCost": 4.89, "averageCost": 1.6083333333333332},
{"name": "apple", "minCost": 2.43, "maxCost": 6.89, "averageCost": 4.1575},
{"name": "celery", "minCost": 1.99, "maxCost": 6.89, "averageCost": 4.733333333333333},
{"name": "zebra", "minCost": 12399.99, "maxCost": 39999.99, "averageCost": 26199.989999999998}
];
let rowSelect;
let cellSelect;
let drawTable = (containerId) => {
rowSelect = d3.select('#' + containerId)
.selectAll('tr')
.data(produceList)
.join('tr');
cellSelect = rowSelect.selectAll('td')
.data(d => [d.name, d.minCost, d.averageCost, d.maxCost])
.join('td')
.text(d => d);
}
drawTable('tableBody-example3');
d3.select('#highlight-cell')
.on('click', () =>
{
cellSelect.filter(d => d < 5)
.style('font-weight', 'bold');
});

// TODO - Add a click handler to the "Highlight rows..." button so that it sets the background color to the entire row if the maxCost attribute has a value less than 5.
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more