Vertical line w/ highlighted point and tool tip

33 views
Skip to first unread message

Rachel Thoms

unread,
Aug 18, 2021, 12:45:38 PM8/18/21
to vega-js
Hi all,

I am new to Vega, and I would like to create a tool tip on my stacked area chart, where the data values for the two areas are displayed when hovering over a specific year. It would be similar to the screen shot below.

I am using an example I found on the vega github that uses a voroni transformation, but maybe this is too complicated for my need. I am working through getting a highlighted point to display along the max(y1) of the stacked areas. My tool tip and highlighted point only display data for one of the variables. How can I get two highlighted points, one for each variable, that track to the year that the mouse is hovering over? Could anyone provide me with an example where a similar tool tip is used? 

{
  "description": "A basic stacked area chart example.",
  "width": 500,
  "height": 200,
  "padding": 5,

  "data": [{
      "name": "production",
      "url": "https://wri-rw.carto.com/api/v2/sql?q=SELECT gid_0, variable, date, value FROM ow_widget_territory WHERE widget = 'fishery production' AND gid_0 = 'IDN' AND variable != 'GlobalProduction_quantity' ORDER BY date ASC, variable ASC",
      "format": {"type": "json", "property": "rows"},
      "transform": [{"type": "stack",
          "field": "value",
          "groupby": ["gid_0","date"]
          }]
    },
    {
      "name": "highlightedPoint",
      "source": "production",
      "transform": [
        {
          "type": "filter",
          "expr": "(hover && hover.datum.date === datum.date && hover.datum.y1 === datum.y1) "
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "hover",
      "value": null,
      "on": [
        {"events": "@points_voronoi:mouseover", "update": "datum"},
        {"events": "@points_voronoi:mouseout", "update": "null"}
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "point",
      "range": "width",
      "domain": {"data": "production", "field": "date"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true, "zero": true,
      "domain": {"data": "production", "field": "y1"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "production", "field": "variable"}
    }
  ],

  "axes": [
    {"orient": "bottom", 
    "scale": "x", 
    "zindex": 1,
    "labelFont": "Arial",
    "labelFontSize":11, 
    "labelOverlap": true},
    {"orient": "left", 
    "scale": "y", 
    "zindex": 1,
    "labelFont": "Arial", 
    "labelBaseline": "middle",
    "labelAlign": "right",
    "labelPadding": 3,
    "grid": true,
    "gridOpacity": 0.2,
    "encode":{
        "labels":{
          "update":{
            "text": {"signal": "format(datum.value, '~s')"}
          }
        }
      }}
  ],

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "production",
          "groupby": "variable"
        }
      },
      "marks": [
        {
          "type": "area",
          "from": {"data": "series"},
          "encode": {
            "enter": {
              "interpolate": {"value": "monotone"},
              "x": {"scale": "x", "field": "date"},
              "y": {"scale": "y", "field": "y0"},
              "y2": {"scale": "y", "field": "y1"},
              "fill": {"scale": "color", "field": "variable"}
            },
            "update": {
              "fillOpacity": {"value": 1}
            },
            "hover": {
              "fillOpacity": {"value": 0.5}
            }
          }
        },
        {
          "name": "points_on_line_1",
          "from": {"data": "series"},
          "type": "symbol",
          "encode": {
            "update": {
              "fill": {"value": "ref"},
              "size": {"value": 10},
              "stroke": {"value": "red"},
              "strokeWidth": {"value": 0.5},
              "x": {"field": "date", "scale": "x"},
              "y": {"field": "y1", "scale": "y"}
            }
          }
        },
        {
          "name": "points_voronoi",
          "type": "path",
          "from": {"data": "points_on_line_1"},
          "encode": {
            "update": {
              "fill": {"value": "transparent"},
              "strokeWidth": {"value": 0.35},
              "stroke": {"value": "red"},
              "strokeOpacity": {"value": 0.2},
              "isVoronoi": {"value": true},
              "tooltip": {"signal": "datum"}
            }
          },
          "transform": [
            {
              "type": "voronoi",
              "x": "datum.x",
              "y": "datum.y",
              "size": [{"signal": "width"}, {"signal": "height"}]
            }
          ]
        },
        {
          "from": {"data": "highlightedPoint"},
          "type": "symbol",
          "interactive": false,
          "encode": {
            "update": {
              "x": {"scale": "x", "field": "date"},
              "y": {"scale": "y", "field": "y1"},
              "stroke": {"value": "orange"},
              "strokeWidth": {"value": 4},
              "fill": {"value": "white"},
              "size": {"value": 150},
              "strokeOpacity": {"value": 0.3}
            }
          }
        }
      ]
    }
  ]
}
Screenshot 2021-08-18 123851.png
Reply all
Reply to author
Forward
0 new messages