Can someone explain to me the following line in the vincent docs for a stacked bar:
https://github.com/wrobstory/vincent/blob/master/examples/stacked_bar_examples.py
y2=ValueRef(field='y2', scale='y')
I don't see any field called "y2" in the data set so I am confused as to where it is coming from
The y2 field is generated by the Vega stack transform (code here).
In Vega, The rect mark can be defined by y+y2 or y+height. See Marks#Shared Visual Properties in Vega's docs:
For marks involving Cartesian extents (e.g., rect marks), the
horizontal dimensions are determined by (in order of precedence) the x
and x2 properties, the x and width properties, and the x2 and width
properties. If all three of x, x2 and width are specified, the width
value is ignored. The y, y2 and height properties are treated
similarly.
Check out the stacked bar demo in the Vega Live Editor, which includes:
...
"marks": [
{
"type": "rect",
"properties": {
"enter": {
"x": {"scale": "x", "field": "data.x"},
"width": {"scale": "x", "band": true, "offset": -1},
"y": {"scale": "y", "field": "y"},
"y2": {"scale": "y", "field": "y2"},
"fill": {"scale": "color", "field": "data.c"}
},
"update": {
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}
]
...
Try changing y2 with height in the live editor.
Related
I am trying to sort the array which looks like this:
const testArray = [
{
"id": "1",
"nodeLayout": {
"x": "12.0",
"y": "1.0",
"width": 200,
"height": 87
}
},
{
"id": "2",
"nodeLayout": {
"x": "1.0",
"y": "1.0",
"width": 200,
"height": 87
}
},
{
"id": "3",
"nodeLayout": {
"x": "0.0",
"y": "1.0",
"width": 200,
"height": 87
}
}
]
I was trying to sort it with this:
R.pipe(
R.pluck('nodeLayout'),
R.map(R.pipe(R.props(['x']), R.join(','))),
R.sortWith([R.ascend(parseFloat)])
)(testArray)
Which is working fine but I am getting only x values sorted and I am not able to fit this sort into this one:
R.pipe(
R.filter(
R.allPass([
R.pathEq(['nodeLayout', 'y'], '1.0'),
R.propEq('group', 4)
]
))
// I tried to add it here: R.sortBy(R.path(['nodeLayout', 'x'])) but I need to parse string first and I have no idea how to combine those
)(testArray)
To sum up, I am trying to get the whole object with all properties sorted.
Any help would be appreciated. Thank you
If you combine your two approaches, you should be able to achieve what you're wanting.
The main thing being that you can R.pipe the call to parseFloat after obtaining the value you'd like to sort with R.path. This piped function can be provided as the argument to R.sortBy.
R.pipe(
R.filter(
R.allPass([
R.pathEq(['nodeLayout', 'y'], '1.0'),
R.propEq('group', 4)
]
)),
R.sortBy(R.pipe(R.path(['nodeLayout', 'x']), parseFloat))
)(testArray)
I'm trying to create a simple bar chart using Vega on the Vega editor.
To re-create my issue, navigate to this bar chart example on vega site, and try to change the text property of the text mark as follows:
Original: "text": {"signal": "tooltip.amount"},
Modify to: "text": {"signal": "tooltip.amount + ' + ' + tooltip.category"},
This leads to undefined + undefined displayed on the top left corner of the chart when no hover event occurs. How do I get around this issue to make sure its not displayed? (issue depicted below)
I think this is something to do with how the scales and the text mark are functioning, but I was not able to figure out the solution. Tried adding a default value in mouse hover events by setting category to null and testing it while configuring mark opacity, but it didn't work. Code for this (only specifying updates to the raw example on site):
"signals": [
{
"name": "tooltip",
"value": {"category":null},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{'category':null}"}
]
}
],
...
"marks": [
...
{
"type": "text",
"encode": {
...
"update": {
"text": {"signal": "tooltip.amount + ' + ' tooltip.category"},
"fillOpacity": [
{"test": "datum === tooltip && tooltip.category!=null", "value": 0},
{"value": 1}
]
}
}
}
Thanks to a friend for helping me with the answer:
"text": [
{
"signal": "tooltip.amount + ' + ' + tooltip.category",
"test": "tooltip.amount"
},
{"value": ""}
],
The issue was when you hover out the tooltip object does not have a value
since we are concatenating the values with the ' + ' string. The undefined object is coerced to the 'undefined' string.
Updating the string value to an empty string again is what is required.
I have a simple scale like this:
{
"name": "x",
"type": "linear",
"nice": true,
"zero": true,
"domain": {
"data": "source",
"field": "x"
},
"range": {
"signal": "x_range"
}
}
How can I access the x-position for a value inside the domain?
I guessed I can do something like scale('x')(10) but that doesn't work.
I know normally one can use scale and value to achieve the most but I would like to compute something based on the pixel value.
Answering myself:
Usage: scale('x', 10)
Documentation: https://vega.github.io/vega/docs/expressions/#scale
I am attempting to query data out of SQL Server and display it as a line chart in Node Red.
My Data from SQL looks like
1556029184000 0.0675168918918922
1556029139000 0.0675515463917528
1556029079000 0.0679347826086958
1556029019000 0.0674082568807342
1556028959000 0.0674431818181822
1556028898000 0.0675537634408605
1556028838000 0.0673611111111115
1556028779000 0.0675917431192663
1556028719000 0.06744212962963
1556028659000 0.0673148148148151
Left column is a timestamp converted to Epoch and right column is the value to plot.
Node red debug shows this:
[{"x":"1556029788000","y":0.06772222222222232},
{"x":"1556029738000","y":0.06855053191489367},
{"x":"1556029678000","y":0.06858333333333343},
{"x":"1556029619000","y":0.06751146788990835},
{"x":"1556029559000","y":0.06805180180180205},
{"x":"1556029499000","y":2.714885321100926},
{"x":"1556029439000","y":11.43350290697674},
{"x":"1556029378000","y":6.6709253246753235},
{"x":"1556029319000","y":0.06748842592592619},
{"x":"1556029259000","y":0.06760714285714318}]
Nothing is displayed in the chart. All help is appreciated.
The node-red-dashboard sidebar help has a link to the details the format for passing data to the chart node.
What you currently have is a msg.payload that contains an array of objects with x & y values. These need to be moved to the msg.payload.data field as described:
[{
"series": ["A", "B", "C"],
"data": [
[{ "x": 1504029632890, "y": 5 },
{ "x": 1504029636001, "y": 4 },
{ "x": 1504029638656, "y": 2 }
],
[{ "x": 1504029633514, "y": 6 },
{ "x": 1504029636622, "y": 7 },
{ "x": 1504029639539, "y": 6 }
],
[{ "x": 1504029634400, "y": 7 },
{ "x": 1504029637959, "y": 7 },
{ "x": 1504029640317, "y": 7 }
]
],
"labels": [""]
}]
I am trying to group the points on the map by category as determined by the column in the Pandas data frame. The code below uses plotly and Dash framework to build map layout and plot coordinates.
for i, row in Comp_data.groupby('Group'):
data.append({
"type": "scattermapbox",
"lat": [hlat],
"lon": [hlong],
"name": "Location",
"mode": "markers",
"marker": {
"symbol": "circle",
"color": "grey", <-- needs to be dynamic based on the group
"size": 6,
"opacity": 0.7
}
}
)
Any thoughts/suggestions?
Try to leave out the color property. The graph will give each data set another color.
"marker": {
"symbol": "circle",
"size": 6,
"opacity": 0.7
}