Question: Below the data table, create a basic stat display. Feel free to create any descriptive stats about the data. However, there should be at least
Below the data table, create a basic stat display. Feel free to create any descriptive stats about the data. However, there should be at least 4 different items. Also, the number should change as any rows disappear. If you successfully implemented the task (4), rows disappear whenever you click on the table. Whenever it disappears, the stats need to be updated accordingly. This function can be implemented using JavaScript.
For example, it can look like this:
* The total number of organizations: 12 * The number of unique countries: 5 * The number of High-Income countries: 9 * The number of organizations founded after 2000: 4
Here is my code so far! Please help!!
div {
margin-bottom: 20px;
}
table{
font-family: Times;
border: 2px solid black;
border-collapse: 2px;
max-width:
}
tr {
font-size: 14;
font-family: Times;
border: 2px solid black;
max-width:
}
td {
font-size: 14;
font-family: Times;
border: 2px solid black;
max-width:
}
th {
font-size: 18;
font-family: Times;
color: blue;
border: 3px solid black;
font-style: italic;
}
tr:hover {
background-color: purple;
}
// Don't copy this to any other places in this file. You can just use the "organizations" variable to do your assignment.
var organizations = [
{
"Region": "East Asia & Pacific",
"Country": "New Zealand",
"Country Income Level": "High income",
"Organization Name": "200 Square",
"Organization Type": "For-profit",
"Sectors": "Housing, construction & real estate",
"Description": "200 Square is an online real estate agent in New Zealand.",
"City": "Wellington",
"State/Region": "Wellington",
"Founding Year": 2010,
"Size": "1 to 10",
"Type of Data Used": "Housing, Education",
"profileID": "731"
},
{
"Region": "Europe & Central Asia",
"Country": "United Kingdom",
"Country Income Level": "High income",
"Organization Name": "21c Consultancy",
"Organization Type": "For-profit",
"Sectors": "IT and geospatial",
"Description": "21c is ICT innovation consultancy which advises international actors, institutions and governments around the world on technological trends which can affect the way they deliver services.",
"City": "London",
"State/Region": "",
"Founding Year": 2015,
"Size": "1 to 10",
"Type of Data Used": "",
"profileID": "1694"
},
{
"Region": "Europe & Central Asia",
"Country": "Russian Federation",
"Country Income Level": "High income",
"Organization Name": "2GIS",
"Organization Type": "For-profit",
"Sectors": "IT and geospatial",
"Description": "2GIS is a city information service combined with a map. ",
"City": "Novosibirsk",
"State/Region": "Novosibirsk Oblast",
"Founding Year": 1999,
"Size": "1000+",
"Type of Data Used": "Transportation, Geospatial, Business",
"profileID": "1025"
},
{
"Region": "North America",
"Country": "United States",
"Country Income Level": "High income",
"Organization Name": "2nd City Zoning",
"Organization Type": "Nonprofit",
"Sectors": "Housing, construction & real estate",
"Description": "An Open City App, 2nd City Zoning is an interactive map that lets you find out how your building is zoned, learn where to locate your business and explore zoning patterns throughout the city.",
"City": "Chicago",
"State/Region": "Illinois",
"Founding Year": 2013,
"Size": "1 to 10",
"Type of Data Used": "Housing",
"profileID": "1693"
},
{
"Region": "North America",
"Country": "United States",
"Country Income Level": "High income",
"Organization Name": "3 Round Stones Inc",
"Organization Type": "For-profit",
"Sectors": "IT and geospatial",
"Description": "3 Round Stones' Open Source platform is used by the Fortune 2000 and US Government Agencies to collect, publish and reuse data, both public and proprietary.",
"City": "Arlington",
"State/Region": "Virginia",
"Founding Year": 2010,
"Size": "1 to 10",
"Type of Data Used": "Weather, Science and research, Health/healthcare, Geospatial, Environment, Energy, Demographic and social, Business",
"profileID": "580"
},
{
"Region": "North America",
"Country": "United States",
"Country Income Level": "High income",
"Organization Name": "360 Yield Center",
"Organization Type": "For-profit",
"Sectors": "Agriculture",
"Description": "Taking a 360-degree view of key yield-limiting variables, 360 Yield Center develops strategies for better-performing crops and better on-farm profits.",
"City": "Morton",
"State/Region": "Illinois",
"Founding Year": 2014,
"Size": "51 to 200",
"Type of Data Used": "Agriculture, Environment, Weather",
"profileID": "1692"
},
{
"Region": "Europe & Central Asia",
"Country": "Denmark",
"Country Income Level": "High income",
"Organization Name": "3Strikes - City Stories",
"Organization Type": "For-profit",
"Sectors": "Arts, culture and tourism",
"Description": "City Stories provides a platform that allows users to explore local stories and simultaneously contribute their own.",
"City": "Aarhus",
"State/Region": "Central Denmark Region",
"Founding Year": 2015,
"Size": "1 to 10",
"Type of Data Used": "Arts and culture",
"profileID": "2278"
},
{
"Region": "Europe & Central Asia",
"Country": "Finland",
"Country Income Level": "High income",
"Organization Name": "3Tier (Europe) ",
"Organization Type": "For-profit",
"Sectors": "Energy and climate",
"Description": "3TIER is a global environmental and industrial measurement company providing weather-driven renewable energy risk assessment and forecasting for wind, solar, and hydro power projects.",
"City": "Helsinki",
"State/Region": "Uusimaa",
"Founding Year": 2012,
"Size": "11 to 50",
"Type of Data Used": "Other, Environment",
"profileID": "952"
},
{
"Region": "North America",
"Country": "United States",
"Country Income Level": "High income",
"Organization Name": "5PSolutions",
"Organization Type": "For-profit",
"Sectors": "IT and geospatial",
"Description": "5PSolutions are artisans of mobile platforms.",
"City": "Fairfax",
"State/Region": "Virginia",
"Founding Year": 2007,
"Size": "1 to 10",
"Type of Data Used": "Environment",
"profileID": "534"
},
{
"Region": "North America",
"Country": "United States",
"Country Income Level": "High income",
"Organization Name": "AAA National",
"Organization Type": "Other",
"Sectors": "Transportation and logistics",
"Description": "AAA provides services such as travel, automotive, insurance, financial, and discounts.",
"City": "Irving",
"State/Region": "Texas",
"Founding Year": 1902,
"Size": "201 to 1000",
"Type of Data Used": "Transportation",
"profileID": "1691"
},
{
"Region": "North America",
"Country": "United States",
"Country Income Level": "High income",
"Organization Name": "AAASHTO",
"Organization Type": "Other",
"Sectors": "Transportation and logistics",
"Description": "AASHTO works to educate the public and key decision makers about the critical role that transportation plays in securing a good quality of life and sound economy. AASHTO serves as a liaison between state departments of transportation and the Federal government.",
"City": "Washington",
"State/Region": "DC",
"Founding Year": 1913,
"Size": "51 to 200",
"Type of Data Used": "Transportation",
"profileID": "1690"
},
{
"Region": "Latin America & Caribbean",
"Country": "Chile",
"Country Income Level": "High income",
"Organization Name": "ABRELATAM",
"Organization Type": "Nonprofit",
"Sectors": "Governance",
"Description": "ABRELATAM is an conference that seeks to accelerate the process of opening information through Open Data transparency and promote the Latin America.",
"City": "Santiago",
"State/Region": "",
"Founding Year": 2015,
"Size": "",
"Type of Data Used": "",
"profileID": "1687"
}
];
// outputs the first item of the organizations array. Just for testing.
//console.log(organizations[0]);
// this method is called on clicking the table row
function removeMe() {
this.parentNode.removeChild(this);
}
// Your JavaScript code goes here
function createTable(organizations) {
var col = [];
for (i = 0; i < 11; i++) {
for (var key in organizations[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1);
// TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < organizations.length; i++) {
tr = table.insertRow(-1);
tr.onclick = removeMe;
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = organizations[i][col[j]];
}
}
var divContainer = document.getElementById("org_table");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
createTable(organizations);
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
