CODEWITHSUNDEEP
jsonchartsvisualizationvega-litevega
Martin Lam
Martin Lam

Reputation: 11

Dynamically Filter Line Chart (context: Hide historical data on index chart)

I am prototyping something with Vega-Lite index chart https://vega.github.io/vega-lite/examples/interactive_index_chart.html

[Interactive index chart](https://i.sstatic.net/tCVZdBVy.png)

I love the fact that I can reindex the chart to any given date, and see the relative changes between the line series.

However, I find that the lines on the LEFT of the index point to be distracting / confusing to users. Is there any way to FILTER OUT all line charts left of the index point?

I have re-coded the re indexing on click instead of mouse over.. would be great to also just filter out anything prior to my click date. I am new to VEGA, so honestly no clue how to do filter on click.

Upvotes: 1

Views: 61

Answers (2)

davidebacci
davidebacci

Reputation: 30324

You mean like this?

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/stocks.csv",
    "format": {"parse": {"date": "date"}}
  },
  "width": 650,
  "height": 300,
  "layer": [
    {
      "params": [{
        "name": "index",
        "value": [{"x": {"year": 2005, "month": 1, "date": 1}}],
        "select": {
          "type": "point",
          "encodings": ["x"],
          "on": "pointerover",
          "nearest": true
        }
      }],
      "mark": "point",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "opacity": {"value": 0}
      }
    },
    {
      "transform": [
        {
          "lookup": "symbol",
          "from": {"param": "index", "key": "symbol"}
        },
        {
          "calculate": "datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0",
          "as": "indexed_price"
        },
        {"filter":"datum.date>index.date"}
      ],
      "mark": "line", 
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "y": {
          "field": "indexed_price", "type": "quantitative",
          "axis": {"format": "%"}
        },
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "transform": [{"filter": {"param": "index"}}],
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "color": {"value": "firebrick"}
      },
      "layer": [
        {"mark": {"type": "rule", "strokeWidth": 0.5}},
        {
          "mark": {"type": "text", "align": "center", "fontWeight": 100},
          "encoding": {
            "text": {"field": "date", "timeUnit": "yearmonth"},
            "y": {"value": 310}
          }
        }
      ]
    }
  ]
}

Upvotes: 0

APB Reports
APB Reports

Reputation: 2451

In your second layer add this transform filter:

{
"filter": "datum.index && datum.index.date <= datum.date"
},

Maybe consider adding the opacity to the left lines instead. So they are very faint? Just an idea.

Upvotes: 0

Related Questions