[英]Vega-lite interactive Bar Chart
I am trying to make a basic interactive chart where the user can select a country and observe a single measurement based on the height of the bar.我正在尝试制作一个基本的交互式图表,用户可以在其中 select 一个国家并观察基于条形高度的单个测量值。 However, prior to selecting a country, the chart shows all the bars stacked on top of each other.但是,在选择国家之前,图表会显示所有条形堆叠在一起。 once a country is selected i achieve the view that i want.一旦选择了一个国家,我就会获得我想要的观点。
{"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"url": "https://raw.githubusercontent.com/ConorQuah/ConorQuah.github.io/main/Happiness%26liberties_s%26e.csv"
},
"title": {
"text": "Happiness and Liberty",
"subtitle":"view the happiness of different countries. Notice how the colour of the bar changes!",
"subtitleFontStyle":"italic",
"subtitleFontSize":10,
"anchor": "start"
},
"height": 300,
"width": 300,
"transform": [{"filter": {"selection": "Region"}}],
"selection": {
"Region": {
"type": "single",
"fields": ["Country"],
"bind": {
"input": "select",
"options": [
"null",
"Finland",
"Sweden",
"New Zealand",
"United Kingdom",
"Serbia",
"Zimbabwe",
"Afghanistan"
],
"name": "Select a country"
}
}
},
"mark": {"type": "bar", "width":50},
"encoding": {
"color": {
"field": "Civil liberties",
"title": "Civil liberties",
"scale":{"scheme":"redyellowgreen", "domain":[0,60]},
"type": "quantitative"
},
"y": {
"field": "Happiness",
"scale": {"domain": [0,10]},
"type": "quantitative",
"title": "Happiness"
}
}
}
Here you go:给你go:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "https://raw.githubusercontent.com/ConorQuah/ConorQuah.github.io/main/Happiness%26liberties_s%26e.csv"
},
"title": {
"text": "Happiness and Liberty",
"subtitle": "view the happiness of different countries. Notice how the colour of the bar changes!",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start"
},
"params": [
{
"name": "p",
"select": {"type": "point", "fields": ["Country"]},
"bind": { "name": "Country",
"input": "select",
"options": [
"Pick a Country",
"Finland",
"Sweden",
"New Zealand",
"United Kingdom",
"Serbia",
"Zimbabwe",
"Afghanistan"
]
}
}
],
"height": 300,
"width": 300,
"transform": [{"filter": "datum.Country ==p_Country"}],
"mark": {"type": "bar", "width": 50},
"encoding": {
"color": {
"field": "Civil liberties",
"title": "Civil liberties",
"scale": {"scheme": "redyellowgreen", "domain": [0, 60]},
"type": "quantitative"
},
"y": {
"field": "Happiness",
"scale": {"domain": [0, 10]},
"type": "quantitative",
"title": "Happiness"
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.