Merge pull request #76 from bloomberg/screenshots

Update Screenshots

README.md

@@ -1,5 +1,4 @@
 # quant-research
-[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/bloomberg/quant-research/master?urlpath=voila%2Frender%2FIndex.ipynb)
 
 A collection of projects published by Bloomberg's Quantitative Finance Research team.
 

covid/README.md

@@ -2,7 +2,6 @@
 
 Jupyter notebooks for COVID-19 data analysis & visualization
 
-[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/bloomberg/quant-research/master?urlpath=voila%2Frender%2Fcovid%2Fnotebooks%2FDashboard.ipynb)
 
 ## Getting started
 
@@ -70,7 +69,7 @@ https://github.com/CSSEGISandData/COVID-19
 
 ## Using the Bloomberg COVID-19 Dashboard
 
-The Dashboard allows users to select a country from an interactive world map and view various statistics. The first tab (Infection Maps) is divided into two panels. The left one presents a map of the world and a map of the United States. The right panel presents a graph of Cases, Deaths, Vaccines, and Tests for the selected country/state and two tables of top 20 countries and states in the chosen category (top left toggle buttons).
+The Dashboard allows users to select a country from an interactive world map and view various statistics. The first tab (Infection Maps) is divided into two panels. The left one presents a map of the world and a map of the United States. The right panel presents a graph of Cases, Deaths, Vaccines, and Tests for the selected country/state and two tables of ranked countries and states in the chosen category.
 
 ![World map and graph](screenshots/World_map_black_theme.PNG)
 
@@ -80,12 +79,12 @@ There are four groups of toggle buttons in the top left panel:
 - Normalization : Use raw values or divide by population
 - Type : Total (or cumulative numbers), Diff (or daily differences), % change.
 - Scale : Log or Linear
-  Changing your selection will update the map's colors, right graph, and the tables.
+  Changing your selection will update the map's colors, right-hand side graph, and the tables.
 
 Map interactions :
 
 - Hover on a country or state to view its statistics.
-- Click on a country or state to plot its data in the right figure.
+- Click on a country or state to plot its data in the right-hand side figure.
 
 Date selector and animation:
 
@@ -95,19 +94,19 @@ Date selector and animation:
 ![US map and tables](screenshots/US_map_black_theme.PNG)
 
 The second tab presents an interactive rebased graph.
-Rebased graph example : Log Cases/1MPop in France, Spain and New York since number of deaths = 1000
+Time Track example : Deaths/1MPop daily change in France, Brazil, Russia, India, United States, Texas and California since number of vaccines/1M = 2000
 You can select :
 
 - Output Data :
-  - Data to plot (Cases, Deaths, Vaccines or Tests). Cases in our example.
+  - Data to plot (Cases, Deaths, Vaccines or Tests). Deaths in our example.
   - Normalization to apply (by population or none). Per 1M Pop in our example
-  - Type of time series (Total (cumulative number), Diff (daily differences) or % change). Total in our example.
-  - Scale of the rebased graph (Linear or Log). Log in our example.
-  - Countries or states. France Spain and New York in our example.
+  - Type of time series (Total (cumulative number), Diff (daily differences) or % change). daily change in our example.
+  - Scale of the rebased graph (Linear or Log). Linear in our example.
+  - Countries or states. France, Brazil, Russia, India, United States, Texas and California in our example.
 - Threshold Data :
-  - Value of the threshold (if equal 0 it will plot data vs calendar days). 1000 in our example.
-  - Data to apply threshold on (Cases, Deaths or Vaccines). Deaths in our example.
-  - Normalization to apply (by population or raw values). Values in our example.
+  - Value of the threshold. 2000 in our example.
+  - Data to apply threshold on (Cases, Deaths or Vaccines). Vaccines in our example.
+  - Normalization to apply (by population or raw values). Per million in our example.
 
 ![Rebased graph](screenshots/Rebased_graph_black_theme.PNG)
 

covid/notebooks/Dashboard.ipynb

