j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Marks/Object Model/Map.ipynb

@@ -0,0 +1,182 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from bqplot import (\n",
+    "    Figure,\n",
+    "    Map,\n",
+    "    Mercator,\n",
+    "    Orthographic,\n",
+    "    ColorScale,\n",
+    "    ColorAxis,\n",
+    "    AlbersUSA,\n",
+    "    topo_load,\n",
+    "    Tooltip,\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Basic Map ##"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "sc_geo = Mercator()\n",
+    "map_mark = Map(scales={\"projection\": sc_geo})\n",
+    "Figure(marks=[map_mark], title=\"Basic Map Example\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "collapsed": true
+   },
+   "source": [
+    "## Advanced Map and Projection ##"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "sc_geo = Orthographic(scale_factor=375, center=[0, 25], rotate=(-50, 0))\n",
+    "map_mark = Map(\n",
+    "    map_data=topo_load(\"map_data/WorldMap.json\"),\n",
+    "    scales={\"projection\": sc_geo},\n",
+    "    colors={682: \"Green\", 356: \"Red\", 643: \"#0000ff\", \"default_color\": \"DarkOrange\"},\n",
+    ")\n",
+    "Figure(marks=[map_mark], fig_color=\"deepskyblue\", title=\"Advanced Map Example\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "sc_geo.scale = 350"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Choropleth ##"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "sc_geo = Mercator()\n",
+    "sc_c1 = ColorScale(scheme=\"YlOrRd\")\n",
+    "\n",
+    "map_styles = {\n",
+    "    \"color\": {643: 105.0, 4: 21.0, 398: 23.0, 156: 42.0, 124: 78.0, 76: 98.0},\n",
+    "    \"scales\": {\"projection\": sc_geo, \"color\": sc_c1},\n",
+    "    \"colors\": {\"default_color\": \"Grey\"},\n",
+    "}\n",
+    "\n",
+    "axis = ColorAxis(scale=sc_c1)\n",
+    "\n",
+    "chloro_map = Map(map_data=topo_load(\"map_data/WorldMap.json\"), **map_styles)\n",
+    "Figure(marks=[chloro_map], axes=[axis], title=\"Choropleth Example\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## USA State Map ##"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "sc_geo = AlbersUSA()\n",
+    "states_map = Map(\n",
+    "    map_data=topo_load(\"map_data/USStatesMap.json\"), scales={\"projection\": sc_geo}\n",
+    ")\n",
+    "Figure(marks=[states_map], title=\"US States Map Example\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Europe Country Map"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "sc_geo = Mercator(scale_factor=450)\n",
+    "euro_map = Map(\n",
+    "    map_data=topo_load(\"map_data/EuropeMap.json\"), scales={\"projection\": sc_geo}\n",
+    ")\n",
+    "Figure(marks=[euro_map], title=\"Europe States Map Example\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Interactions ##"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def_tt = Tooltip(fields=[\"id\", \"name\"])\n",
+    "map_mark = Map(scales={\"projection\": Mercator()}, tooltip=def_tt)\n",
+    "map_mark.interactions = {\"click\": \"select\", \"hover\": \"tooltip\"}\n",
+    "Figure(marks=[map_mark], title=\"Interactions Example\")"
+   ]
+  }
+ ],
+ "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.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Marks/Object Model/Market Map.ipynb

