exercise/3-Export-Widget.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import lux\n",
    "\n",
    "# Collecting basic usage statistics for Lux (For more information, see: https://tinyurl.com/logging-consent)\n",
    "lux.logger = True # Remove this line if you do not want your interactions recorded"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In this tutorial, we look at how you can select visualizations of interest from the Lux widget and export them for further analysis. We will be working with the [Happy Planet Index](http://happyplanetindex.org/) dataset, which contains metrics related to well-being for 140 countries around the world. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df = pd.read_csv('https://github.com/lux-org/lux-datasets/blob/master/data/hpi.csv?raw=true')\n",
    "lux.config.default_display = \"lux\" # Set Lux as default display"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For the convienience of this tutorial, we set Lux as the default display to avoid having to Toggle from the Pandas table display everytime."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Exporting one or more visualizations from widget"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In Lux, you can click on visualizations of interest and export them into a separate widget for further processing."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<img src=\"https://github.com/lux-org/lux-resources/blob/master/doc_img/export-1.gif?raw=true\" width=700 alt=\"1) scroll through Correlation, then 2) click on any 3 visualization (let's say 2nd, 5th and something towards the end), then 3) click on the export button and make sure the blue message box show up\">"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Select charts from the widget above and click on the export button to access them here.\n",
    "df.exported"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "From the dataframe recommendations, the visualization showing the relationship between `GDPPerCapita` and `Footprint` is very interesting. In particular, there is an outlier with extremely high ecological footprint as well as high GDP per capita. Select this visualization and click on the export button."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Select the GDP by Footprint visualization and export it to the `gdp_footprint` variable\n",
    "gdp_footprint = df.exported[0]\n",
    "gdp_footprint"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Setting the Intent with a Vis input"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Often, we might be interested in other visualizations that is related to a visualization of interest and want to learn more. With the exported Vis, we can update the intent associated with dataframe to be based on the selected Vis to get more recommendations related to this visualization."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df.intent = gdp_footprint\n",
    "df"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Exporting Visualizations as Code"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To allow further edits of visualizations, visualizations can be exported to code in [Altair](https://altair-viz.github.io/) or as [Vega-Lite](https://vega.github.io/vega-lite/) specification."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "print (gdp_footprint.to_Altair())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This can be copy-and-pasted back into a new notebook cell for further editing."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "\n",
    "chart = alt.Chart(df).mark_circle().encode(\n",
    "    x=alt.X('Footprint',scale=alt.Scale(domain=(0.6, 15.8)),type='quantitative'),\n",
    "    y=alt.Y('GDPPerCapita',scale=alt.Scale(domain=(244, 105447)),type='quantitative')\n",
    ")\n",
    "chart = chart.configure_mark(tooltip=alt.TooltipContent('encoding')) # Setting tooltip as non-null\n",
    "chart = chart.interactive() # Enable Zooming and Panning\n",
    "\n",
    "chart = chart.configure_title(fontWeight=500,fontSize=13,font='Helvetica Neue')\n",
    "chart = chart.configure_axis(titleFontWeight=500,titleFontSize=11,titleFont='Helvetica Neue',\n",
    "\t\t\tlabelFontWeight=400,labelFontSize=8,labelFont='Helvetica Neue',labelColor='#505050')\n",
    "chart = chart.configure_legend(titleFontWeight=500,titleFontSize=10,titleFont='Helvetica Neue',\n",
    "\t\t\tlabelFontWeight=400,labelFontSize=8,labelFont='Helvetica Neue')\n",
    "chart = chart.properties(width=160,height=150)\n",
    "\n",
    "chart"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can also export this as Vega-Lite specification and vis/edit the specification on [Vega Editor](https://vega.github.io/editor).\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "print (gdp_footprint.to_VegaLite())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}