I've been playing around with Vega, but I can't get my head around how to turn a vertical bar chart into an horizontal bar chart.
A similar question was posted a while ago here: vega horizontal bar charts but the provided answer isn't very clear on what exactly is being done to the code to produce the desired result. I also haven't been able to get the solution to run!
My understanding for now is that you need to switch the X and Y axis and scales, but where I get lost is in getting the mark to be flipped as well? I've tried setting the "x" and "y" attributes but I just get a blank chart in return... It really feels like I'm only missing one thing as my axes are right, but can't figure what it is!
EDIT: made some progress! My columns are now appearing, but their position is weirdly shifted vs the actual ticks. I've looked into adjusting the "points" parameter of the ordinal scale, but as a result the last column
The plot I obtain right now.
And with the "points" parameter set to true for the y scale.
Here's the code I have so far below
{
"width": 400,
"height": 400,
"padding": {
"top": 30,
"left": 40,
"bottom": 30,
"right": 10
},
"data": [
{
"name": "table",
"values": [
{
"x": "Mon",
"y": 2
},
{
"x": "Tue",
"y": 3
},
{
"x": "Wed",
"y": 10
}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"points": true
"range": "height",
"zero": false,
"domain": {
"data": "table",
"field": "x"
}
},
{
"name": "y",
"type": "linear",
"range": "width",
"domain": {
"data": "table",
"field": "y"
},
"nice": true
}
],
"axes": [
{
"type": "x",
"scale": "y"
},
{
"type": "y",
"scale": "x"
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "table"
},
"properties": {
"enter": {
"x": {
"scale": "y",
"field": "y"
},
"x2": {
"value": 0
},
"yc": {
"scale": "x",
"field": "x"
},
"height": {
"value": 40
},
"fill": {
"r": {
"value": 66
},
"g": {
"value": 190
},
"b": {
"value": 244
}
}
}
}
}
]
}
Victory!
Here's a working spec!
I used the "padding" property of the ordinal scale to get the desired result.
{
"width": 400,
"height": 400,
"padding": {
"top": 30,
"left": 40,
"bottom": 30,
"right": 10
},
"data": [
{
"name": "table",
"values": [
{
"x": "Mon",
"y": 2
},
{
"x": "Tue",
"y": 3
},
{
"x": "Wed",
"y": 10
}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"range": "height",
"points": true,
"padding": 1,
"zero": false,
"domain": {
"data": "table",
"field": "x"
}
},
{
"name": "y",
"type": "linear",
"range": "width",
"domain": {
"data": "table",
"field": "y"
},
"nice": true
}
],
"axes": [
{
"type": "x",
"scale": "y"
},
{
"type": "y",
"scale": "x"
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "table"
},
"properties": {
"enter": {
"x": {
"scale": "y",
"field": "y"
},
"x2": {
"value": 0
},
"yc": {
"scale": "x",
"field": "x"
},
"height": {
"value": 40
},
"fill": [
66,
190,
244
]
}
}
}
]
}
Related
I have a line graph.
I wanted the lines to start from the y-axis only. Currently the line is starting after a break.
This is the original graph:
https://vega.github.io/editor/#/gist/dcc9afece4dc6a5e89835650ec607280/og_chart.json
This is the chart in which I tried to get the change:
https://vega.github.io/editor/#/gist/e99bd5bd778e63af42bbbe6757301523/change_og_chart.json
This is the current chart
I would like to change this so the lines start from the y-axis only.
How could I shift the grid lines to the right to start with the y-axis domain line or is there a better way to start the line from the domain line.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"60": 100,
"90": 150,
"120": 200,
"-120": 10,
"-90": 15,
"-60": 30,
"type": "Mango"
},
{
"-120": 50,
"-90": 30,
"-60": 45,
"60": 90,
"90": 140,
"120": 190,
"type": "Apple"
}
]
},
"transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"type": "quantitative",
"sort": null,
"axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120],
"labelExpr": "abs(datum.value)"}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": 0, "bandPosition": 0}}
}
]
}
You are using discrete x-axis (bands) rather than continuous. I would do something like this.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"pre_120": 10,
"pre_90": 15,
"pre_60": 30,
"post_60": 100,
"post_90": 150,
"post_120": 200,
"type": "Mango"
},
{
"pre_120": 50,
"pre_90": 30,
"pre_60": 45,
"post_60": 90,
"post_90": 140,
"post_120": 190,
"type": "Apple"
}
]
},
"transform": [
{"fold": ["pre_120", "pre_90", "pre_60", "post_60", "post_90", "post_120"]}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"bandPosition": 0,
"axis":{ "bandPosition":0, "labelOffset":-55},
"sort": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
],
"scale": {
"domain": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
]
}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": "0", "bandPosition": 0}}
}
]
}
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"60": 100,
"90": 150,
"120": 200,
"-120": 10,
"-90": 15,
"-60": 30,
"type": "Mango"
},
{
"-120": 50,
"-90": 30,
"-60": 45,
"60": 90,
"90": 140,
"120": 190,
"type": "Apple"
}
]
},
"transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"type": "quantitative",
"sort": null,
"axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120]}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": 0, "bandPosition": 0}}
}
]
}
I've got the following retool javascript code representing my Plotly data object. It however is producing the bar plot as expected but it is not producing any x-axis labels. I would have thought the string I am doing the groupings (the groupby column is a string) over would be under each column but no luck (just integer increments).
Is there a way to get the list of groups as it is plotted? I can then set that as the "xticks" argument. I tried setting the "type":"categorical" but no dice.
[
{
"name": "foobar",
"y": y_column,
"text": text_column,
"type": "bar",
"transforms": [
{
"type": "groupby",
"groups": group_column,
"styles": []
},
{
"type": "aggregate",
"groups": aggregate_group_column,
"aggregations": [
{
"target": target_variable,
"func": "avg",
"enabled": true
}
]
}
]
}
]
The layout is as follows
{
"title": {
"text": "<br>",
"font": {
"color": "#3D3D3D",
"size": 16
}
},
"font": {
"family": "Inter",
"color": "#979797"
},
"showlegend": true,
"legend": {
"xanchor": "center",
"x": 1,
"y": 1.0,
"orientation": "r"
},
"margin": {
"l": 72,
"r": 24,
"t": 80,
"b": 72,
"pad": 2
},
"hovermode": "closest",
"hoverlabel": {
"bgcolor": "#000",
"bordercolor": "#000",
"font": {
"color": "#fff",
"family": "Inter",
"size": 20
}
},
"clickmode": "select+event",
"dragmode": "select",
"xaxis": {
"title": {
"text":'X-Axis',
"standoff": 15,
"font": {
"size": 20
}
},
"type": "linear",
"tickformat": "",
"automargin": true,
"fixedrange": true,
"gridcolor": "#fff",
"zerolinecolor": "#fff",
"tickmode":'array'
},
"yaxis": {
"title": {
"text": variable_name,
"standoff": 6,
"font": {
"size": 20
}
},
"type": "linear",
"tickformat": "",
"automargin": true,
"fixedrange": true,
"zerolinecolor": "#DEDEDE"
}
}
The issue is that the individual sliver radius' of this variable pie chart are not consistent with the the percentage labels (i.e. 25%, 50%, 75%, and 100%). The radius' all seem to be correctly calculated, but visually I cannot seem to figure out how to get them to match correctly with the label rings. It feels like some small config property that's padding the label rings incorrectly, or maybe I just have a fundamental misunderstanding of calculating these z values. I've been spinning my wheels on this for a while now, and any help would be amazing!
Also, I currently do not have enough SO street cred to post a photo of the chart, but I will try to quickly get 10 karma in order to post it.
Edit: Yay, I did it! I have street cred now.
A good example of the current problem would be to look at the largest orange sliver in the top-center/right. That sliver is associated with the "Intellectual Engagement" item in the legend that correctly shows it's z value as 85. The problem is that 85 shouldn't extend all the way up to the 100% radius label.
Highcharts.chart('container', {
"chart": {
"type": "variablepie",
"margin": [
0,
200,
20,
0
]
},
"title": {
"text": null
},
"tooltip": {
"enabled": true
},
"legend": {
"align": "right",
"verticalAlign": "middle",
"layout": "vertical",
"rtl": true,
"labelFormat": "{name} <span style=\"opacity: 0.4;\">({z})</span>",
"itemStyle": {
"fontSize": "11px"
}
},
"plotOptions": {
"series": {
"innerSize": 0,
"stacking": "normal",
"showInLegend": true,
"point": {
"events": {}
}
}
},
"series": [
{
"minPointSize": 40,
"innerSize": 0,
"sizeBy": "radius",
"name": "Subdomain score",
"dataLabels": {
"enabled": false
},
"tooltip": {
"headerFormat": "<span style=\"color:{point.color}\">●</span><span style=\"font-size: 12px;font-weight:bold;\"> {point.key}</span><br/>",
"pointFormat": "<br/>Score: {point.z}<br/>",
"valueDecimals": 2
},
"data": [
{
"name": "Learning Strategies",
"y": 12,
"z": 48.6
},
{
"name": "Intellectual Engagement",
"y": 12,
"z": 85
},
{
"name": "Effort Control",
"y": 12,
"z": 56.6
},
{
"name": "Attention",
"y": 12,
"z": 60
},
{
"name": "Autonomy",
"y": 12,
"z": 66.6
},
{
"name": "Social Cognition",
"y": 12,
"z": 46.6
},
{
"name": "Current Emotional Health",
"y": 12,
"z": 52
},
{
"name": "Self Compassion",
"y": 12,
"z": 68.6
},
{
"name": "Stress Resilience",
"y": 12,
"z": 56
},
{
"name": "Gratitude Positivity",
"y": 12,
"z": 60
},
{
"name": "Mindset",
"y": 12,
"z": 70
},
{
"name": "Social Engagement",
"y": 12,
"z": 45
},
{
"name": "Nutrition Knowledge",
"y": 10.285714285714286,
"z": 52
},
{
"name": "Nutrition",
"y": 10.285714285714286,
"z": 66.6
},
{
"name": "Activity Level",
"y": 10.285714285714286,
"z": 56
},
{
"name": "Aerobic Activity",
"y": 10.285714285714286,
"z": 53.4
},
{
"name": "Strength Training",
"y": 10.285714285714286,
"z": 70
},
{
"name": "Self Image",
"y": 10.285714285714286,
"z": 65
},
{
"name": "Sleep Habits",
"y": 10.285714285714286,
"z": 56
},
{
"name": "Long Term",
"y": 14.4,
"z": 57.2
},
{
"name": "Short Term",
"y": 14.4,
"z": 48.6
},
{
"name": "Reduce Sadness",
"y": 14.4,
"z": 51.4
},
{
"name": "Increase Happiness",
"y": 14.4,
"z": 60
},
{
"name": "Non Pecuniary",
"y": 14.4,
"z": 70
},
{
"name": "Connection",
"y": 14.4,
"z": 68
},
{
"name": "Compassion Empathy",
"y": 14.4,
"z": 76
},
{
"name": "Forgiveness",
"y": 14.4,
"z": 76
},
{
"name": "Purpose",
"y": 14.4,
"z": 58.2
},
{
"name": "Presence",
"y": 14.4,
"z": 72
}
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "100%",
"minPointSize": 0,
"borderSize": 1,
"borderColor": "#000",
"dataLabels": {
"enabled": true,
"format": "100%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 0
}
],
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "75%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "75%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 75
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "50%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "50%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 50
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "25%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "25%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 25
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
}
],
"responsive": {
"rules": [
{
"condition": {
"maxWidth": 500
},
"chartOptions": {
"chart": {
"margin": [
0,
0,
300,
0
],
"height": 600
},
"legend": {
"align": "center",
"verticalAlign": "bottom",
"layout": "horizontal"
}
},
"_id": "highcharts-3oqxpuf-36"
}
]
},
"colors": [
"#ff5a00",
"#ff6a00",
"#ff7e00",
"#ff9400",
"#ffb100",
"#ffd200",
"#00396f",
"#004980",
"#005f92",
"#007aa9",
"#009cc1",
"#08c6de",
"#a11500",
"#b51800",
"#c01a00",
"#cb1c00",
"#d72100",
"#e43304",
"#f26b3e",
"#006e00",
"#008200",
"#009906",
"#1cb423",
"#68d566",
"#071d9c",
"#1224ac",
"#2733be",
"#4d52d1",
"#8e8ee7"
]
});
#container {
min-width: 300px;
max-width: 800px;
height: 500px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<div id="container"></div>
The series don't have the same scale. Value 75 is the highest one and it is treated as 100%. Add the below properties to achieve the wanted result.
series: [{
minPointSize: 0,
zMax: 100,
...
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/dcaqrgot/
API Refernece:
https://api.highcharts.com/highcharts/series.variablepie.minPointSize
https://api.highcharts.com/highcharts/series.variablepie.zMax
I have a JSON object and I need to convert it into another JSON structure, using Javascript function.
My input JSON is:
{
"id": 116,
"name": "flow",
"op_start": 9,
"op_start_type": "web_hook",
"style": {
"x": 41,
"y": 35,
"width": 250,
"height": 250
},
"modules": {
"web_hook": {
"8": {
"id": 8,
"request_body": "auth",
"name": "nameew",
"op_success": null,
"op_failure": null,
"op_success_type": null,
"op_failure_type": null,
"style": {
"x": 628,
"y": 70,
"width": 250,
"height": 250
}
},
"9": {
"id": 9,
"request_body": "auth",
"name": "testontest",
"op_success": 1,
"op_failure": null,
"op_success_type": "ring",
"op_failure_type": null,
"style": {
"x": 438,
"y": 140,
"width": 250,
"height": 250
}
}
},
"ring": {
"1": {
"id": 1,
"request_body": "auth",
"name": "testontest",
"op_success": null,
"op_failure": null,
"op_success_type": null,
"op_failure_type": null,
"style": {
"x": 438,
"y": 140,
"width": 250,
"height": 250
}
}
}
}
}
and the desired output is:
{
"nodes": [
{
"name": "flow",
"id": 116,
"x": 41,
"y": 35,
"width": 250,
"inputConnectors": [],
"outputConnectors": [
{
"name": "op_start"
}
]
},
{
"name": "web_hook",
"id": 8,
"x": 628,
"y": 70,
"inputConnectors": [
{
"name": "iA"
}
],
"outputConnectors": [
{
"name": "op_success"
},
{
"name": "op_failure"
}
],
"width": 250
},
{
"name": "ring",
"id": 9,
"x": 438,
"y": 140,
"inputConnectors": [
{
"name": "iA"
}
],
"outputConnectors": [
{
"name": "op_success"
}
],
"width": 250
}
],
"connections": [
{
"source": {
"nodeID": 116,
"connectorIndex": 0
},
"dest": {
"nodeID": 8,
"connectorIndex": 0
}
},
{
"source": {
"nodeID": 8,
"connectorIndex": 0
},
"dest": {
"nodeID": 9,
"connectorIndex": 0
}
}
]
}
Here as we can see in output JSON the first node flow will be fixed.
I have tried it something like this:
var resData = response.data; // input json is inside response.data
// Creating first fixed node
var newDefinition = {
"nodes": [
{
"name": "flow",
"id": resData.id,
"x": resData.x,
"y": resData.y,
"width": resData.width,
"inputConnectors": [],
"outputConnectors": [
{
"name": "op_start"
}
]
}
],
"connections": []
};
// Getting the first connected node
var nextType = resData.op_start_type;
var nextId = resData.op_start;
var next = resData.modules[nextType][nextId];
newDefinition.nodes.push({
"name": next.name,
"id": next.id,
"x": next.style.x,
"y": next.style.y,
"width": next.style.width,
"inputConnectors": [
{
name: ''
}
],
"outputConnectors": [
{
"name": "op_start"
}
]
});
Till here everything is fine but now I am confused how I can add the node recursively, and I also need to add connections.
Thanks.
EDIT
Here is the output generated by output JSON
am trying to figure out how to use vega in a web app.
From what I am seeing it looks like it is possible to resize the chart size but I am not entirely sure how to go about it? Would I have to manually change the json object that vega is working off or is there an easier way?
Also, I am having a bad time trying to customize the x-axis. I have date that ranges from 0-potentially thousands. Would like to be able to dynamically set the tick data for the x-axis (by tick data I mean how the x axis increments.. part of my confusion I'm sure is that I don't know what vega means by tick, etc.).
BTW, I'm using angular for the front-end with ng-vega to put the "spec" for vega onto the scope.
{
"signals":[
{
"name":"width",
"init":"isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on":[
{
"update":"isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"events":"window:resize"
}
]
}
]
}
Please have a look in sample
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": {"type": "fit", "contains": "padding"},
"background": "white",
"padding": 5,
"height": 200,
"style": "cell",
"data": [
{
"name": "source_0",
"url": "data/seattle-weather.csv",
"format": {"type": "csv", "parse": {"date": "date"}, "delimiter": ","},
"transform": [
{
"type": "formula",
"as": "month_date",
"expr": "datetime(0, month(datum[\"date\"]), 1, 0, 0, 0, 0)"
},
{
"type": "formula",
"as": "month_date_end",
"expr": "datetime(0, month(datum[\"date\"])+1, 1, 0, 0, 0, 0)"
},
{
"type": "aggregate",
"groupby": ["month_date", "month_date_end"],
"ops": ["mean"],
"fields": ["precipitation"],
"as": ["mean_precipitation"]
},
{
"type": "filter",
"expr": "(isDate(datum[\"month_date\"]) || (isValid(datum[\"month_date\"]) && isFinite(+datum[\"month_date\"])))"
}
]
}
],
"signals": [
{
"name": "width",
"init": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on": [
{
"update": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"events": "window:resize"
}
]
}
],
"marks": [
{
"name": "marks",
"type": "rect",
"style": ["bar"],
"from": {"data": "source_0"},
"encode": {
"update": {
"fill": {"value": "#4c78a8"},
"x2": [
{
"test": "!isValid(datum[\"month_date\"]) || !isFinite(+datum[\"month_date\"])",
"value": 0
},
{"scale": "x", "field": "month_date", "offset": 1}
],
"x": [
{
"test": "!isValid(datum[\"month_date\"]) || !isFinite(+datum[\"month_date\"])",
"value": 0
},
{"scale": "x", "field": "month_date_end"}
],
"y": {"scale": "y", "field": "mean_precipitation"},
"y2": {"scale": "y", "value": 0}
}
}
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {
"data": "source_0",
"fields": ["month_date", "month_date_end"]
},
"range": [0, {"signal": "width"}]
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source_0", "field": "mean_precipitation"},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"gridScale": "y",
"grid": true,
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "date (month)",
"labelFlush": true,
"labelOverlap": true,
"encode": {
"labels": {
"update": {"text": {"signal": "timeFormat(datum.value, '%b')"}}
}
},
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "Mean of precipitation",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0
}
],
"config": {"background": "white"}
}