@@ -1282,7 +1282,7 @@
     "    legend_location=\"top-left\",\n",
     "    axes=[axis_t, axis_y],\n",
     "    title=main_graph_ttl,\n",
-    "    fig_margin={\"top\": 50, \"bottom\": 50, \"left\": 65, \"right\": 20},\n",
+    "    fig_margin={\"top\": 50, \"bottom\": 50, \"left\": 70, \"right\": 20},\n",
     "    layout=Layout(width=\"auto\"),\n",
     "    legend_style={\"stroke-width\": 0},\n",
     ")\n"
@@ -3705,6 +3705,53 @@
     ")\n"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "date_axis_selector_tab_3 = SelectionRangeSlider(\n",
+    "    options=[\"2020-01-22\"],\n",
+    "    index=(0, 0),\n",
+    "    layout=Layout(width=\"auto\", height=\"auto\"),\n",
+    ")\n",
+    "\n",
+    "\n",
+    "def update_zoom_tab_3(*args):\n",
+    "\n",
+    "    min_x, max_x = date_axis_selector_tab_3.value\n",
+    "    dna_figure.marks[0].scales[\"column\"].min = np.datetime64(\n",
+    "        datetime.datetime.strftime(\n",
+    "            datetime.datetime.strptime(min_x, \"%m/%d/%y\"), dateformat\n",
+    "        )\n",
+    "    )\n",
+    "    dna_figure.marks[0].scales[\"column\"].max = np.datetime64(\n",
+    "        datetime.datetime.strftime(\n",
+    "            datetime.datetime.strptime(max_x, \"%m/%d/%y\"), dateformat\n",
+    "        )\n",
+    "    )\n",
+    "\n",
+    "    dna_figure.marks[0].scales[\"color\"].min = 0.9 * float(\n",
+    "        np.nanmin(\n",
+    "            dna_figure.marks[0].color[\n",
+    "                :,\n",
+    "                date_axis_selector_tab_3.index[0] : date_axis_selector_tab_3.index[1]\n",
+    "                + 1,\n",
+    "            ]\n",
+    "        )\n",
+    "    )\n",
+    "    dna_figure.marks[0].scales[\"color\"].max = 1.1 * float(\n",
+    "        np.nanmax(\n",
+    "            dna_figure.marks[0].color[\n",
+    "                :,\n",
+    "                date_axis_selector_tab_3.index[0] : date_axis_selector_tab_3.index[1]\n",
+    "                + 1,\n",
+    "            ]\n",
+    "        )\n",
+    "    )"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -3846,6 +3893,24 @@
     "                \"#8c000e\",\n",
     "                \"#560410\",\n",
     "            ]\n",
+    "        dna_figure.marks[0].scales[\"color\"].min = 0.9 * float(\n",
+    "            np.nanmin(\n",
+    "                dna_figure.marks[0].color[\n",
+    "                    :,\n",
+    "                    date_axis_selector_tab_3.index[0] : date_axis_selector_tab_3.index[1]\n",
+    "                    + 1,\n",
+    "                ]\n",
+    "            )\n",
+    "        )\n",
+    "        dna_figure.marks[0].scales[\"color\"].max = 1.1 * float(\n",
+    "            np.nanmax(\n",
+    "                dna_figure.marks[0].color[\n",
+    "                    :,\n",
+    "                    date_axis_selector_tab_3.index[0] : date_axis_selector_tab_3.index[1]\n",
+    "                    + 1,\n",
+    "                ]\n",
+    "            )\n",
+    "        )\n",
     "        dna_figure.title = title\n",
     "        update_link_download()\n",
     "    return\n",
@@ -3885,7 +3950,7 @@
     "\n",
     "\n",
     "def update_dna_tooltip(*args):\n",
-    "    Date = str(dna_figure.marks[0].column[int(args[1][\"data\"][\"column_num\"])])[:-19]\n",
+    "    Date = str(dna_figure.marks[0].column[int(args[1][\"data\"][\"columnNum\"])])[:-19]\n",
     "    Country = args[1][\"data\"][\"row\"]\n",
     "    val = args[1][\"data\"][\"color\"]\n",
     "    try:\n",
