From fe6313ed3a5af1251550cad01e0e617bed60c20e Mon Sep 17 00:00:00 2001
From: daxid <david.rouquet@tetras-libre.fr>
Date: Mon, 15 Nov 2021 15:05:50 +0000
Subject: [PATCH] closes #1 first examples
---
dash/dash-leaflet.ipynb | 264 +++++++++++++++++++++++++++++++++++++++-
1 file changed, 262 insertions(+), 2 deletions(-)
diff --git a/dash/dash-leaflet.ipynb b/dash/dash-leaflet.ipynb
index 363fcab..7713962 100644
--- a/dash/dash-leaflet.ipynb
+++ b/dash/dash-leaflet.ipynb
@@ -1,6 +1,266 @@
{
- "cells": [],
- "metadata": {},
+ "cells": [
+ {
+ "cell_type": "code",
+ "execution_count": 1,
+ "id": "13f6dc62-8ea6-482d-9115-707cd6b712fc",
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "def get_tl_config():\n",
+ " import socket, errno, os\n",
+ " # Find a free port\n",
+ " host = '0.0.0.0'\n",
+ " port = 8050\n",
+ " end = 9999\n",
+ " found = False\n",
+ " while not found:\n",
+ " with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:\n",
+ " try:\n",
+ " s.bind((host, port))\n",
+ " found = True\n",
+ " except socket.error as e:\n",
+ " if e.errno == errno.EADDRINUSE:\n",
+ " port = port + 1\n",
+ " if (port > end):\n",
+ " raise \"No available APP port\"\n",
+ " else:\n",
+ " raise e\n",
+ " if (os.getenv('HOST', None) is not None):\n",
+ " proto = os.getenv('PROTO')\n",
+ " actualhost = os.getenv('JUPYTER_HOST', os.getenv('VOILA_HOST', \"\"))\n",
+ " localport = os.getenv('PORT', 80)\n",
+ " intermediatehost = os.getenv('HOST', 'localhost')\n",
+ " base_path = f'/{actualhost}/app_proxy/{port}/'\n",
+ " proxified= f'{proto}://{intermediatehost}:{localport}{base_path}'\n",
+ " localurl = f'http://{host}:{port}'\n",
+ " proxy = f'{localurl}::{proxified}'\n",
+ " return ((proxified, host, port, proxy, base_path))\n",
+ " return ((f'http://localhost:{port}', host, port, None, '/'))\n",
+ " \n",
+ "server_url, host, port, proxy, base_path = get_tl_config()\n",
+ "#print(get_tl_config())"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "adaf50a1-4fb2-4ed6-bbb2-7b18d2758e6f",
+ "metadata": {
+ "jp-MarkdownHeadingCollapsed": true,
+ "tags": []
+ },
+ "source": [
+ "# Tetras-Lab for interactive geographical data visualisation\n",
+ "\n",
+ "In this galery you will learn how to create dashboards using the open source data intelligence platform Tetras-Lab and easily visualize and share them as a web app.\n",
+ "\n",
+ "## Set up\n",
+ "\n",
+ "We will be using the python libraries Dash and Dash-Leaflet, which can be easily added to Tetras-Lab, to create the components to be displayed in our dashboard.\n",
+ "\n",
+ "The following imports are gonna be required : \n",
+ "\n",
+ "```Python\n",
+ "from dash import html\n",
+ "import dash_leaflet as dl\n",
+ "import dash_leaflet.express as dlx\n",
+ "from jupyter_dash import JupyterDash as Dash\n",
+ "from dash_extensions.javascript import arrow_function, assign\n",
+ "from dash_extensions.enrich import Output, DashProxy, Input, MultiplexerTransform, State\n",
+ "from dash.dependencies import Output, Input \n",
+ "from dash import dcc\n",
+ "import dash_bootstrap_components as dbc\n",
+ "import plotly.express as px\n",
+ "``` \n",
+ "\n",
+ "## Basic layout\n",
+ "\n",
+ "The first part of a Dash application is the layout, first of all we have to initialize our app : \n",
+ "\n",
+ "```Python\n",
+ "app = Dash(prevent_initial_callbacks=True, server_url=server_url, requests_pathname_prefix=base_path)\n",
+ "``` \n",
+ "\n",
+ "Then we can add the components we want to the app layout, each component works like a HTML element to which we can set a CSS style attribute to manage its size, color, font, etc...\n",
+ "\n",
+ "Exemple for a dropdown selector, first we declare the component : \n",
+ "\n",
+ "```Python\n",
+ "dropdown = dcc.Dropdown(\n",
+ " id='demo-dropdown',\n",
+ " options=[\n",
+ " {'label': 'New York City', 'value': 'NYC'},\n",
+ " {'label': 'Montreal', 'value': 'MTL'},\n",
+ " {'label': 'San Francisco', 'value': 'SF'}\n",
+ " ],\n",
+ " value='NYC'\n",
+ " )\n",
+ "```\n",
+ "\n",
+ "Then we add it to the layout \n",
+ "\n",
+ "```Python\n",
+ "app.layout = html.Div(dropdown)\n",
+ "```\n",
+ "\n",
+ "Finnaly ,to run the app we add : \n",
+ "\n",
+ "```Python \n",
+ "app.run_server(mode='inline', host=host, port=port, proxy=proxy)\n",
+ "```"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 6,
+ "id": "ed671aec-502e-458d-87fb-8034a2b2e79e",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "\n",
+ " <iframe\n",
+ " width=\"100%\"\n",
+ " height=\"650\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8054/jupyter/app_proxy/8054/\"\n",
+ " frameborder=\"0\"\n",
+ " allowfullscreen\n",
+ " \n",
+ " ></iframe>\n",
+ " "
+ ],
+ "text/plain": [
+ "<IPython.lib.display.IFrame at 0x7f7109a2f460>"
+ ]
+ },
+ "metadata": {},
+ "output_type": "display_data"
+ }
+ ],
+ "source": [
+ "from dash import html\n",
+ "import dash_leaflet as dl\n",
+ "import dash_leaflet.express as dlx\n",
+ "from jupyter_dash import JupyterDash as Dash\n",
+ "from dash_extensions.javascript import arrow_function, assign\n",
+ "from dash_extensions.enrich import Output, DashProxy, Input, MultiplexerTransform, State\n",
+ "from dash.dependencies import Output, Input \n",
+ "from dash import dcc\n",
+ "import dash_bootstrap_components as dbc\n",
+ "import plotly.express as px\n",
+ "\n",
+ "app = Dash(prevent_initial_callbacks=True, server_url=server_url, requests_pathname_prefix=base_path)\n",
+ "\n",
+ "dropdown = dcc.Dropdown(\n",
+ " id='demo-dropdown',\n",
+ " options=[\n",
+ " {'label': 'New York City', 'value': 'NYC'},\n",
+ " {'label': 'Montreal', 'value': 'MTL'},\n",
+ " {'label': 'San Francisco', 'value': 'SF'}\n",
+ " ],\n",
+ " value='NYC'\n",
+ " )\n",
+ "\n",
+ "app.layout = html.Div(dropdown)\n",
+ "\n",
+ "app.run_server(mode='inline', host=host, port=port, proxy=proxy)"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "0d6f8c87-d80e-4520-9415-2a7be591b6b1",
+ "metadata": {},
+ "source": [
+ "We will now use the Dash_Leaflet Library to display an interactive map, the component to use is ```dl.Map()``` , without adding anything else, the only thing that will be displayed is a grey square, we need to draw some map tiles. By adding ``` dl.TileLayer()``` as an argument, Dash Leaflet will display a basic map.\n",
+ "\n",
+ "```Python\n",
+ "mapComponent = dl.Map(children=\n",
+ " [dl.TileLayer()],\n",
+ " style={'width': '80%','height':'80vh','float': 'center','margin': 'auto'},\n",
+ " center = [46.5,2.25],\n",
+ " zoom = 5,\n",
+ " id = 'first_map'\n",
+ " )\n",
+ "\n",
+ "app.layout = html.Div(children = mapComponent)\n",
+ "```\n",
+ "\n",
+ "\n",
+ "We can add attributes to the map such as the center point or the zoom level. "
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 10,
+ "id": "06e83bd3-ba85-48f4-b3e0-99014887e3d1",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "\n",
+ " <iframe\n",
+ " width=\"100%\"\n",
+ " height=\"650\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8059/jupyter/app_proxy/8059/\"\n",
+ " frameborder=\"0\"\n",
+ " allowfullscreen\n",
+ " \n",
+ " ></iframe>\n",
+ " "
+ ],
+ "text/plain": [
+ "<IPython.lib.display.IFrame at 0x7f710a229850>"
+ ]
+ },
+ "metadata": {},
+ "output_type": "display_data"
+ }
+ ],
+ "source": [
+ "server_url, host, port, proxy, base_path = get_tl_config()\n",
+ "\n",
+ "app = Dash(prevent_initial_callbacks=True, server_url=server_url, requests_pathname_prefix=base_path)\n",
+ "\n",
+ "mapComponent = dl.Map(children=\n",
+ " [dl.TileLayer()],style={'width': '80%','height':'80vh','float': 'center','margin': 'auto'},\n",
+ " center = [46.5,2.25],\n",
+ " zoom = 5)\n",
+ "\n",
+ "app.layout = html.Div(children = mapComponent)\n",
+ "\n",
+ "app.run_server(mode='inline', host=host, port=port, proxy=proxy)"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "ef8cbf39-d2f4-4426-b76a-8e6dc1311541",
+ "metadata": {},
+ "source": [
+ "Now that we have our map, let's see what we can do with it. "
+ ]
+ }
+ ],
+ "metadata": {
+ "kernelspec": {
+ "display_name": "Python 3 (ipykernel)",
+ "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.8.6"
+ }
+ },
"nbformat": 4,
"nbformat_minor": 5
}
--
GitLab