Dynamic selection of x and y axis

[emailvenkatm]

Hello,

Thank you so much for building this great library. I was able to run the examples in my local and they work perfect on my machine.
I would like to select one of the column as x-axis and y-axis dynamically from a UI form and I tried modifying the code like below by adding options. But its not working. Can someone please help?

• vconcat:

  • hconcat:

    • input: search
      label: item
      as: $query
      from: compounds
      column: d
      type: contains

    • input: menu
      label: X-axis
      as: $xAxis
      options: [a,b,c,d]

    • input: menu
      label: Y-axis
      as: $yAxis
      options: [a,b,c,d]

  • vspace: 10

  • plot:

    • mark: dot
      data: { from: compounds, filterBy: $query }

      x: $xAxis
      y: $yAxis
      fill: d
      r: 2
      opacity: 0.1

    • mark: regressionY
      data: { from: compounds, filterBy: $query }
      x: $xAxis
      y: $yAxis
      stroke: c

    • select: intervalXY
      as: $query
      brush: { fillOpacity: 0, stroke: black }
      xyDomain: Fixed
      colorDomain: Fixed
      margins: { left: 35, top: 20, right: 1 }
      width: 570
      height: 350

  • vspace: 5

  • input: table
    from: compounds
    maxWidth: 570
    height: 250
    filterBy: $query
    columns: [a,b,c,d]
    width: { a: 180, b: 70, c: 100, d: 50}

[mhkeller]

Take a look at this example here: https://observablehq.com/d/948a20fca1abb2d6 which uses what is described in this discussion (#261)

Your options have to be appropriately wrapped as channel references for Mosaic to understand what to do. It doesn't work simply as passing in a string as the channel name.

edit: here's a more built-out example https://observablehq.com/d/066dfede40317171