Update chart configurations for responsive design and data accuracy

This commit is contained in:
2025-01-28 04:41:04 +02:00
parent 0e6bad0933
commit a25a54b0d1
11 changed files with 62 additions and 31 deletions

View File

@@ -130,6 +130,11 @@
"axis": {
"titleFontWeight": "bold",
"grid": true
},
"stack": null,
"scale": {
"zero": false,
"domainMin": 0.5
}
},
"tooltip": [

View File

@@ -9,7 +9,7 @@
"url": "data/barchart.csv", "format": {"type": "csv"}
},
"width": "container",
"height": "container",
"height": 400,
"mark": {
"type": "bar"
},

View File

@@ -5,7 +5,7 @@
"fontSize": 16,
"fontWeight": "bold"
},
"width": 500,
"width": "container",
"height": 500,
"projection": {
"type": "albersUsa"

View File

@@ -5,7 +5,7 @@
"fontSize": 16,
"fontWeight": "bold"
},
"width": 500,
"width": "container",
"height": 300,
"data": {
"url": "data/histogram.csv"

View File

@@ -1,6 +1,6 @@
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 600,
"width": "container",
"height": 400,
"title": "Oil Prices",
"data": {

View File

@@ -12,7 +12,7 @@
"titleFontWeight": "bold"
}
},
"width": 500, "height": 300,
"width": "container", "height": 300,
"data": {
"values": [
{"brand": "Samsung", "share": 17.6},

View File

@@ -5,7 +5,7 @@
"fontSize": 16,
"fontWeight": "bold"
},
"width": 400,
"width": "container",
"height": 400,
"data": {
"url": "data/scatterplot.csv"

View File

@@ -8,8 +8,8 @@
"data": {
"url": "data/stacked100.csv"
},
"width": 500,
"height": 300,
"width": "container",
"height": 400,
"encoding": {
"y": {
"field": "value",
@@ -49,6 +49,11 @@
"title": "Medals",
"orient": "right"
}
},
"order": {
"field": "order",
"type": "quantitative",
"sort": "ascending"
}
},
"mark": "bar",
@@ -65,9 +70,8 @@
]
},
{
"sort": [
{"field": "category", "order": "descending"}
]
"calculate": "datum.category === 'Gold' ? 1 : datum.category === 'Silver' ? 2 : 3",
"as": "order"
}
],
"config": {

View File

@@ -5,42 +5,42 @@
"fontSize": 16,
"fontWeight": "bold"
},
"width": 400,
"height": 400,
"width": "container",
"height": 500,
"data": {
"values": [
{
"Year": 2009,
"Year": "2009-01-01",
"Amelia": 3625,
"Isla": 1908,
"Olivia": 5201
},
{
"Year": 2010,
"Year": "2010-01-01",
"Amelia": 4227,
"Isla": 2384,
"Olivia": 5279
},
{
"Year": 2011,
"Year": "2011-01-01",
"Amelia": 5054,
"Isla": 2849,
"Olivia": 4938
},
{
"Year": 2012,
"Year": "2012-01-01",
"Amelia": 7061,
"Isla": 3501,
"Olivia": 4585
},
{
"Year": 2013,
"Year": "2013-01-01",
"Amelia": 5570,
"Isla": 3526,
"Olivia": 4598
},
{
"Year": 2014,
"Year": "2014-01-01",
"Amelia": 5327,
"Isla": 4012,
"Olivia": 4724
@@ -50,7 +50,8 @@
"encoding": {
"x": {
"field": "Year",
"type": "quantitative",
"type": "temporal",
"timeUnit": "year",
"axis": {
"title": "Year",
"titleFontWeight": "bold",
@@ -104,8 +105,18 @@
"name",
"value"
]
},
{
"calculate": "datum.name === 'Amelia' ? 1 : datum.name === 'Isla' ? 2 : 3",
"as": "order"
}
]
],
"encoding": {
"order": {
"field": "order",
"type": "quantitative"
}
}
}
],
"config": {

View File

@@ -6,8 +6,8 @@
"data": {
"url": "data/stackedbarchart.csv"
},
"width": 500,
"height": 300,
"width": "container",
"height": 400,
"encoding": {
"x": {
"field": "City",
@@ -24,7 +24,9 @@
"axis": {
"title": "Cost ($)",
"titleFontWeight": "bold",
"grid": true
"grid": true,
"gridDash": [1, 0],
"tickCount": 15
},
"scale": {
"domain": [
@@ -38,24 +40,29 @@
"type": "nominal",
"scale": {
"domain": [
"Sandwich",
"Water",
"Peanut",
"Vodka",
"Soda",
"Vodka"
"Peanut",
"Water",
"Sandwich"
],
"range": [
"#386cb0",
"#7fc97f",
"#beaed4",
"#fdc086",
"#fb9a99",
"#386cb0"
"#fb9a99"
]
},
"legend": {
"title": null,
"orient": "right"
}
},
"order": {
"field": "order",
"type": "quantitative",
"sort": "descending"
}
},
"mark": "bar",
@@ -72,6 +79,10 @@
"category",
"value"
]
},
{
"calculate": "datum.category === 'Vodka' ? 1 : datum.category === 'Soda' ? 2 : datum.category === 'Peanut' ? 3 : datum.category === 'Water' ? 4 : 5",
"as": "order"
}
],
"config": {

View File

@@ -8,7 +8,7 @@
"encode": {
"enter": {
"url": {
"value": "data/treemap-uk.png"
"value": "data/treemap-en.png"
},
"x": {
"value": 0