From 56e2adbba0db69bceb4b387bdd7558f3fe5dec70 Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Thu, 30 Jan 2025 09:39:56 +0200 Subject: [PATCH] Add sorting functionality and index to chart data for improved visualization --- src/charts/barchart-original.vl.json | 4 +++ src/charts/barchart-ukrainian.vl.json | 4 +++ src/charts/piechart-original.vl.json | 31 +++++++++++++------ src/charts/piechart-ukrainian.vl.json | 30 +++++++++++++----- src/charts/stackedareachart-ukrainian.vl.json | 17 +++++----- src/data/barchart.csv | 30 +++++++++--------- 6 files changed, 76 insertions(+), 40 deletions(-) diff --git a/src/charts/barchart-original.vl.json b/src/charts/barchart-original.vl.json index 210ddda..a1558b0 100644 --- a/src/charts/barchart-original.vl.json +++ b/src/charts/barchart-original.vl.json @@ -22,6 +22,10 @@ "labelAlign": "left", "title": null, "labelPadding": 10 + }, + "sort": { + "field": "index", + "order": "ascending" } }, "y": { diff --git a/src/charts/barchart-ukrainian.vl.json b/src/charts/barchart-ukrainian.vl.json index 915c14d..b8b1b28 100644 --- a/src/charts/barchart-ukrainian.vl.json +++ b/src/charts/barchart-ukrainian.vl.json @@ -23,6 +23,10 @@ "labelAlign": "left", "title": null, "labelPadding": 10 + }, + "sort": { + "field": "index", + "order": "ascending" } }, "y": { diff --git a/src/charts/piechart-original.vl.json b/src/charts/piechart-original.vl.json index 48ff5c9..129b1ca 100644 --- a/src/charts/piechart-original.vl.json +++ b/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} diff --git a/src/charts/piechart-ukrainian.vl.json b/src/charts/piechart-ukrainian.vl.json index e288944..59749a8 100644 --- a/src/charts/piechart-ukrainian.vl.json +++ b/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} diff --git a/src/charts/stackedareachart-ukrainian.vl.json b/src/charts/stackedareachart-ukrainian.vl.json index 384f52b..154a516 100644 --- a/src/charts/stackedareachart-ukrainian.vl.json +++ b/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 } diff --git a/src/data/barchart.csv b/src/data/barchart.csv index 840b5ea..b5ced62 100644 --- a/src/data/barchart.csv +++ b/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,В'єтнам \ No newline at end of file +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,В'єтнам \ No newline at end of file