What do x2 and y2 do to mark_line?

[Hadley Wickham]

I can't quite parse the documentation:

For marks without Cartesian extents (e.g., path, arc, etc) the same
calculations are applied, but are only used to determine the mark's
ultimate x and y position. That is, a width property may affect the
ultimate position, but otherwise is not visualized.

A simple example (attached), suggests that they don't do anything.

I'm mostly interested because the comment at
https://github.com/trifacta/vega/issues/31#issuecomment-16597679
suggests that I might be able to use "y2": {"group":"height"} to draw
a line from one side of the plot to the other. Or does that hint only
apply to marks with both location and dimension?

Hadley

--
Chief Scientist, RStudio
http://had.co.nz/

[Marc Prud'hommeaux]

Hadley-

I too have observed that it isn't possible to draw a single line mark using x,y,x2,y2 (or width/height). It seems that line marks are just drawn from x(d¹),y(d¹)->x(d²),y(d²)->...->x(dⁿ),y(dⁿ), and x2/y2 are ignored. Maybe it would be nice if, when x2 and/or y2 are specified, line marks would be drawn from x(d¹),y(d¹)->x2(d¹),y2(d¹)->x(d²),y(d²)->x2(d²),y2(d²)->...->x(dⁿ),y(dⁿ)->x2(dⁿ),y2(dⁿ).

For the time being, I did work around this by using the new (undocumented) "rule" mark, but I'm not sure if this is intended for public use. For example, the following mark will draw a red line across center of the chart:


{
"type": "rule",
"properties": {
"enter": {
"x": {"value": 0},
"y": {"value": 0},
"x2": {"group": "width"},
"y2": {"group": "height"},
"stroke": {"value": "red"},
"strokeWidth": {"value": 10}

> --
> You received this message because you are subscribed to the Google Groups "vega-js" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.
> <mark-line-y2.json>

[jh...@trifacta.com]

Here's how x/x2 (and analagously, y/y2) properties currently work:

If x and x2 are specified (width is ignored):

item.x = min(x, x2)

item.width = abs(x2 - x)

If x2 and width (but not x) are specified:

item.x = x2 - width

item.width = width

If x2 (but not x and not width) are specified (as of v1.3.3):

item.x = x2

item.width = undefined

Following this convention, the width value can affect the position of a line element only in conjunction with x2. In general, the final x value will either be the value of the x property, or the minimum of the x and x2 properties if both are specified.

I should also note that Vega expects width and height values to be non-negative numbers.

-jeff

[Hadley Wickham]

On Tue, Aug 20, 2013 at 11:50 AM, <jh...@trifacta.com> wrote:
> Here's how x/x2 (and analagously, y/y2) properties currently work:
>
> If x and x2 are specified (width is ignored):
> item.x = min(x, x2)
> item.width = abs(x2 - x)
>
> If x2 and width (but not x) are specified:
> item.x = x2 - width
> item.width = width
>
> If x2 (but not x and not width) are specified (as of v1.3.3):
> item.x = x2
> item.width = undefined
>
> Following this convention, the width value can affect the position of a line
> element only in conjunction with x2. In general, the final x value will
> either be the value of the x property, or the minimum of the x and x2
> properties if both are specified.

Thanks, that's useful. Any comments on drawing a line that completely
spans the plot?

[Jeffrey Heer]

I'm not sure precisely what you mean, but here are properties to "span" a plot. For a rule or line, it will span the group diagonally. For a rect, it will fill the entire group.

"x": {"value": 0},

"x2": {"group": "width"},

"y": {"value": 0},

"y2": {"group": "height"},

-jeff

[Hadley Wickham]

I think I'm being dumb, but how do I use that with a line?

With a rect, it's obvious:

{
"type": rect
"properties": { "update": {

"x": {"value": 0},
"x2": {"group": "width"},
"y": {"value": 0},
"y2": {"group": "height"},
}
}

But you need to provide multiple values to a line. Can I do this to
construct a line that goes from the bottom-left to the top-right
corner?

{
"type": rect
"properties": { "update": {
"x": [{"value": 0},{"group": "width"}],
"y": [{"value": 0},{"group": "height"}]
}
}


Hadley

> --
> You received this message because you are subscribed to the Google Groups
> "vega-js" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to vega-js+u...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

[yangha...@gmail.com]

Ever got an answer to this?  I also couldn't get lines to work this way.

[Hugh Devlin]

I got horizontal and vertical lines across the graph using rule:

    {

        "type": "rule",
         "properties": {
            "enter": {

                "x": {"value": 1},
                "x2": {"group": "width"},
                "y2": {"scale": "y", "value": 10},                   
                "stroke": {"value": "green"},
                "strokeWidth": {"value": 1},
                "strokeDash": {"value": [10, 5]}
            }
        }
    },
    {

        "type": "rule",
         "properties": {
            "enter": {

                "y": {"value": 1},
                "y2": {"group": "height"},
                "x2": {"scale": "x", "value": 15},                   
                "stroke": {"value": "green"},
                "strokeWidth": {"value": 1},
                "strokeDash": {"value": [10, 5]}
            }
        }
    }