ijlyttle/.block

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


## README.md

      
    Raw
  

              README.md
            
          
    The tooltip does not appear as I expect. The date "2018-01-01" appears as "2017-12-31". Please note that my computer is in the "America/Chicago" time zone, so at "2018-01-01" UTC, it was "2017-12-31" in my timezone.
I am using a toy dataset with dates 2018-01-01 to 2018-01-07, inclusive.
The x scale is UTC, and I expect the tooltip to parse date as UTC because the date string is in ISO format.
If I specify the date in the tooltip as a nominal variable, it works as I expect.
    "tooltip": [
      {
        "field": "date",
        "type": "nominal"
      },
      {
        "field": "value",
        "type": "quantitative"
      }
    ]
Update

A solution to the problem is to put a UTC scale with the tooltip: https://bl.ocks.org/ijlyttle/bccff7673c98e61b887684dbe597cbd3

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <!-- uploaded using vegawidget -->
  <script src="https://cdn.jsdelivr.net/npm/vega@4"></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="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/v2.json",
  "description": "Tooltip issue",
  "data": {
    "values": [
      {
        "date": "2018-01-01",
        "interval_start_utc": "2018-01-01T00:00:00Z",
        "interval_end_utc": "2018-01-02T00:00:00Z",
        "value": 0.0932
      },
      {
        "date": "2018-01-02",
        "interval_start_utc": "2018-01-02T00:00:00Z",
        "interval_end_utc": "2018-01-03T00:00:00Z",
        "value": 0.4407
      },
      {
        "date": "2018-01-03",
        "interval_start_utc": "2018-01-03T00:00:00Z",
        "interval_end_utc": "2018-01-04T00:00:00Z",
        "value": 0.4625
      },
      {
        "date": "2018-01-04",
        "interval_start_utc": "2018-01-04T00:00:00Z",
        "interval_end_utc": "2018-01-05T00:00:00Z",
        "value": 0.3028
      },
      {
        "date": "2018-01-05",
        "interval_start_utc": "2018-01-05T00:00:00Z",
        "interval_end_utc": "2018-01-06T00:00:00Z",
        "value": 0.3285
      },
      {
        "date": "2018-01-06",
        "interval_start_utc": "2018-01-06T00:00:00Z",
        "interval_end_utc": "2018-01-07T00:00:00Z",
        "value": 0.15
      },
      {
        "date": "2018-01-07",
        "interval_start_utc": "2018-01-07T00:00:00Z",
        "interval_end_utc": "2018-01-08T00:00:00Z",
        "value": 0.2946
      }
    ]
  },
  "mark": "rect",
  "encoding": {
    "x": {
      "field": "interval_start_utc",
      "scale": {
        "type": "utc"
      },
      "title": "date",
      "type": "temporal"
    },
    "x2": {
      "field": "interval_end_utc",
      "type": "temporal"
    },
    "color": {
      "field": "value",
      "type": "quantitative"
    },
    "tooltip": [
      {
        "field": "date",
        "type": "temporal",
        "format": "%Y-%m-%d"
      },
      {
        "field": "value",
        "type": "quantitative"
      }
    ]
  }
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<!-- uploaded using vegawidget -->
	<script src="https://cdn.jsdelivr.net/npm/vega@4"></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="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/v2.json",
	"description": "Tooltip issue",
	"data": {
	"values": [
	{
	"date": "2018-01-01",
	"interval_start_utc": "2018-01-01T00:00:00Z",
	"interval_end_utc": "2018-01-02T00:00:00Z",
	"value": 0.0932
	},
	{
	"date": "2018-01-02",
	"interval_start_utc": "2018-01-02T00:00:00Z",
	"interval_end_utc": "2018-01-03T00:00:00Z",
	"value": 0.4407
	},
	{
	"date": "2018-01-03",
	"interval_start_utc": "2018-01-03T00:00:00Z",
	"interval_end_utc": "2018-01-04T00:00:00Z",
	"value": 0.4625
	},
	{
	"date": "2018-01-04",
	"interval_start_utc": "2018-01-04T00:00:00Z",
	"interval_end_utc": "2018-01-05T00:00:00Z",
	"value": 0.3028
	},
	{
	"date": "2018-01-05",
	"interval_start_utc": "2018-01-05T00:00:00Z",
	"interval_end_utc": "2018-01-06T00:00:00Z",
	"value": 0.3285
	},
	{
	"date": "2018-01-06",
	"interval_start_utc": "2018-01-06T00:00:00Z",
	"interval_end_utc": "2018-01-07T00:00:00Z",
	"value": 0.15
	},
	{
	"date": "2018-01-07",
	"interval_start_utc": "2018-01-07T00:00:00Z",
	"interval_end_utc": "2018-01-08T00:00:00Z",
	"value": 0.2946
	}
	]
	},
	"mark": "rect",
	"encoding": {
	"x": {
	"field": "interval_start_utc",
	"scale": {
	"type": "utc"
	},
	"title": "date",
	"type": "temporal"
	},
	"x2": {
	"field": "interval_end_utc",
	"type": "temporal"
	},
	"color": {
	"field": "value",
	"type": "quantitative"
	},
	"tooltip": [
	{
	"field": "date",
	"type": "temporal",
	"format": "%Y-%m-%d"
	},
	{
	"field": "value",
	"type": "quantitative"
	}
	]
	}
	}