@@ -3915,7 +3980,7 @@
     "help_tab3 = help_button(help_tooltip[\"Tab 3\"])\n",
     "grid_3_left_panel = GridspecLayout(1, 2)\n",
     "grid_3_left_panel[0, 0] = help_tab3\n",
-    "grid_3_left_panel[0, 1] = dna_figure\n",
+    "grid_3_left_panel[0, 1] = VBox([dna_figure, date_axis_selector_tab_3])\n",
     "grid_3_left_panel.layout.grid_template_columns = \"32px auto\"\n",
     "grid_3[:, 0] = grid_3_left_panel\n",
     "grid_3[0, 1] = HBox([dna_top_buttons])\n",
@@ -4629,13 +4694,14 @@
     "    dna_data_button,\n",
     "    dna_norm_button,\n",
     "    dna_type_button,\n",
+    "    date_axis_selector_tab_3,\n",
     "    tab_3_ma_ch,\n",
     "    tab_3_ma_w,\n",
     "    tab_3_norm,\n",
     "    dna_countries_selector,\n",
-    "    dna_states_selector,\n",
+    "    dna_states_selector, \n",
     "]\n",
-    "tab_3_buttons_actions = [update_dna] * len(tab_3_buttons)\n",
+    "tab_3_buttons_actions = [update_dna] * 3 + [update_zoom_tab_3] + [update_dna] * 5\n",
     "\n",
     "tab_4_buttons = [\n",
     "    x_data_button,\n",
@@ -5185,7 +5251,10 @@
     "    dna_states_selector.set_value(states[:4])\n",
     "    dna_countries_selector.all_observe(update_dna)\n",
     "    dna_states_selector.all_observe(update_dna)\n",
-    "\n",
+    "    \n",
+    "    date_axis_selector_tab_3.options = date_axis_selector.options\n",
+    "    date_axis_selector_tab_3.index = (0, dict_datasets[0].get_len() - 1)\n",
+    "    \n",
     "    data_countries = (\n",
     "        dict_datasets[0]\n",
     "        .get_ts(\n",
@@ -5287,6 +5356,8 @@
     "    date_axis_selector.continuous_update = False\n",
     "    date_axis_selector_tab_2.observe(update_zoom_tab_2, \"value\")\n",
     "    date_axis_selector_tab_2.continuous_update = False\n",
+    "    date_axis_selector_tab_3.observe(update_zoom_tab_3, \"value\")\n",
+    "    date_axis_selector_tab_3.continuous_update = False\n",
     "    play.observe(update_index_date, \"value\")\n",
     "    date_selector.observe(select_date, \"value\")\n",
     "    free_play.observe(update_free_play, \"value\")\n",
@@ -5381,6 +5452,7 @@
     "                \"Deaths\",\n",
     "                \"Per million\",\n",
     "                \"Daily change\",\n",
+    "                [datetime.datetime.strftime(pd.to_datetime(ENDT) - datetime.timedelta(60), '%m/%d/%y'), datetime.datetime.strftime(pd.to_datetime(ENDT), '%m/%d/%y')],\n",
     "                True,\n",
     "                7,\n",
     "                False,\n",
@@ -5412,6 +5484,7 @@
     "                \"Cases\",\n",
     "                \"Per million\",\n",
     "                \"Daily change\",\n",
+    "                [datetime.datetime.strftime(pd.to_datetime(STDT) + datetime.timedelta(90), '%m/%d/%y'), datetime.datetime.strftime(pd.to_datetime(ENDT), '%m/%d/%y')],\n",
     "                True,\n",
     "                7,\n",
     "                False,\n",
@@ -5422,6 +5495,7 @@
     "                \"Cases\",\n",
     "                \"Per million\",\n",
     "                \"Daily change\",\n",
+    "                [datetime.datetime.strftime(pd.to_datetime(ENDT) - datetime.timedelta(60), '%m/%d/%y'), datetime.datetime.strftime(pd.to_datetime(ENDT), '%m/%d/%y')],\n",
     "                True,\n",
     "                7,\n",
     "                False,\n",
