I have this object containing information about photos, including details about their cropping.
{
"images": [
{
"key": "ASDV1-01.jpg",
"image_location": "image1.jpg",
"data": {
"documentid": "CE44DBAC-59B2-4178-8392-0141FB2F58DF",
"scandate": "Feb 1 2018 12:05PM",
"F08": "1",
"F09": "",
"F10": "101076",
"F11": ""
},
"crops": {
"F08": {
"rectangle": {
"left": 690,
"top": 2111,
"width": 597,
"height": 121
}
},
"F09": {},
"F10": {
"rectangle": {
"left": 653,
"top": 821,
"width": 653,
"height": 243
}
},
"F11": {}
}
},
{
"key": "ASDV1-01.jpg",
"image_location": "image.png",
"crops": {
"F05": {
"rectangle": {
"left": 0,
"top": 808,
"width": 624,
"height": 243
}
}
},
"metadata": [
{
"name": "colors",
"data": {
"dimensions": {
"width": 2000,
"height": 2600
},
"coordinates": {
"width": {
"x": {
"lat": 4,
"long": [12, 345]
},
"y": {
"lat": {
"x" : [12,345],
"y": "234"
},
"long": 123
}
}
}
}
}
]
},
{
"key": "ASDV1-02.jpg",
"image_location": "image.png"
}
]
}
And I want to return the following output:
"F02":
{
"left": 690,
"top": 2111,
"width": 597,
"height": 121
}
More accurate, i want to return a new object containing all the crops objects in this object. Or a new array, whatever it is. Tried to do this with a filter method, but it was no use. Thank you in advance.
The Array filter() method creates a new array with all elements that pass the test implemented by the provided function.
If the object does not have the crops property, using filter will exclude the element from the array.
If you would like to include objects without crops, map() method might be a better option.
If you do want to capture a specific key, you can use a variation of the findKey function defined below.
var obj = {
"images": [
{
"key": "ASDV1-01.jpg",
"image_location": "image1.jpg",
"data": {
"documentid": "CE44DBAC-59B2-4178-8392-0141FB2F58DF",
"scandate": "Feb 1 2018 12:05PM",
"F08": "1",
"F09": "",
"F10": "101076",
"F11": ""
},
"crops": {
"F08": {
"rectangle": {
"left": 690,
"top": 2111,
"width": 597,
"height": 121
}
},
"F09": {},
"F10": {
"rectangle": {
"left": 653,
"top": 821,
"width": 653,
"height": 243
}
},
"F11": {}
}
},
{
"key": "ASDV1-01.jpg",
"image_location": "image.png",
"crops": {
"F05": {
"rectangle": {
"left": 0,
"top": 808,
"width": 624,
"height": 243
}
}
},
"metadata": [
{
"name": "colors",
"data": {
"dimensions": {
"width": 2000,
"height": 2600
},
"coordinates": {
"width": {
"x": {
"lat": 4,
"long": [12, 345]
},
"y": {
"lat": {
"x" : [12,345],
"y": "234"
},
"long": 123
}
}
}
}
}
]
},
{
"key": "ASDV1-02.jpg",
"image_location": "image.png"
}
]
};
obj.images.filter(image => image.crops);
/***
returns an array with crops if they exist.
[
{
"key": "ASDV1-01.jpg",
"image_location": "image1.jpg",
"data": {
"documentid": "CE44DBAC-59B2-4178-8392-0141FB2F58DF",
"scandate": "Feb 1 2018 12:05PM",
"F08": "1",
"F09": "",
"F10": "101076",
"F11": ""
},
"crops": {
"F08": {
"rectangle": {
"left": 690,
"top": 2111,
"width": 597,
"height": 121
}
},
"F09": {},
"F10": {
"rectangle": {
"left": 653,
"top": 821,
"width": 653,
"height": 243
}
},
"F11": {}
}
},
{
"key": "ASDV1-01.jpg",
"image_location": "image.png",
"crops": {
"F05": {
"rectangle": {
"left": 0,
"top": 808,
"width": 624,
"height": 243
}
}
},
"metadata": [
{
"name": "colors",
"data": {
"dimensions": {
"width": 2000,
"height": 2600
},
"coordinates": {
"width": {
"x": {
"lat": 4,
"long": [
12,
345
]
},
"y": {
"lat": {
"x": [
12,
345
],
"y": "234"
},
"long": 123
}
}
}
}
}
]
}
]
*/
function findKey(group, key) {
return group.images
.filter(item => item.crops)
.filter(item => item.crops[key])
.map(item => item.crops[key])
.reduce((a,b) => Object.assign(a,b), {});
}
Related
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"
}
}
I am trying to use Chart.js to create a bar chart. I want my chart to look like this example where each dataset has the same color on the chart.
However, in my case, the color are showing up wrong. I want each category to share the same color across the chart.
Also, is there a way to place the label (ie, Category 1, Category 2...) under each bar over the date?
Here is what I have done
document.addEventListener('DOMContentLoaded', function () {
const options = {
"type":"bar",
"data":{
"labels":[
"10/25/2021",
"11/1/2021",
"11/8/2021",
"11/15/2021"
],
"datasets":[
{
"label":"Category 1",
"data":[
{
"x":"11/1/2021",
"y":3.25
},
{
"x":"11/8/2021",
"y":3.66
},
{
"x":"11/15/2021",
"y":4.00
}
],
"borderWidth":0,
"backgroundColor":[
"red",
"blue",
"black",
"silver"
]
},
{
"label":"Category 2",
"data":[
{
"x":"11/1/2021",
"y":3.00
},
{
"x":"11/8/2021",
"y":4.00
},
{
"x":"11/15/2021",
"y":5.00
}
],
"borderWidth":0,
"backgroundColor":[
"red",
"blue",
"black",
"silver"
]
},
{
"label":"Category 3",
"data":[
{
"x":"11/1/2021",
"y":2.00
},
{
"x":"11/8/2021",
"y":4.33
},
{
"x":"11/15/2021",
"y":5.00
}
],
"borderWidth":0,
"backgroundColor":[
"red",
"blue",
"black",
"silver"
]
},
{
"label":"Category 4",
"data":[
{
"x":"11/1/2021",
"y":3.25
},
{
"x":"11/8/2021",
"y":4.33
},
{
"x":"11/15/2021",
"y":4.00
}
],
"borderWidth":0,
"backgroundColor":[
"red",
"blue",
"black",
"silver"
]
},
{
"label":"Category 5",
"data":[
{
"x":"11/1/2021",
"y":3.25
},
{
"x":"11/8/2021",
"y":4.00
},
{
"x":"11/15/2021",
"y":5.00
}
],
"borderWidth":0,
"backgroundColor":[
"red",
"blue",
"black",
"silver"
]
},
{
"label":"Category 6",
"data":[
{
"x":"11/1/2021",
"y":3.00
},
{
"x":"11/8/2021",
"y":4.66
},
{
"x":"11/15/2021",
"y":4.00
}
],
"borderWidth":0,
"backgroundColor":[
"red",
"blue",
"black",
"silver"
]
}
]
},
"options":{
"responsive":false,
"plugins":{
"legend":{
"position":"top"
},
"title":{
"display":true,
"text":"Category Overview"
}
}
}
};
let canvas = document.getElementById('chart');
new Chart(canvas.getContext('2d'), options);
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
<canvas width="400" height="400" id="chart"></canvas>
This is because you provide the background color as an array which makes it so chart.js interpates it as you want those colors to rotate for that dataset. If you want the dataset to be a single color like the example you linked, you just need to pass a string with a single color or an array with a single entry.
document.addEventListener('DOMContentLoaded', function() {
const options = {
"type": "bar",
"data": {
"labels": [
"10/25/2021",
"11/1/2021",
"11/8/2021",
"11/15/2021"
],
"datasets": [{
"label": "Category 1",
"data": [{
"x": "11/1/2021",
"y": 3.25
},
{
"x": "11/8/2021",
"y": 3.66
},
{
"x": "11/15/2021",
"y": 4.00
}
],
"borderWidth": 0,
"backgroundColor": "red"
},
{
"label": "Category 2",
"data": [{
"x": "11/1/2021",
"y": 3.00
},
{
"x": "11/8/2021",
"y": 4.00
},
{
"x": "11/15/2021",
"y": 5.00
}
],
"borderWidth": 0,
"backgroundColor": "blue"
},
{
"label": "Category 3",
"data": [{
"x": "11/1/2021",
"y": 2.00
},
{
"x": "11/8/2021",
"y": 4.33
},
{
"x": "11/15/2021",
"y": 5.00
}
],
"borderWidth": 0,
"backgroundColor": "black"
},
{
"label": "Category 4",
"data": [{
"x": "11/1/2021",
"y": 3.25
},
{
"x": "11/8/2021",
"y": 4.33
},
{
"x": "11/15/2021",
"y": 4.00
}
],
"borderWidth": 0,
"backgroundColor": "silver"
},
{
"label": "Category 5",
"data": [{
"x": "11/1/2021",
"y": 3.25
},
{
"x": "11/8/2021",
"y": 4.00
},
{
"x": "11/15/2021",
"y": 5.00
}
],
"borderWidth": 0,
"backgroundColor": "pink"
},
{
"label": "Category 6",
"data": [{
"x": "11/1/2021",
"y": 3.00
},
{
"x": "11/8/2021",
"y": 4.66
},
{
"x": "11/15/2021",
"y": 4.00
}
],
"borderWidth": 0,
"backgroundColor": "orange"
}
]
},
"options": {
"responsive": false,
"plugins": {
"legend": {
"position": "top"
},
"title": {
"display": true,
"text": "Category Overview"
}
}
}
};
let canvas = document.getElementById('chart');
new Chart(canvas.getContext('2d'), options);
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
<canvas width="400" height="400" id="chart"></canvas>
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
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
]
}
}
}
]
}