Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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}
          }
        }
      ]
    }
  ]
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search