new file: LabourSlackDifferences.csv

new file: chart.html
jakobbjelver · Dec 9, 2023 · 4b57bfd · 4b57bfd
1 parent 395fb3d
commit 4b57bfd
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 0 deletions.
diff --git a/LabourSlackDifferences.csv b/LabourSlackDifferences.csv
@@ -0,0 +1,16 @@
+geo,Difference Value 13,Difference Value 14,Difference Value 15,Difference Value 16,Difference Value 17,Difference Value 18,Difference Value 19,Difference Value 20,Difference Value 21,Difference Value 22
+PT11,6.1,6.7,6.6,4.6,5.3,4.0,4.8,3.5,4.3,3.2
+PT15,-1.6,1.4,0.6,-1.6,-1.3,-0.2,1.0,3.1,2.9,3.8
+PT16,5.6,4.0,4.3,4.2,4.4,4.0,4.2,3.2,1.6,2.5
+PT17,1.5,2.5,2.6,1.2,3.8,3.6,4.3,2.2,-0.1,2.4
+PT18,3.9,2.8,5.6,5.4,4.9,3.1,3.9,1.4,0.1,1.7
+PT20,0.0,3.5,2.1,2.3,2.7,5.3,5.8,3.2,2.8,0.8
+PT30,-2.0,0.6,-2.7,-2.8,1.4,-1.2,1.1,1.9,2.9,1.5
+SE11,2.4,2.4,2.1,2.2,1.9,0.3,0.8,2.3,3.0,3.2
+SE12,5.0,4.2,3.9,2.7,2.3,3.9,2.8,0.7,1.2,3.7
+SE21,5.9,3.6,3.4,2.1,3.0,5.5,5.5,2.6,4.8,4.9
+SE22,4.0,3.5,2.4,0.1,0.4,1.3,2.0,4.2,3.8,5.1
+SE23,4.1,4.4,3.3,0.9,1.9,1.9,3.5,3.0,3.9,4.4
+SE31,5.1,3.3,2.2,1.8,3.0,1.5,1.0,3.0,4.6,2.4
+SE32,1.8,4.5,3.1,2.8,1.4,4.1,0.6,2.4,0.8,2.9
+SE33,0.9,3.0,0.6,0.1,0.0,1.3,4.0,2.7,3.2,3.2
diff --git a/chart.html b/chart.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Country Comparison Chart</title>
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/papaparse/5.3.0/papaparse.min.js"></script>
+</head>
+<body>
+    <div id="chart"></div>
+
+    <script>
+        // Function to process CSV data
+        function processData(allText) {
+            var allTextLines = allText.split(/\r\n|\n/);
+            var headers = allTextLines[0].split(',');
+            var lines = [];
+
+            for (var i=1; i<allTextLines.length; i++) {
+                var data = allTextLines[i].split(',');
+                if (data.length == headers.length) {
+                    lines.push(data);
+                }
+            }
+
+            // Extract data for Portugal and Sweden
+            var portugalData = [];
+            var swedenData = [];
+            // Assuming certain 'geo' codes belong to Portugal and others to Sweden
+            // Update these lists with the actual 'geo' codes for each country
+            var portugalRegions = ['PT11', 'PT15', 'PT16', 'PT17', 'PT18'];
+            var swedenRegions = ['SE11', 'SE12', 'SE21', 'SE22', 'SE23']; // Replace with actual codes
+
+            lines.forEach(function(line) {
+                var geo = line[0];
+                var values = line.slice(1).map(Number);
+                if (portugalRegions.includes(geo)) {
+                    portugalData.push(values);
+                } else if (swedenRegions.includes(geo)) {
+                    swedenData.push(values);
+                }
+            });
+
+            // Calculate mean values for each year for Portugal and Sweden
+            var portugalMean = [], swedenMean = [];
+            for (var year = 0; year < portugalData[0].length; year++) {
+                var portugalSum = 0, swedenSum = 0;
+                var portugalCount = 0, swedenCount = 0;
+                portugalData.forEach(function(region) {
+                    if (!isNaN(region[year])) {
+                        portugalSum += region[year];
+                        portugalCount++;
+                    }
+                });
+                swedenData.forEach(function(region) {
+                    if (!isNaN(region[year])) {
+                        swedenSum += region[year];
+                        swedenCount++;
+                    }
+                });
+                portugalMean.push(portugalSum / portugalCount);
+                swedenMean.push(swedenSum / swedenCount);
+            }
+
+            return { portugalMean, swedenMean };
+        }
+
+        // Load CSV file and create the chart
+        Papa.parse('LabourSlackDifferences.csv', {
+            download: true,
+            complete: function(results) {
+                var data = processData(results.data);
+
+                // Define the chart data
+                var options = {
+                    chart: {
+                        type: 'line',
+                        toolbar: {
+                            show: false
+                        }
+                    },
+                    stroke: {
+                        curve: 'smooth'
+                    },
+                    series: [
+                        {
+                            name: 'Portugal',
+                            data: data.portugalMean,
+                            colors: ['#FF0000', '#008000'] // Red and Green
+                        },
+                        {
+                            name: 'Sweden',
+                            data: data.swedenMean,
+                            colors: ['#0000FF', '#FFFF00'] // Blue and Yellow
+                        }
+                    ],
+                    xaxis: {
+                        categories: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022']
+                    }
+                };
+
+                // Create the chart
+                var chart = new ApexCharts(document.querySelector("#chart"), options);
+                chart.render();
+            }
+        });
+    </script>
+</body>
+</html>
+