ijlyttle/.block

## .block
license: mit
height: 500
scrolling: yes
border: yes


## readme.md

      
    Raw
  

              readme.md
            
          
    I am trying to create a set of charts that use two types of selections:

overview + detail (example), using a selection on the bottom chart to drive the scales in the top chart.
tooltip rule (example), using a hovering selection on the top chart to show a vertical rule that can be used as a tooltip of sorts.

As you can see, this works - sort of. The problem is that the tooltip in the second selection seems "unaware" of the scale change from the first selection.
Three possibilties I can see here:

Am I doing something wrong?
Am I trying something that is not meant to work?
Is there a bug in Vega-Lite?


## index.html
<!DOCTYPE html>
<html>
<head>
  <!-- uploaded using vegawidget -->
  <script src="https://cdn.jsdelivr.net/npm/vega@4.2.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc6"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.19.2"></script>
  <link rel="stylesheet" type="text/css" href="vega-embed.css">
</head>
<body>

<div id="vis"></div>

<script type="text/javascript">
  const spec = "spec.json";
  const opt = {"defaultStyle":true,"renderer":"canvas"};
  vegaEmbed('#vis', spec, opt).then(function(result) {
    // access view as result.view
  }).catch(console.error);
</script>
</body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## spec.json
{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {
    "url": "https://vega.github.io/vega-datasets/data/sp500.csv"
  },
  "vconcat": [
    {
      "layer": [
        {
          "width": 480,
          "mark": "area",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {
                "domain": {
                  "selection": "brush"
                }
              },
              "axis": {
                "title": ""
              }
            },
            "y": {
              "field": "price",
              "type": "quantitative"
            }
          }
        },
        {
          "width": 480,
          "mark": "point",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {
                "domain": {
                  "selection": "brush"
                }
              }
            },
            "y": {
              "field": "price",
              "type": "quantitative"
            },
            "opacity": {
              "value": 0
            }
          },
          "selection": {
            "tooltip": {
              "type": "single",
              "nearest": true,
              "on": "mouseover",
              "encodings": [
                "x"
              ],
              "empty": "none"
            }
          }
        },
        {
          "transform": [
            {
              "filter": {
                "selection": "tooltip"
              }
            }
          ],
          "mark": "rule",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {
                "domain": {
                  "selection": "brush"
                }
              }
            }
          }
        }
      ]
    },
    {
      "width": 480,
      "height": 60,
      "mark": "area",
      "selection": {
        "brush": {
          "type": "interval",
          "encodings": [
            "x"
          ]
        }
      },
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal"
        },
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {
            "tickCount": 3,
            "grid": false
          }
        }
      }
    }
  ]
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<!-- uploaded using vegawidget -->
	<script src="https://cdn.jsdelivr.net/npm/vega@4.2.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc6"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.19.2"></script>
	<link rel="stylesheet" type="text/css" href="vega-embed.css">
	</head>
	<body>

	<div id="vis"></div>

	<script type="text/javascript">
	const spec = "spec.json";
	const opt = {"defaultStyle":true,"renderer":"canvas"};
	vegaEmbed('#vis', spec, opt).then(function(result) {
	// access view as result.view
	}).catch(console.error);
	</script>
	</body>
	</html>
	{
	"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
	"data": {
	"url": "https://vega.github.io/vega-datasets/data/sp500.csv"
	},
	"vconcat": [
	{
	"layer": [
	{
	"width": 480,
	"mark": "area",
	"encoding": {
	"x": {
	"field": "date",
	"type": "temporal",
	"scale": {
	"domain": {
	"selection": "brush"
	}
	},
	"axis": {
	"title": ""
	}
	},
	"y": {
	"field": "price",
	"type": "quantitative"
	}
	}
	},
	{
	"width": 480,
	"mark": "point",
	"encoding": {
	"x": {
	"field": "date",
	"type": "temporal",
	"scale": {
	"domain": {
	"selection": "brush"
	}
	}
	},
	"y": {
	"field": "price",
	"type": "quantitative"
	},
	"opacity": {
	"value": 0
	}
	},
	"selection": {
	"tooltip": {
	"type": "single",
	"nearest": true,
	"on": "mouseover",
	"encodings": [
	"x"
	],
	"empty": "none"
	}
	}
	},
	{
	"transform": [
	{
	"filter": {
	"selection": "tooltip"
	}
	}
	],
	"mark": "rule",
	"encoding": {
	"x": {
	"field": "date",
	"type": "temporal",
	"scale": {
	"domain": {
	"selection": "brush"
	}
	}
	}
	}
	}
	]
	},
	{
	"width": 480,
	"height": 60,
	"mark": "area",
	"selection": {
	"brush": {
	"type": "interval",
	"encodings": [
	"x"
	]
	}
	},
	"encoding": {
	"x": {
	"field": "date",
	"type": "temporal"
	},
	"y": {
	"field": "price",
	"type": "quantitative",
	"axis": {
	"tickCount": 3,
	"grid": false
	}
	}
	}
	}
	]
	}