{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import hvplot.pandas  # noqa"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`heatmap` can be data has two categorical axes. Data can either be pre-computed into a matrix, or it can be 1d and the aggregation will be computed when rendering."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.sampledata import sea_surface_temperature as sst\n",
    "\n",
    "df = sst.sea_surface_temperature\n",
    "df.tail()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In the first example, we'll make a sea surface temperature calendar of sorts:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df.hvplot.heatmap(x='time.month', y='time.day', C='temperature', \n",
    "                  height=500, width=500, colorbar=False)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If the value for each section of the heatmap is pre-computed, then use `x='index'` and `y='columns'` to plot those values. Note to see how to make this same plot in bokeh, see the [bokeh docs](https://docs.bokeh.org/en/latest/docs/user_guide/categorical.html#heat-maps)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.sampledata.unemployment1948 import data\n",
    "\n",
    "data = data.set_index('Year').drop('Annual', axis=1).transpose()\n",
    "data.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "data.hvplot.heatmap(\n",
    "    x='columns', \n",
    "    y='index', \n",
    "    title='US Unemployment 1948—2016', \n",
    "    cmap=[\"#75968f\", \"#a5bab7\", \"#c9d9d3\", \"#e2e2e2\", \"#dfccce\", \"#ddb7b1\", \"#cc7878\", \"#933b41\", \"#550b1d\"], \n",
    "    xaxis='top', \n",
    "    rot=70,\n",
    "    width=800, height=300).opts(\n",
    "    toolbar=None, \n",
    "    fontsize={'title': 10, 'xticks': 5, 'yticks': 5}\n",
    ")"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}