Vega with a secondary y axis

Question

I am trying to create a parcel plot with a secondary y axis in Vega. I am building from the example area diagram depicted here in the editor. I added a “col” field for the data and use facet transform to organize the data into groups with “col” as the key. I added an auxiliary axis and a scale for each group, but I can’t understand how when declaring labels to match the data column with the corresponding scale. In other words, I don’t know how to have “y” and “y2” in the “enter” property, use the “A” scale if the current label is COL = A or the “B” scale if the current label is COL = B. Here is the vega object I'm working on:

{ "width": 500, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 30}, "data": [ { "name": "table", "values": [ {"x": 1, "y": 28, "col": "A"}, {"x": 2, "y": 55, "col": "A"}, {"x": 3, "y": 43, "col": "A"}, {"x": 4, "y": 91, "col": "A"}, {"x": 5, "y": 81, "col": "A"}, {"x": 6, "y": 53, "col": "A"}, {"x": 7, "y": 19, "col": "A"}, {"x": 8, "y": 87, "col": "A"}, {"x": 9, "y": 52, "col": "A"}, {"x": 10, "y": 48, "col": "A"}, {"x": 11, "y": 24, "col": "A"}, {"x": 12, "y": 49, "col": "A"}, {"x": 13, "y": 87, "col": "A"}, {"x": 14, "y": 66, "col": "A"}, {"x": 15, "y": 17, "col": "A"}, {"x": 16, "y": 27, "col": "A"}, {"x": 17, "y": 68, "col": "A"}, {"x": 18, "y": 16, "col": "A"}, {"x": 19, "y": 49, "col": "A"}, {"x": 20, "y": 15, "col": "A"}, {"x": 1, "y": 26, "col": "B"}, {"x": 2, "y": 59, "col": "B"}, {"x": 3, "y": 50, "col": "B"}, {"x": 4, "y": 94, "col": "B"}, {"x": 5, "y": 83, "col": "B"}, {"x": 6, "y": 50, "col": "B"}, {"x": 7, "y": 17, "col": "B"}, {"x": 8, "y": 81, "col": "B"}, {"x": 9, "y": 48, "col": "B"}, {"x": 10, "y": 20, "col": "B"}, {"x": 11, "y": 20, "col": "B"}, {"x": 12, "y": 80, "col": "B"}, {"x": 13, "y": 90, "col": "B"}, {"x": 14, "y": 22, "col": "B"}, {"x": 15, "y": 20, "col": "B"}, {"x": 16, "y": 19, "col": "B"}, {"x": 17, "y": 2, "col": "B"}, {"x": 18, "y": 4, "col": "B"}, {"x": 19, "y": 3, "col": "B"}, {"x": 20, "y": 1, "col": "B"} ] } ], "scales": [ { "name": "x", "type": "linear", "range": "width", "zero": false, "domain": {"data": "table", "field": "data.x"} }, { "name": "A", "type": "linear", "range": "height", "nice": true, "domain": {"data": "table", "field": "data.y"} }, { "name": "B", "type": "linear", "range": "height", "nice": true, "domain": {"data": "table", "field": "data.y"} }, { "name": "color", "type": "ordinal", "range": "category10" } ], "axes": [ {"type": "x", "scale": "x", "ticks": 20}, {"type": "y", "scale": "A"}, {"type": "y", "scale": "B", "orient":"right"} ], "marks": [ { "type": "group", "from": { "data": "table", "transform": [{"type": "facet", "keys": ["data.col"]}] }, "marks": [ { "type": "area", "properties": { "enter": { "interpolate": {"value": "monotone"}, "x": {"scale": "x", "field": "data.x"}, "y": {"scale": "A", "field": "data.y"}, "y2": {"scale": "A", "value": 0}, "fill": {"scale": "color", "field": "data.col"} }, "update": { "fillOpacity": {"value": 1} }, "hover": { "fillOpacity": {"value": 0.5} } } } ] } ] } 

Answer 1

We are looking for the same similar answer to which I found your question. Then I used your code for playback and noticed that you nested other array labels in your “mark” array. Then I played in an interactive Vega editor and found the following solution: instead of using cols “A” and “B”, I defined “z” (using a value close to 200), and used data.z for the “B” scale. Then another array of labels was added after the existing one and only changed the value of the "y" field. This seems to work in an interactive editor.

 { "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ { "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2, "y": 55, "z" : 150}, {"x": 3, "y": 43}, {"x": 4, "y": 91}, {"x": 5, "y": 81}, {"x": 6, "y": 53}, {"x": 7, "y": 19}, {"x": 8, "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ] } ], "scales": [ { "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "data.x"} }, { "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "data.y"} }, { "name": "z", "range": "height", "nice": true, "domain": {"data": "table", "field": "data.z"} } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"}, {"type": "y", "scale": "z", "orient" : "right"} ], "marks": [ { "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "data.x"}, "width": {"scale": "x", "band": true, "offset": -2}, "y": {"scale": "y", "field": "data.y"}, "y2": {"scale": "y", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } }, { "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "data.x"}, "width": {"scale": "x", "band": true, "offset": -9}, "y" : {"scale":"z", "field": "data.z"}, "y2": {"scale": "y", "value": 0} }, "update": { "fill": {"value": "green"} }, "hover": { "fill": {"value": "orange"} } } } ] } 

Thank you very much for the question, I found out quite a bit today. :)