// get the desired data for the exercice
desiredData = cars.map(d => {
var newd = {
name : d["Name"][0].toUpperCase() + d["Name"].slice(1), // conver to capital letters
year : d["Year"],
origin : d["Origin"],
cylinders : d["Cylinders"],
horsepower : d["Horsepower"],
weight : d["Weight_in_lbs"],
acceleration : d["Acceleration"],
}
return newd;
})
desiredDataOrigin = desiredData.filter(d => {
d !== null // avoid null data
return d.origin == selectedOrigin ;}) // filter by origin in selector
.sort((a,b) => {
return b.weight - a.weight;}) // We sort it by weight
.filter(d => d.horsepower >= selectedHorsepower[0] && d.horsepower <= selectedHorsepower[1]
);
origins = desiredData.map(car => {
var value = car['origin'];
return `<option value="${value}">${value}</option>`;
});
list = desiredDataOrigin.map(function (item) {
return '<li>' + '<b> ' + item['name']
+ '</b> (' + item['origin']
+ ', ' + item['year'] + ') - '
+ ' Horsepower: ' + item['horsepower']
+ ' - Weight: '+ item['weight']
+ '</ li>' ;
}).slice(0, 20);
// Build the html table
function table(data) {
let cols = Object.keys(data[0]);
//Map over columns, make headers,join into string
let headerRow = cols
.map(col => `<th>${col}</th>`)
.join("");
//map over array of json objs, for each row(obj) map over column values,
//and return a td with the value of that object for its column
//take that array of tds and join them
//then return a row of the tds
//finally join all the rows together
let rows = data
.map(row => {
let tds = cols.map(col => `<td>${row[col]}</td>`).join("");
return `<tr>${tds}</tr>`;
})
.join("");
//build the table
const table = `
<table>
<thead>
<tr>${headerRow}</tr>
<thead>
<tbody>
${rows}
<tbody>
<table>`;
return table;
}
// Source: https://dev.to/boxofcereal/how-to-generate-a-table-from-json-data-with-es6-methods-2eel
accelerationAvg = desiredDataOrigin.reduce((a,b) => a + b.acceleration, 0) / desiredDataOrigin.length
// reduce is used f
maxHorsepower = desiredDataOrigin.sort((a, b) => b.horsepower - a.horsepower)[0].horsepower
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.
