PlotlyJS-gapminder-data-anim.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "cbb46b86",
   "metadata": {},
   "source": [
    "## <center> PlotlyJS version of gapminder  data animation </center>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "15692929",
   "metadata": {},
   "outputs": [],
   "source": [
    "using PlotlyJS, CSV, DataFrames\n",
    "\n",
    "function frame_args(;duration=400, redraw=false) \n",
    "    #function to set frame attributes\n",
    "    #redraw must be set on true for any other trace type different from scatter\n",
    "    attr(\n",
    "         frame_duration= duration,\n",
    "         mode= \"immediate\",\n",
    "         fromcurrent=true,\n",
    "         redraw=redraw, \n",
    "         transition=attr(duration= duration, easing=\"linear\")\n",
    "        )\n",
    "    end \n",
    "\n",
    "df = dataset(DataFrame, \"gapminder\")\n",
    "df_1952 = df[df.year .== 1952, :]\n",
    "fig =Plot(\n",
    "    df_1952,\n",
    "    x=:gdpPercap, y=:lifeExp, color=:continent , mode=\"markers\", hovertext=:country,\n",
    "    hovertemplate =\"<b>%{hovertext}</b><br>year: 1952\"*\n",
    "    \"<br>gdpPercap: %{x}<br>lifeExp: %{y}<br>pop: %{marker.size}<extra></extra>\",\n",
    "    marker=attr(size=:pop, sizeref=435928, sizemode=\"area\"),\n",
    "    Layout(\n",
    "        title_text =\"Life Expectancy vs Per Capita GDP (1952)\", title_x = 0.5,\n",
    "        xaxis=attr(\n",
    "            type=\"log\", range=[2, 5],\n",
    "            title_text=\"GDP per capita (2000 dollars)\"),\n",
    "        yaxis=attr(title_text=\"Life Expectancy (years)\", range=[25, 90]),\n",
    "          ));\n",
    "continents=[\"Africa\", \"Americas\", \"Asia\", \"Europe\", \"Oceania\"]\n",
    "years = collect(1952:5:2007)\n",
    "n_frames= length(years)\n",
    "frames  = Vector{PlotlyFrame}(undef, n_frames)\n",
    "\n",
    "for k in 1:length(years)\n",
    "    dfr= df[df.year .== years[k], :]\n",
    "    figaux=Plot(\n",
    "            dfr,\n",
    "            x=:gdpPercap, y=:lifeExp, color=:continent , mode=\"markers\", hovertext=:country,\n",
    "            marker=attr(size=:pop))  \n",
    "    frames[k] = frame(data=[attr(x=figaux.data[j].x,\n",
    "                                 y=figaux.data[j].y,\n",
    "                                 hovertext=figaux.data[j].hovertext,\n",
    "                                 hovertemplate =\"<b>%{hovertext}</b><br>year: $(years[k])\"*\n",
    "                                 \"<br>gdpPercap: %{x}<br>lifeExp: %{y}\"*\n",
    "                                 \"<br>pop: %{marker.size}<extra></extra>\",\n",
    "                                 marker_size=figaux.data[j].marker_size, \n",
    "                                 marker_color=figaux.data[j].marker_color,\n",
    "                                 ) for j in 1:length(continents)],\n",
    "                      layout=attr(title_text =\"Life Expectancy vs Per Capita GDP ($(years[k]))\"), #update title\n",
    "                      name=\"fr$k\", #frame name; it is passed to slider \n",
    "                      traces=[0, 1, 2, 3, 4] # the above 5-vector, data, is updating the traces fig.data[1], ....fig.data[5] \n",
    "                        ) \n",
    "end    \n",
    "fig.frames=frames \n",
    "relayout!(fig, \n",
    "          sliders =[attr(active=0, \n",
    "                         len= 0.9,\n",
    "                         pad= attr(b= 10, t= 60),\n",
    "                         x= 0.1, y=0, #slider starting position\n",
    "                         xanchor= \"left\",\n",
    "                         yanchor= \"top\",\n",
    "                         steps=[attr(label=\"$(years[k])\",\n",
    "                                     method=\"animate\",\n",
    "                                     args=[[\"fr$k\"], # match the frame[:name]\n",
    "                                           frame_args(;)\n",
    "                                 ]) for k in 1:n_frames ]\n",
    "             )],\n",
    "           updatemenus=[\n",
    "            attr(type= \"buttons\",\n",
    "                 buttons= [\n",
    "                    attr(\n",
    "                        args= [nothing, frame_args(;)],\n",
    "                        label= \"&#9654;\",\n",
    "                        method= \"animate\",\n",
    "                    ),\n",
    "                    attr(\n",
    "                        args= [[nothing], frame_args(;duration=0)],\n",
    "                        label= \"&#9724;\",\n",
    "                        method= \"animate\",\n",
    "                    )\n",
    "                ],\n",
    "                pad = attr(r=10, t=70),\n",
    "                direction= \"left\",\n",
    "                x=0.1, y=0, #button position \n",
    "                xanchor= \"right\",\n",
    "                yanchor= \"top\"\n",
    "            )\n",
    "        ])\n",
    "display(fig)                                            "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9d68c987",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "@webio": {
   "lastCommId": null,
   "lastKernelId": null
  },
  "kernelspec": {
   "display_name": "Julia 1.8.4",
   "language": "julia",
   "name": "julia-1.8"
  },
  "language_info": {
   "file_extension": ".jl",
   "mimetype": "application/julia",
   "name": "julia",
   "version": "1.8.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}