<![CDATA[Urban_Population]]>
false
true
true
false
false
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);
});
//plot the traces for countries selected
for (const country in countriesLookang) {
if (countriesLookang[country]) {
//trace color
const traceColor = colorPalette[colorIndex % colorPalette.length];
colorIndex++;
document.getElementById(formatCountryName(country)).style.backgroundColor = traceColor;
//for border style
// document.getElementById(formatCountryName(country)).style.borderColor = traceColor;
// document.getElementById(formatCountryName(country)).style.borderWidth = "2px";
// document.getElementById(formatCountryName(country)).style.borderStyle = "solid";
//if plot is scatter or straight line
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 is best fit
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',
});
}
}
}
//configuration for the range slider
const minYear = Math.min(...yAxisData.slice(1).map(row => parseInt(row[2])));
const maxYear = Math.max(...yAxisData.slice(1).map(row => parseInt(row[2])));
const yearAnnotations = [minYear];
const step = (maxYear - minYear) / 6;
for (let i = 1; i < 6; i++) {
const year = Math.round(minYear + step * i);
yearAnnotations.push(year);
}
yearAnnotations.push(maxYear);
const annotations = yearAnnotations.map((year, index) => ({
xref: 'paper',
yref: 'paper',
x: index / 6,
y: -0.22,
xanchor: 'center',
yanchor: 'top',
text: year.toString(),
showarrow: false,
font: { size: 12 }
}));
//layout for the graph
const layout = {
title: graphTitle,
xaxis: {
title: xAxis,
rangeslider: {
thickness: 0.08,
bgcolor: 'rgba(0, 162, 255, 0.2)',
// bordercolor: '#444',
borderwidth: 2,
yaxis: {
rangemode: 'fixed',
// yes this is to prevent the lines from being shown in slider and make sure the color of bar is consistent, very weird but works
range: [1000000000000000000000000000, 1000000000000000000000000000]
},
},
type: 'linear',
range: [sliderMin || Math.min(...yAxisData.slice(1).map(row => parseInt(row[2]))), sliderMax || Math.max(...yAxisData.slice(1).map(row => parseInt(row[2])))],
// autorange: true, fixedrange: false, zeroline: false,
},
yaxis: { title: yAxis, autorange: true, fixedrange: false, zeroline: false },
margin: { t: 30, b: 100 },
annotations: annotations,
shapes: [
{
type: 'line',
x0: 0, x1: 1, y0: 0, y1: 0,
xref: 'paper', yref: 'paper',
line: { color: 'black', width: 1 }
},
{
type: 'line',
x0: 0, x1: 0, y0: 0, y1: 1,
xref: 'paper', yref: 'paper',
line: { color: 'black', width: 1 }
}
]
};
//plot the graph
Plotly.newPlot("plot", traces, layout, config).then((gd) => {
gd.on('plotly_relayout', function (eventData) {
if (eventData['xaxis.range']) {
storeCurrentRange(eventData);
}
});
});
//all the other plots
} else if (x != y) {
//separate x and y data and get the values for each country in that year
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;
});
//trace color
for (const country in countriesLookang) {
if (countriesLookang[country]) {
const traceColor = colorPalette[colorIndex % colorPalette.length];
colorIndex++;
document.getElementById(formatCountryName(country)).style.backgroundColor = traceColor;
//for border style
// document.getElementById(formatCountryName(country)).style.borderColor = traceColor;
// document.getElementById(formatCountryName(country)).style.borderWidth = "2px";
// document.getElementById(formatCountryName(country)).style.borderStyle = "solid";
const x = [];
const y = [];
//combine the data joining them based on year and country
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 is scatter or straight line
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 is best fit
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',
});
}
}
}
//layout for the graph
const layout = {
title: graphTitle,
xaxis: { title: xAxis, range: [0, yAxisTitle === "Urban Population" ? 100 : null], autorange: true, fixedrange: false, zeroline: false },
yaxis: { title: yAxis, range: [0, null], autorange: true, fixedrange: false, zeroline: false },
margin: { t: 30 },
shapes: [
{
type: 'line',
x0: 0, x1: 1, y0: 0, y1: 0,
xref: 'paper', yref: 'paper',
line: { color: 'black', width: 1 }
},
{
type: 'line',
x0: 0, x1: 0, y0: 0, y1: 1,
xref: 'paper', yref: 'paper',
line: { color: 'black', width: 1 }
}
]
};
//plot the graph
Plotly.newPlot("plot", traces, layout, config);
} 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 = "";
}
}
}
}
function storeCurrentRange(eventData) {
const currentLayout = eventData['xaxis.range'];
if (currentLayout) {
sliderMin = currentLayout[0];
sliderMax = currentLayout[1];
} else {
console.error("Failed to store range, eventData invalid");
}
}
]]>
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;
sliderMax = 0;
sliderMin = 0;
generateGraph(currentX, currentY);]]>
Elements.Label
Elements.ComboBox
0)? opts[0]:"";
currentY = option;
sliderMin = 0;
sliderMax = 0;
generateGraph(currentX, currentY);]]>
Elements.ComboBox
0)? opts[0]:"";
plot = option === "line" ? "lines" : option === "scatter" ? "markers" : option === "best fit" ? "best fit" : undefined;
generateGraph(currentX, currentY);]]>
false
Elements.Panel
Elements.CheckBox
false
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