<![CDATA[Urban_Population]]>
false
true
true
false
false
function loadScript(localPath, fallbackUrl) {
let script = document.createElement('script');
script.src = localPath;
script.onload = function () {
console.log(`Loaded: ${localPath}`);
};
script.onerror = function () {
console.warn(`Local script ${localPath} failed to load. Falling back to ${fallbackUrl}`);
let fallbackScript = document.createElement('script');
fallbackScript.src = fallbackUrl;
fallbackScript.crossOrigin = "anonymous";
fallbackScript.referrerPolicy = "no-referrer";
document.head.appendChild(fallbackScript);
};
document.head.appendChild(script);
}
// Load Plotly
loadScript('./lib/plotly-2.35.2.min.js', 'https://cdn.plot.ly/plotly-2.35.2.min.js');
// Load Math.js
loadScript('./lib/math.js', 'https://cdnjs.cloudflare.com/ajax/libs/mathjs/13.1.1/math.js');
// Load Simple Statistics
loadScript('./lib/simple-statistics.min.js', 'https://cdn.jsdelivr.net/npm/simple-statistics@7.8.5/dist/simple-statistics.min.js');
// Load Regression
loadScript('./lib/regression.min.js', 'https://cdn.jsdelivr.net/npm/regression@2.0.1/dist/regression.min.js');
]]>
true
true
true
false
./logogeog.png
;;
20
1
true
undefined
Var Table 1
true
false
VARIABLE_EDITOR
lookang
true
false
CODE_EDITOR
initCountries
false
false
{
const checkboxContainer = document.createElement('div');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = country;
checkbox.value = country;
const label = document.createElement('label');
label.htmlFor = country;
label.textContent = country;
if (index < 0) {
checkbox.checked = true;
selectedCountries.push(country);
}
checkboxContainer.appendChild(checkbox);
checkboxContainer.appendChild(label);
countriesDiv.appendChild(checkboxContainer);
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
selectedCountries.push(checkbox.value);
} else {
const index = selectedCountries.indexOf(checkbox.value);
if (index > -1) {
selectedCountries.splice(index, 1);
}
}
updateSelectAllCheckboxState();
generateGraph(currentX, currentY);
});
});
selectAllCheckbox.addEventListener('change', () => {
const allCheckboxes = countriesDiv.querySelectorAll('input[type="checkbox"]:not(#select-all)');
allCheckboxes.forEach((checkbox) => {
checkbox.checked = selectAllCheckbox.checked;
if (selectAllCheckbox.checked) {
if (!selectedCountries.includes(checkbox.value)) {
selectedCountries.push(checkbox.value);
}
} else {
const index = selectedCountries.indexOf(checkbox.value);
if (index > -1) {
selectedCountries.splice(index, 1);
}
}
});
generateGraph(currentX, currentY);
});
function updateSelectAllCheckboxState() {
const allCheckboxes = countriesDiv.querySelectorAll('input[type="checkbox"]:not(#select-all)');
selectAllCheckbox.checked = Array.from(allCheckboxes).every(checkbox => checkbox.checked);
}
]]>
CODE_EDITOR
initVariables
true
false
{
const li = document.createElement('li');
li.innerHTML = `${source.text}${source.link}`;
ul.appendChild(li);
});
dataSourcesDiv.appendChild(ul);
]]>
undefined
readFiles
true
false
{
annualCO2Emissions = annualCO2;
urbanPopulation = urban;
gdpPerCapita = gdp;
infantMortalityRate = infant;
lifeExpectancy = life;
generateGraph("year", "urban population");
}).catch(error => {
console.error("Error loading CSV files:", error);
});
// const scatterData = {
// x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
// y: [1, 4, 9, 16, 25, 36, 49, 64, 81, 100],
// ...type,
// name: 'Scatter Data',
// marker: { color: 'blue' }
// };
// const { slope, intercept } = linearRegression(scatterData.x, scatterData.y);
// const bestFitY = scatterData.x.map(xi => slope * xi + intercept);
// const bestFitLine = {
// x: scatterData.x,
// y: bestFitY,
// mode: 'lines',
// type: 'scatter',
// name: 'Best Fit Line',
// line: { color: 'red' }
// };
// const layout = {
// title: 'Linear Best Fit Line',
// margin: { t: 30 },
// xaxis: { title: 'X-axis' },
// yaxis: { title: 'Y-axis' }
// };
// Plotly.newPlot("plot", [scatterData, bestFitLine], layout);
]]>
CODE_EDITOR
generateGraph
true
false
{
const country = row[0];
const year = parseInt(row[2]);
const data = parseFloat(row[3]);
if (!tempDataX[country]) {
tempDataX[country] = { x: [], y: [] };
}
tempDataX[country].x.push(year);
tempDataX[country].y.push(data);
});
for (const country in countriesLookang) {
if (countriesLookang[country]) {
const traceColor = colorPalette[colorIndex % colorPalette.length];
colorIndex++;
document.getElementById(formatCountryName(country)).style.backgroundColor = traceColor;
if (plot !== "best fit") {
traces.push({
x: tempDataX[country].x,
y: tempDataX[country].y,
mode: plot,
type: "scatter",
name: country,
marker: { color: traceColor },
text: tempDataX[country].x.map((year, index) => `Country: ${country}
${yHoverInfoText}${tempDataX[country].y[index]} ${yUnit}
${xHoverInfoText}${year}`),
hoverinfo: 'text',
});
}
if (plot === "best fit") {
const { predictedY, bestFit } = generateBestFitLine(tempDataX[country].x, tempDataX[country].y);
traces.push({
x: tempDataX[country].x,
y: predictedY,
mode: 'lines',
type: 'scatter',
marker: { color: traceColor },
name: `${country} Best Fit ${bestFit}`,
text: tempDataX[country].x.map((year, index) => `Country: ${country}
${yHoverInfoText}${tempDataX[country].y[index]} ${yUnit}
${xHoverInfoText}${year}`),
hoverinfo: 'text',
});
}
}
}
const layout = {
title: graphTitle,
xaxis: {
title: xAxis,
rangeslider: {
visible: true,
range: [Math.min(...yAxisData.slice(1).map(row => parseInt(row[2]))), Math.max(...yAxisData.slice(1).map(row => parseInt(row[2])))]
},
type: 'linear'
},
yaxis: { title: yAxis },
margin: { t: 30 }
};
Plotly.newPlot("plot", traces, layout);
} else if (x != y) {
xAxisData.slice(1).forEach(row => {
const country = row[0];
const year = parseInt(row[2]);
const data = parseFloat(row[3]);
if (!tempDataX[country]) {
tempDataX[country] = {};
}
tempDataX[country][year] = data;
});
yAxisData.slice(1).forEach(row => {
const country = row[0];
const year = parseInt(row[2]);
const data = parseFloat(row[3]);
if (!tempDataY[country]) {
tempDataY[country] = {};
}
tempDataY[country][year] = data;
});
for (const country in countriesLookang) {
if (countriesLookang[country]) {
const traceColor = colorPalette[colorIndex % colorPalette.length];
colorIndex++;
document.getElementById(formatCountryName(country)).style.backgroundColor = traceColor;
const x = [];
const y = [];
for (const year in tempDataX[country]) {
if (tempDataY[country][year] !== undefined) {
x.push(tempDataX[country][year]);
y.push(tempDataY[country][year]);
}
}
const combinedData = x.map((dataX, index) => ({
x: dataX,
y: y[index],
}));
combinedData.sort((a, b) => a.x - b.x);
const sortedX = combinedData.map(data => data.x);
const sortedY = combinedData.map(data => data.y);
if (plot !== "best fit") {
traces.push({
x: sortedX,
y: sortedY,
mode: plot,
type: "scatter",
marker: { color: traceColor },
name: country,
text: sortedX.map((dataX, index) => {
const year = Object.keys(tempDataX[country]).find(year => tempDataX[country][year] === dataX);
return `Country: ${country}
${yHoverInfoText}${sortedY[index]} ${yUnit}
${xHoverInfoText}${dataX} ${xUnit}
Year: ${year}`;
}),
hoverinfo: 'text',
});
}
if (plot === "best fit") {
const { predictedY, bestFit } = generateBestFitLine(sortedX, sortedY);
traces.push({
x: sortedX,
y: predictedY,
mode: 'lines',
type: 'scatter',
marker: { color: traceColor },
name: `${country} Best Fit ${bestFit}`,
text: sortedX.map((dataX, index) => {
const year = Object.keys(tempDataX[country]).find(year => tempDataX[country][year] === dataX);
return `Country: ${country}
${yHoverInfoText}${sortedY[index]} ${yUnit}
${xHoverInfoText}${dataX} ${xUnit}
Year: ${year}`;
}),
hoverinfo: 'text',
});
}
}
}
const layout = {
title: graphTitle,
xaxis: { title: xAxis },
yaxis: { title: yAxis },
margin: { t: 30 }
};
Plotly.newPlot("plot", traces, layout);
} else {
alert("Choose valid x and y axis");
Plotly.purge('plot');
}
}
function formatCountryName(countryName) {
return countryName.toLowerCase().replace(/\s+/g, '_');
}
function resetBackgroundColors() {
for (let country in countriesLookang) {
if (countriesLookang.hasOwnProperty(country)) {
const elementId = formatCountryName(country);
const element = document.getElementById(elementId);
if (element) {
element.style.backgroundColor = "";
}
}
}
}
]]>
CODE_EDITOR
bestFitLine
true
false
sum + val) / observed.length;
const ssTot = observed.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0);
const ssRes = observed.reduce((sum, val, index) => sum + Math.pow(val - predicted[index], 2), 0);
return 1 - (ssRes / ssTot);
}
function linearRegression(x, y) {
const n = x.length;
const sumX = x.reduce((sum, val) => sum + val, 0);
const sumY = y.reduce((sum, val) => sum + val, 0);
const sumXY = x.reduce((sum, val, index) => sum + val * y[index], 0);
const sumX2 = x.reduce((sum, val) => sum + val * val, 0);
const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
const intercept = (sumY - slope * sumX) / n;
const predicted = x.map(val => slope * val + intercept);
return { rSquared: calculateRSquared(y, predicted), predicted };
}
function exponentialRegression(x, y) {
const logY = y.map(Math.log);
const { rSquared, predicted } = linearRegression(x, logY);
const exponentialPredicted = predicted.map(val => Math.exp(val)); // convert back
return { rSquared, predicted: exponentialPredicted };
}
function polynomialRegression(x, y, degree = 2) {
const n = x.length;
const X = Array.from({ length: n }, () => Array(degree + 1).fill(0));
for (let i = 0; i < n; i++) {
for (let j = 0; j <= degree; j++) {
X[i][j] = Math.pow(x[i], j);
}
}
const XtX = math.multiply(math.transpose(X), X);
const XtY = math.multiply(math.transpose(X), y);
const invXtX = math.inv(XtX);
const coeffs = math.multiply(invXtX, XtY);
const predicted = x.map(val =>
coeffs.reduce((sum, coeff, idx) => sum + coeff * Math.pow(val, idx), 0)
);
return { rSquared: calculateRSquared(y, predicted), predicted };
}
function powerRegression(x, y) {
const logX = x.map(Math.log);
const logY = y.map(Math.log);
const { rSquared, predicted } = linearRegression(logX, logY);
const powerPredicted = predicted.map(val => Math.exp(val));
return { rSquared, predicted: powerPredicted };
}
const linearFit = linearRegression(xValues, yValues);
const exponentialFit = exponentialRegression(xValues, yValues);
const polynomialFit = polynomialRegression(xValues, yValues);
const powerFit = powerRegression(xValues, yValues);
const fits = [
{ type: 'Linear', rSquared: linearFit.rSquared, predicted: linearFit.predicted },
{ type: 'Exponential', rSquared: exponentialFit.rSquared, predicted: exponentialFit.predicted },
{ type: 'Polynomial', rSquared: polynomialFit.rSquared, predicted: polynomialFit.predicted },
{ type: 'Power', rSquared: powerFit.rSquared, predicted: powerFit.predicted },
];
const bestFit = fits.reduce((best, current) => (current.rSquared > best.rSquared ? current : best));
return {
bestFit: bestFit.type,
rSquared: bestFit.rSquared,
predictedY: bestFit.predicted,
predictedX: xValues,
};
}
]]>
CODE_EDITOR
readCsv
true
false
{
if (!response.ok) {
throw new Error("Failed to fetch the CSV file");
}
return response.text(); // Return the CSV content as plain text
})
.then(data => {
const parsedData = parseCSV(data); // Parse the CSV data
return parsedData;
})
.catch(error => {
console.error("Error reading the CSV file:", error);
});
}
function parseCSV(csvText) {
const rows = csvText.split("\n").filter(row => row.trim() !== "");
const result = rows.map(row => row.split(",").map(value => value.trim().replace(/\r$/, "")));
return result;
}
]]>
CODE_EDITOR
lookang
true
false
checked === true);
if (selectAll) {
for (const country in countriesLookang) {
countriesLookang[country] = selectAll;
}
}
}
function onClickCheckBox (country) {
countriesLookang[country] = !countriesLookang[country];
generateGraph(currentX, currentY);
updateSelectAllCheckboxState();
}
function onClickSelectAll() {
for (const country in countriesLookang) {
countriesLookang[country] = selectAll;
}
generateGraph(currentX, currentY);
}
]]>
HTML_VIEW_EDITOR
HtmlView
true
false
0
0
0
800
600
true
true
Elements.Panel
Elements.Panel
Elements.Label
Elements.ComboBox
0)? opts[0]:"";
currentX = option;
generateGraph(currentX, currentY);]]>
Elements.Label
Elements.ComboBox
0)? opts[0]:"";
currentY = option;
generateGraph(currentX, currentY);]]>
Elements.ComboBox
0)? opts[0]:"";
plot = option === "line" ? "lines" : option === "scatter" ? "markers" : option === "best fit" ? "best fit" : undefined;
generateGraph(currentX, currentY);]]>
true
Elements.Panel
Elements.CheckBox
true
Elements.Panel
true
Elements.Panel
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.CheckBox
Elements.Label
Elements.Panel