vega horizontal bar charts -


the vega documentation/tutorials suggest setting horizontal bar chart easy, can't figure out life of me. how go changing vertical bar chart, such http://vega.github.io/vega-editor/index.html?spec=bar, horizontal one?

like this

{   "width": 200,   "height": 210,   "padding": "auto",   "data": [     {       "name": "raw",       "values": [         {"x": "a","y": 28},         {"x": "b","y": 55},         {"x": "c","y": 43},         {"x": "d","y": 91},         {"x": "e","y": 81},         {"x": "f","y": 53},         {"x": "g","y": 19},         {"x": "h","y": 87},         {"x": "i","y": 52}       ],       "format": {"parse": {"y": "number"}},       "transform": [{"type": "filter","test": "(d.data.y!==null)"}]     }   ],   "scales": [],   "marks": [     {       "_name": "cell",       "type": "group",       "properties": {         "enter": {"width": {"value": 200},"height": {"value": 210}}       },       "scales": [         {           "name": "x",           "type": "linear",           "domain": {"data": "raw","field": "data.y"},           "range": [0,200],           "zero": true,           "reverse": false,           "round": true,           "nice": true         },         {           "name": "y",           "type": "ordinal",           "domain": {"data": "raw","field": "data.x"},           "sort": true,           "range": [0,210],           "bandwidth": 21,           "round": true,           "nice": true,           "points": true,           "padding": 1         }       ],       "axes": [         {           "type": "x",           "scale": "x",           "properties": {             "grid": {               "stroke": {"value": "#000000"},               "opacity": {"value": 0.08}             }           },           "layer": "back",           "format": "",           "ticks": 5,           "titleoffset": 38,           "grid": true,           "title": "y"         },         {           "type": "y",           "scale": "y",           "properties": {             "labels": {"text": {"template": "{{data | truncate:25}}"}},             "grid": {               "stroke": {"value": "#000000"},               "opacity": {"value": 0.08}             }           },           "layer": "back",           "titleoffset": 28,           "grid": true,           "title": "x"         }       ],       "marks": [         {           "type": "rect",           "from": {"data": "raw"},           "properties": {             "enter": {               "x": {"scale": "x","field": "data.y"},               "x2": {"value": 0},               "yc": {"scale": "y","field": "data.x"},               "height": {"value": 21,"offset": -1},               "fill": {"value": "#4682b4"}             },             "update": {               "x": {"scale": "x","field": "data.y"},               "x2": {"value": 0},               "yc": {"scale": "y","field": "data.x"},               "height": {"value": 21,"offset": -1},               "fill": {"value": "#4682b4"}             }           }         }       ],       "legends": []     }   ] }

i generated chart from

{   "data": {     "values": [       {"x":"a", "y":28}, {"x":"b", "y":55}, {"x":"c", "y":43},       {"x":"d", "y":91}, {"x":"e", "y":81}, {"x":"f", "y":53},       {"x":"g", "y":19}, {"x":"h", "y":87}, {"x":"i", "y":52}     ]   },   "marktype": "bar",   "encoding": {     "y": {"type": "o","name": "x"},     "x": {"type": "q","name": "y"}   } }

with vega-lite (https://vega.github.io/vega-lite/).


Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more