@@ -0,0 +1,315 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import pandas as pd\n",
+    "from ipywidgets import Label, VBox, Layout\n",
+    "from bqplot.market_map import MarketMap\n",
+    "from bqplot import ColorScale, ColorAxis, DateScale, LinearScale, Axis, Lines, Figure"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Get Data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "data = pd.read_csv(\"../../data_files/country_codes.csv\", index_col=[0])\n",
+    "country_codes = data.index.values\n",
+    "country_names = data[\"Name\"]"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Basic Market Map"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "market_map = MarketMap(\n",
+    "    names=country_codes,\n",
+    "    # basic data which needs to set for each map\n",
+    "    ref_data=data,\n",
+    "    # Data frame which can be used for different properties of the map\n",
+    "    # Axis and scale for color data\n",
+    "    tooltip_fields=[\"Name\"],\n",
+    "    layout=Layout(width=\"800px\", height=\"600px\"),\n",
+    ")\n",
+    "\n",
+    "market_map"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "market_map.colors = [\"MediumSeaGreen\"]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "market_map.font_style = {\"font-size\": \"16px\", \"fill\": \"white\"}"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "market_map.title = \"Country Map\"\n",
+    "market_map.title_style = {\"fill\": \"Red\"}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## GDP data with grouping by continent\n",
+    "\n",
+    "World Bank national accounts data, and OECD National Accounts data files. (The World Bank: GDP per capita (current US$))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "gdp_data = pd.read_csv(\n",
+    "    \"../../data_files/gdp_per_capita.csv\", index_col=[0], parse_dates=True\n",
+    ")\n",
+    "gdp_data.fillna(method=\"backfill\", inplace=True)\n",
+    "gdp_data.fillna(method=\"ffill\", inplace=True)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "col = ColorScale(scheme=\"Greens\")\n",
+    "continents = data[\"Continent\"].values\n",
+    "ax_c = ColorAxis(scale=col, label=\"GDP per Capita\", visible=False)\n",
+    "\n",
+    "data[\"GDP\"] = gdp_data.iloc[-1]\n",
+    "\n",
+    "market_map = MarketMap(\n",
+    "    names=country_codes,\n",
+    "    groups=continents,  # Basic data which needs to set for each map\n",
+    "    cols=25,\n",
+    "    row_groups=3,  # Properties for the visualization\n",
+    "    ref_data=data,  # Data frame used for different properties of the map\n",
+    "    tooltip_fields=[\n",
+    "        \"Name\",\n",
+    "        \"Continent\",\n",
+    "        \"GDP\",\n",
+    "    ],  # Columns from data frame to be displayed as tooltip\n",
+    "    tooltip_formats=[\"\", \"\", \".1f\"],\n",
+    "    scales={\"color\": col},\n",
+    "    axes=[ax_c],\n",
+    "    layout=Layout(min_width=\"800px\", min_height=\"600px\"),\n",
+    ")  # Axis and scale for color data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "deb_output = Label()\n",
+    "\n",
+    "\n",
+    "def selected_index_changed(change):\n",
+    "    deb_output.value = str(change.new)\n",
+    "\n",
+    "\n",
+    "market_map.observe(selected_index_changed, \"selected\")\n",
+    "VBox([deb_output, market_map])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Attribute to show the names of the groups, in this case the continents\n",
+    "market_map.show_groups = True"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Setting the selected countries\n",
+    "market_map.show_groups = False\n",
+    "market_map.selected = [\"PAN\", \"FRA\", \"PHL\"]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# changing selected stroke and hovered stroke variable\n",
+    "market_map.selected_stroke = \"yellow\"\n",
+    "market_map.hovered_stroke = \"violet\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Setting the color based on data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Adding data for color and making color axis visible\n",
+    "market_map.colors = [\"#ccc\"]\n",
+    "market_map.color = data[\"GDP\"]\n",
+    "ax_c.visible = True"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Adding a widget as tooltip"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Creating the figure to be displayed as the tooltip\n",
+    "sc_x = DateScale()\n",
+    "sc_y = LinearScale()\n",
+    "\n",
+    "ax_x = Axis(scale=sc_x, grid_lines=\"dashed\", label=\"Date\")\n",
+    "ax_y = Axis(\n",
+    "    scale=sc_y,\n",
+    "    orientation=\"vertical\",\n",
+    "    grid_lines=\"dashed\",\n",
+    "    label=\"GDP\",\n",
+    "    label_location=\"end\",\n",
+    "    label_offset=\"-1em\",\n",
+    ")\n",
+    "\n",
+    "line = Lines(\n",
+    "    x=gdp_data.index.values, y=[], scales={\"x\": sc_x, \"y\": sc_y}, colors=[\"orange\"]\n",
+    ")\n",
+    "fig_tooltip = Figure(marks=[line], axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "market_map = MarketMap(\n",
+    "    names=country_codes,\n",
+    "    groups=continents,\n",
+    "    cols=25,\n",
+    "    row_groups=3,\n",
+    "    color=data[\"GDP\"],\n",
+    "    scales={\"color\": col},\n",
+    "    axes=[ax_c],\n",
+    "    ref_data=data,\n",
+    "    tooltip_widget=fig_tooltip,\n",
+    "    freeze_tooltip_location=True,\n",
+    "    colors=[\"#ccc\"],\n",
+    "    layout=Layout(min_width=\"900px\", min_height=\"600px\"),\n",
+    ")\n",
+    "\n",
+    "# Update the tooltip chart\n",
+    "hovered_symbol = \"\"\n",
+    "\n",
+    "\n",
+    "def hover_handler(self, content):\n",
+    "    global hovered_symbol\n",
+    "    symbol = content.get(\"data\", \"\")\n",
+    "\n",
+    "    if symbol != hovered_symbol:\n",
+    "        hovered_symbol = symbol\n",
+    "        if gdp_data.get(hovered_symbol) is not None:\n",
+    "            line.y = gdp_data[hovered_symbol].values\n",
+    "            fig_tooltip.title = content.get(\"ref_data\", {}).get(\"Name\", \"\")\n",
+    "\n",
+    "\n",
+    "# Custom msg sent when a particular cell is hovered on\n",
+    "market_map.on_hover(hover_handler)\n",
+    "market_map"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This notebook uses data derived from the World Bank dataset.\n",
+    "- The World Bank: GDP per capita (current US$)\n",
+    "- The World Bank: Country Codes\n",
+    "\n",
+    "See the LICENSE file for more information."
+   ]
+  }
+ ],
+ "metadata": {
+  "anaconda-cloud": {},
+  "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.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}