Old school D3 from simpler times

All examples By author By category About

sirahd

Full window Github gist

Vega-lite Scatterplot with Tooltip

A Vega-lite scatterplot example for vega-tooltip. You can specify the limited sets of field to display in tooltip by setting showAllFields to false, then specify those in fields array. You can also rename the field by specifying title

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vega-tooltip@0/build/vega-tooltip.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vega-tooltip@0"></script>
</head>

<body>
  <div id="vis-scatter"></div>
  <script>
    var vlSpec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  		"data": {"url": "https://raw.githubusercontent.com/vega/vega-datasets/gh-pages/data/cars.json"},
  		"mark": "circle",
  		"encoding": {
    		"x": {"field": "Horsepower", "type": "quantitative"},
    		"y": {"field": "Miles_per_Gallon", "type": "quantitative"}
  		}
    }

var opt = {
      mode: "vega-lite",
      actions: false
    };
    vegaEmbed("#vis-scatter", vlSpec, opt).then(function (result) {
      var tooltipOption = {
    	showAllFields: false,
    		fields: [
      		{ field: "Name" },
      		{ field: "Horsepower" },
      		{ field: "Miles_per_Gallon", title: "Miles per Gallon" }
    		]
  		};
      vegaTooltip.vegaLite(result.view, vlSpec, tooltipOption);
    }).catch(console.error);
  </script>
</body>

xxxxxxxxxx
 
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vega-tooltip@0/build/vega-tooltip.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vega-tooltip@0"></script>
</head>
​
<body>
  <div id="vis-scatter"></div>
  <script>
    var vlSpec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
        "data": {"url": "https://raw.githubusercontent.com/vega/vega-datasets/gh-pages/data/cars.json"},
        "mark": "circle",
        "encoding": {
            "x": {"field": "Horsepower", "type": "quantitative"},
            "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
        }
    }
​
    var opt = {
      mode: "vega-lite",
      actions: false
    };
    vegaEmbed("#vis-scatter", vlSpec, opt).then(function (result) {
      var tooltipOption = {
        showAllFields: false,
            fields: [
            { field: "Name" },
            { field: "Horsepower" },
            { field: "Miles_per_Gallon", title: "Miles per Gallon" }
            ]
        };
      vegaTooltip.vegaLite(result.view, vlSpec, tooltipOption);
    }).catch(console.error);
  </script>
</body>
    

https://cdn.jsdelivr.net/npm/vega@3

https://cdn.jsdelivr.net/npm/vega-lite@2

https://cdn.jsdelivr.net/npm/vega-embed@3

https://cdn.jsdelivr.net/npm/vega-tooltip@0