@@ -5454,6 +5528,7 @@
     "                \"Cases\",\n",
     "                \"Values\",\n",
     "                \"Daily change\",\n",
+    "                [datetime.datetime.strftime(pd.to_datetime(ENDT) - datetime.timedelta(60), '%m/%d/%y'), datetime.datetime.strftime(pd.to_datetime(ENDT), '%m/%d/%y')],\n",
     "                True,\n",
     "                7,\n",
     "                True,\n",
@@ -6092,7 +6167,9 @@
     "             </br>- COVID Tracking Data, licensed by Covid Tracking Project under the Apache License 2.0 <a href='https://github.com/COVID19Tracking/covid-tracking-data' target=\"_blank\" style='color:#1E90FF'> https://github.com/COVID19Tracking/covid-tracking-data </a>\n",
     "             </br>- COVID-19-Data/Testing and COVID-19-Data/Vaccinations, licensed by OWID under the <a href='https://creativecommons.org/licenses/by/4.0/' target=\"_blank\" style='color:#1E90FF'>Creative Commons Attribution 4.0 International CC BY 4.0</a>. <a href='https://github.com/owid/covid-19-data' target=\"_blank\" style='color:#1E90FF'> https://github.com/owid/covid-19-data </a>\n",
     "             </br>- govex/COVID-19, licensed by JHU under the MIT License <a href='https://github.com/govex/COVID-19' target=\"_blank\" style='color:#1E90FF'> https://github.com/govex/COVID-19 </a></p></body></html>\"\"\"\n",
-    "data_source_1 = \"\"\"<html><body><p style='color: #ff8b0e; padding:0; margin:0'> Data Sources: </br>- JHU CSSE COVID-19 Data, licensed by Johns Hopkins University under the <a href='https://creativecommons.org/licenses/by/4.0/' target=\"_blank\" style='color:#1E90FF'>Creative Commons Attribution 4.0 International CC BY 4.0</a>. <a href='https://github.com/CSSEGISandData/COVID-19' target=\"_blank\" style='color:#1E90FF'> https://github.com/CSSEGISandData/COVID-19 </a> \n",
+    "data_source_1 = \"\"\"<html><body><p style='color: #ff8b0e; padding:0; margin:0'>Data Sources for Cases and Deaths:\n",
+    "             </br>- JHU CSSE COVID-19 Data, licensed by Johns Hopkins University under the <a href='https://creativecommons.org/licenses/by/4.0/' target=\"_blank\" style='color:#1E90FF'>Creative Commons Attribution 4.0 International CC BY 4.0</a>. <a href='https://github.com/CSSEGISandData/COVID-19' target=\"_blank\" style='color:#1E90FF'> https://github.com/CSSEGISandData/COVID-19 </a> \n",
+    "             </br>Data Sources for Tests and Vaccines:\n",
     "             </br>- COVID Tracking Data, licensed by Covid Tracking Project under the Apache License 2.0 <a href='https://github.com/COVID19Tracking/covid-tracking-data' target=\"_blank\" style='color:#1E90FF'> https://github.com/COVID19Tracking/covid-tracking-data </a>\n",
     "             </br>- COVID-19-Data/Testing and COVID-19-Data/Vaccinations, licensed by OWID under the <a href='https://creativecommons.org/licenses/by/4.0/' target=\"_blank\" style='color:#1E90FF'>Creative Commons Attribution 4.0 International CC BY 4.0</a>. <a href='https://github.com/owid/covid-19-data' target=\"_blank\" style='color:#1E90FF'> https://github.com/owid/covid-19-data </a>\n",
     "             </br>- govex/COVID-19, licensed by JHU under the MIT License <a href='https://github.com/govex/COVID-19' target=\"_blank\" style='color:#1E90FF'> https://github.com/govex/COVID-19 </a></p></body></html>\"\"\"\n",
@@ -6183,7 +6260,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.5"
+   "version": "3.7.10"
   }
  },
  "nbformat": 4,