Is there a way to get a adjustable selection in vega-lite?
I found this example but I think this is made with plain vega.
Vega-Lite does not provide any way to create an interval selection with a size that is adjustable by clicking and dragging on the edges.
Available configuration properties are listed in the interval selection docs. The only configurable interactions are translate, which enables moving the selection by clicking and dragging, and zoom, which enables changing the selection's size by zooming on its interior; both of these are True by default.
Here is a simple specification that lets you see the effect of these configurations (open in editor):
{
"data": {"url": "data/sp500.csv"},
"mark": "area",
"selection": {
"brush": {
"type": "interval",
"encodings": ["x"],
"zoom": true,
"translate": true
}
},
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
},
"width": 400
}
Related
Using javascript, vega editor and this data: https://github.com/StanWaldron/StanWaldron.github.io/blob/main/final.csv, which I got from SportDataAPI and organised using pandas, I have attempted to make a graph that plots Crystal Palace's home and away goal differences over the course of the 2020/21 season. As you can see though, I can't get a smooth plot.
The issue seems to be that the NaNs in the data are being put in as 0s for home games when they have played away and vice versa. When trying to resolve this by looping through like so:
for c in final['Home_GD']:
if math.isnan(c) == True:
c = 0.0
It doesn't seem to change the data at all. If this worked, I would just be able to simply add it to the previous value and plot it that way, for every game.
In the javascript side I have also used layers, but have struggled to find any way of separating the data completely and then using two different data sources which I can layer on the same graph.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "Home and Away Goal Difference For Crystal Palace 2020/21",
"subtitle":["Exclusively in the Premier League"],
"subtitleFontStyle":"italic",
"subtitleFontSize":10,
"anchor": "start",
"color": "black"},
"data": {
"url":
"https://raw.githubusercontent.com/StanWaldron/StanWaldron.github.io/main/final.csv"
},
"repeat": {"layer": ["Away_GD", "Home_GD"]},
"height": 300,
"width": 300,
"spec": {
"mark": {
"type":"line",
"strokeWidth":2},
"encoding": {
"x": {
"field": "Date",
"type": "temporal",
"title":null,
"axis":{
"grid": false
}},
"y": {
"field": {"repeat": "layer"},
"type": "quantitative",
"title": null},
"color": {
"datum": {"repeat": "layer"},
"scale": {"range": ["blue", "red"]},
"legend": {
"orient":"top-left",
"fillColor":"white"}}
}
}
}
I would probably do this by filtering each value individually within a layer; here's an example (open in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "https://raw.githubusercontent.com/StanWaldron/StanWaldron.github.io/main/final.csv"
},
"transform": [{"fold": ["Home_GD", "Away_GD"], "as": ["key", "Goals"]}],
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Goals", "type": "quantitative"},
"color": {"field": "key", "type": "nominal"}
},
"layer": [
{
"transform": [{"filter": "datum.key == 'Home_GD' && datum.Home_GD != ''"}],
"mark": "line"
},
{
"transform": [{"filter": "datum.key == 'Away_GD' && datum.Away_GD != ''"}],
"mark": "line"
}
]
}
I am using vega-lite to create a pie chart (on Airtable). I have a single data point, which is a target set by me, and the percentage complete for that target. For example, as below:
{
"Target": "Get 10 customers",
"Percentage complete": "60"
}
I would like to make a pie chart that is 60% complete, and the rest empty. Similar to the interactive single arc pie chart displayed https://vega.github.io/vega-lite/docs/arc.html.
My code currently looks like this
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Customer Acquired",
"width": "container",
"height": "container",
"data": {
"values": [
{
"Target": "Get 10 customers",
"Percentage complete": "60"
}
]},
"mark": {
"type": "arc",
"tooltip": true
},
"encoding": {
"theta": {
"field": "Percentage complete",
"type": "quantitative"
}
}
}
And my pie chart currently just looks like this:
I realise I could force the pie chart to appear the way I want it by manually setting the theta2 property like so
"mark": {
"type": "arc",
"tooltip": true,
"theta2": 3.5
}
However I don't know what the "Percentage complete" field will be and this value may change often, so I would rather not have to do it manually. Is this at all possible with vega-lite?
The domain for the theta encoding will automatically be set to the minimum and maximum of your input data. To show the correct portion of the chart, you need to set the domain to [0, 100]:
"encoding": {
"theta": {
"field": "Percentage complete",
"type": "quantitative",
"scale": {"domain": [0, 100]}
}
}
You can view the resulting chart in the vega editor:
I am currently working with image overlays (.gif) in Mapbox GL JS to provide weather radar data. I need to set a loop to show the images in motion - but the image overlays have a "fade-in" effect and I would like that gone. How can I remove this so the images just turn on and off as quickly as possible with no fade-in or out? I cannot find this in the API documentation, but it's possible I missed it somehow.
Edit : To be clear, I am just asking how to remove the fade-effects - not how to loop it or anything else - I can do that later.
My code to add an overlay and source (that produces the default fade-effect) is currently :
topleftmapbox.addSource("source_KEWX_L2_CC", {
"type": "image",
"url": "images/KEWX_L2_CC.gif",
"coordinates": [
[-102, 33],
[-94, 33],
[-94, 26],
[-102, 26]
]
})
topleftmapbox.addLayer({
"id": "overlay_KEWX_L2_CC",
"source": "source_KEWX_L2_CC",
"type": "raster",
"raster-opacity": 0.9,
"layout": {"visibility": "visible"},
}, firstSymbolId)
}
You need to change the raster-fade-duration property:
topleftmapbox.addLayer({
"id": "overlay_KEWX_L2_CC",
"source": "source_KEWX_L2_CC",
"type": "raster",
"paint": {
"raster-opacity": 0.9,
"raster-fade-duration": 0
},
"layout": {"visibility": "visible"},
}, firstSymbolId)
P.S. And yes, I recommend using the canvassource for animation.
I'm trying to add "Advanced Real Time chart" widget from tradinview. I'm able to add indicator Exponential moving average and Simple moving average. But it takes default 9 days length. I want to change that.
I tried as below but it does not work. Could somebody please help. Thanks a lot in advance.
widget = new TradingView.widget(
{
"width": 1200,
"height": 700,
"symbol": "NSE:DRREDDY",
"interval": "D",
"timezone": "Asia/Kolkata",
"theme": "Dark",
"style": "1",
"locale": "in",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"details": true,
"studies_overrides": {
"moving average exponential.length": 20
},
"studies": [
"MAExp#tv-basicstudies"
],
"container_id": "tradingview_f6d89"
}
Here's the way to do it :
"studies": [
{
"id": "MAExp#tv-basicstudies",
"version": 60,
"inputs": {
"length": 20
}
},
...
The code above takes EMA 20 ticks back on the current time frame (TF), so if you want days, you need to set TF to days and change this value to 9 (or equivalently, set TF to hours and set EMA to 24*9).
I'm using HighCharts on a project, and I'm having trouble formatting the data in the way I'd like. I currently have something that works, but it doesn't feel quite right.
What I have is a column chart with everything in one series. I'd rather have each data point be in it's own series & properly labeled in the legend & tooltips. Below are samples of the relevant bits to format the data.
I'm not sure what I'm doing wrong, the changes I've made feel like they should work given their docs & this demo. Also, Do I need the categories if multiple series works?
Working:
"series": [
{
"data": [
{
"y": 92,
"name": "Apples: 92ms for 83,481,430 requests",
"color": "#91cb73"
},
{
"y": 761,
"name": "Bananas: 761ms for 58,050,877 requests",
"color": "#ab7053"
},
{
"y": 774,
"name": "Kiwis: 774ms for 362,294 requests",
"color": "#44719c"
}
]
}
]
Demo: http://jsfiddle.net/b65kp/
Not working:
"series": [
{
"name": "Apples",
"data": {
"y": 92,
"name": "92ms for 83,481,430 requests",
"color": "#91cb73"
}
},
{
"name": "Bananas",
"data": {
"y": 761,
"name": "761ms for 58,050,877 requests",
"color": "#ab7053"
}
},
{
"name": "Kiwis",
"data": {
"y": 774,
"name": "774ms for 362,294 requests",
"color": "#44719c"
}
}
]
Demo: http://jsfiddle.net/u74Qw/1/
The problem is that "data" expects an array, and you are giving it an object. Wrap each object in an array. For example:
"data": [{
"y": 92,
"name": "92ms for 83,481,430 requests",
"color": "#91cb73"
}]
Here is your full fix, but it might not give the result you expect, personally I like your first attempt better
FWIW, alternate approach to setting this up:
http://jsfiddle.net/jlbriggs/zbW4D/
Things to consider:
1) using a legend instead of just directly labeling each bar makes the user do a lot of looking back and forth to see which is which (doing both just adds extra clutter to distract the user)
2) rotating labels always adds more work for the user
3) multiple colors for the bars is not necessary when each bar is labeled appropriately, and again just adds distraction
A horizontal bar chart with no legend and single color for data solves these problems.