Add sorting functionality and index to chart data for improved visualization

src/charts/barchart-original.vl.json

@@ -22,6 +22,10 @@
         "labelAlign": "left",
         "title": null,
         "labelPadding": 10
+      },
+      "sort": {
+        "field": "index",
+        "order": "ascending"
       }
     },
     "y": {

src/charts/barchart-ukrainian.vl.json

@@ -23,6 +23,10 @@
         "labelAlign": "left",
         "title": null,
         "labelPadding": 10
+      },
+      "sort": {
+        "field": "index",
+        "order": "ascending"
       }
     },
     "y": {

src/charts/piechart-original.vl.json

@@ -15,18 +15,31 @@
     "width": 800, "height": 400,
     "data": {
       "values": [        
-        {"brand": "Samsung", "share": 17.6},
-        {"brand": "Xiaomi", "share": 15.5},
-        {"brand": "Apple", "share": 15.0},
-        {"brand": "Oppo", "share": 10.2},
-        {"brand": "Vivo", "share": 9.8},
-        {"brand": "Others", "share": 31.9}
-
+        {"index": 1, "brand": "Samsung", "share": 17.6},
+        {"index": 2, "brand": "Xiaomi", "share": 15.5},
+        {"index": 3, "brand": "Apple", "share": 15.0},
+        {"index": 4, "brand": "Oppo", "share": 10.2},
+        {"index": 5, "brand": "Vivo", "share": 9.8},
+        {"index": 6, "brand": "Others", "share": 31.9}
       ]
     },
     "encoding": {
-      "theta": {"field": "share", "type": "quantitative", "stack": true},
-      "color": {"field": "brand", "type": "nominal", "legend": null}
+      "theta": {
+        "field": "share",
+        "type": "quantitative",
+        "stack": true,
+        "sort": {"field": "index", "order": "ascending"}
+      },
+      "color": {
+        "field": "brand",
+        "type": "nominal",
+        "legend": null,
+        "sort": {"field": "index", "order": "ascending"}
+      },
+      "order": {
+        "field": "index",
+        "type": "quantitative"
+      }
     },
     "layer": [{
       "mark": {"type": "arc", "outerRadius": 120}

src/charts/piechart-ukrainian.vl.json

@@ -15,17 +15,31 @@
     "width": 800, "height": 400,
     "data": {
       "values": [        
-        {"brand": "Samsung", "share": 17.6},
-        {"brand": "Xiaomi", "share": 15.5},
-        {"brand": "Apple", "share": 15.0},
-        {"brand": "Oppo", "share": 10.2},
-        {"brand": "Vivo", "share": 9.8},
-        {"brand": "Інші", "share": 31.9}
+        {"index": 1, "brand": "Samsung", "share": 17.6},
+        {"index": 2, "brand": "Xiaomi", "share": 15.5},
+        {"index": 3, "brand": "Apple", "share": 15.0},
+        {"index": 4, "brand": "Oppo", "share": 10.2},
+        {"index": 5, "brand": "Vivo", "share": 9.8},
+        {"index": 6, "brand": "Інші", "share": 31.9}
       ]
     },
     "encoding": {
-      "theta": {"field": "share", "type": "quantitative", "stack": true},
-      "color": {"field": "brand", "type": "nominal", "legend": null}
+      "theta": {
+        "field": "share",
+        "type": "quantitative",
+        "stack": true,
+        "sort": {"field": "index", "order": "ascending"}
+      },
+      "color": {
+        "field": "brand",
+        "type": "nominal",
+        "legend": null,
+        "sort": {"field": "index", "order": "ascending"}
+      },
+      "order": {
+        "field": "index",
+        "type": "quantitative"
+      }
     },
     "layer": [{
       "mark": {"type": "arc", "outerRadius": 120}

src/charts/stackedareachart-ukrainian.vl.json

@@ -10,37 +10,37 @@
     "data": {
         "values": [
             {
-                "Year": 2009,
+                "Year": "2009-01-01",
                 "Липовий": 3625,
                 "Гречаний": 1908,
                 "Акацієвий": 5201
             },
             {
-                "Year": 2010,
+                "Year": "2010-01-01",
                 "Липовий": 4227,
                 "Гречаний": 2384,
                 "Акацієвий": 5279
             },
             {
-                "Year": 2011,
+                "Year": "2011-01-01",
                 "Липовий": 5054,
                 "Гречаний": 2849,
                 "Акацієвий": 4938
             },
             {
-                "Year": 2012,
+                "Year": "2012-01-01",
                 "Липовий": 7061,
                 "Гречаний": 3501,
                 "Акацієвий": 4585
             },
             {
-                "Year": 2013,
+                "Year": "2013-01-01",
                 "Липовий": 5570,
                 "Гречаний": 3526,
                 "Акацієвий": 4598
             },
             {
-                "Year": 2014,
+                "Year": "2014-01-01",
                 "Липовий": 5327,
                 "Гречаний": 4012,
                 "Акацієвий": 4724
@@ -50,9 +50,10 @@
     "encoding": {
         "x": {
             "field": "Year",
-            "type": "quantitative",
+            "type": "temporal",
+            "timeUnit": "year",
             "axis": {
-                "title": "Рік",
+                "title": "Year",
                 "titleFontWeight": "bold",
                 "grid": true
             }

src/data/barchart.csv

@@ -1,15 +1,15 @@
-Country,Speed,Country_UK
-Australia,79.24,Австралія
-China,78.61,Китай
-Hong Kong,43.88,Гонконг
-India,13.45,Індія
-Indonesia,16.16,Індонезія
-Japan,40.51,Японія
-Malaysia,23.74,Малайзія
-New Zealand,92.05,Нова Зеландія
-Singapore,68.32,Сінгапур
-South Korea,98.93,Південна Корея
-Sri Lanka,12.60,Шрі-Ланка
-Taiwan,51.67,Тайвань
-Thailand,31.38,Таїланд
-Vietnam,35.33,В'єтнам
+index,Country,Speed,Country_UK
+1,Australia,79.24,Австралія
+2,China,78.61,Китай
+3,Hong Kong,43.88,Гонконг
+4,India,13.45,Індія
+5,Indonesia,16.16,Індонезія
+6,Japan,40.51,Японія
+7,Malaysia,23.74,Малайзія
+8,New Zealand,92.05,Нова Зеландія
+9,Singapore,68.32,Сінгапур
+10,South Korea,98.93,Південна Корея
+11,Sri Lanka,12.60,Шрі-Ланка
+12,Taiwan,51.67,Тайвань
+13,Thailand,31.38,Таїланд
+14,Vietnam,35.33,В'єтнам