{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Mapboxgl Python Library for location data visualization\n",
    "\n",
    "https://github.com/mapbox/mapboxgl-jupyter\n",
    "\n",
    "\n",
    "# Legend Styles and Controls"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "| Property  | Description  | Example |\n",
    "|:--------- |:-------------|:--------|\n",
    "| legend | controls visibility of map legend | True |\n",
    "| legend_layout | controls orientation of map legend | 'horizontal' |\n",
    "| legend_style | reserved for future custom CSS loading | '' |\n",
    "| legend_gradient | boolean to determine appearance of legend keys; takes precedent over legend_key_shape | False |\n",
    "| legend_fill | string background color for legend | 'white' |\n",
    "| legend_header_fill | string background color for legend header (in vertical layout) | 'white' |\n",
    "| legend_text_color | string color for legend text | '#6e6e6e' |\n",
    "| legend_text_numeric_precision | decimal precision for numeric legend values | 0 |\n",
    "| legend_title_halo_color | color of legend title text halo | 'white' |\n",
    "| legend_key_shape | shape of the legend item keys, default varies by viz type; one of square, contiguous_bar, rounded-square, circle, line | 'square' |\n",
    "| legend_key_borders_on | boolean for whether to show/hide legend key borders | False |"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create a visualization from example data file"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import os\n",
    "from mapboxgl.utils import *\n",
    "from mapboxgl.viz import *\n",
    "\n",
    "# Set Mapbox Acces Token; Must be a public token, starting with `pk`\n",
    "token = os.getenv('MAPBOX_ACCESS_TOKEN')\n",
    "\n",
    "# Load data from sample csv\n",
    "data_url = 'https://raw.githubusercontent.com/mapbox/mapboxgl-jupyter/master/examples/data/points.csv'\n",
    "df = pd.read_csv(data_url).round(3)\n",
    "\n",
    "# Generate data breaks using numpy quantiles and color stops from colorBrewer\n",
    "measure = 'Avg Medicare Payments'\n",
    "color_breaks = [round(df[measure].quantile(q=x*0.1), 2) for x in range(1,9)]\n",
    "color_stops = create_color_stops(color_breaks, colors='YlOrRd')\n",
    "\n",
    "# Create the viz from the dataframe\n",
    "viz = CircleViz('../data/healthcare_points.geojson',\n",
    "                access_token=token, \n",
    "                color_property='Avg Medicare Payments',\n",
    "                color_stops=color_stops,\n",
    "                radius=2.5,\n",
    "                stroke_width=0.2,\n",
    "                center=(-95, 40),\n",
    "                zoom=2.5,\n",
    "                below_layer='waterway-label',\n",
    "                height='300px')\n",
    "\n",
    "# Show the viz\n",
    "viz.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Change the legend style to a horizontal contiguous bar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "viz.legend = True\n",
    "viz.legend_layout = 'horizontal'\n",
    "viz.legend_key_borders_on = True\n",
    "viz.legend_key_shape = 'contiguous-bar'\n",
    "viz.legend_text_numeric_precision = 0\n",
    "viz.legend_key_borders_on = False\n",
    "viz.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Gradient legend (assumes linear color gradient)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "viz.legend_gradient = True\n",
    "viz.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Change the viz legend colors"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "viz.legend_layout = 'vertical'\n",
    "viz.legend_gradient = False\n",
    "viz.legend_fill = '#f0f0ef'\n",
    "viz.legend_text_color = '#000000'\n",
    "viz.legend_header_fill = '#819092'\n",
    "viz.legend_key_borders_on = False\n",
    "viz.legend_title_halo_color = '#777'\n",
    "viz.legend_key_shape = 'rounded-square'\n",
    "viz.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Update legend to match Mapbox Dark-v9 style"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Map settings\n",
    "viz.style='mapbox://styles/mapbox/dark-v9?optimize=true'\n",
    "viz.label_color = 'hsl(0, 0%, 70%)'\n",
    "viz.label_halo_color = 'hsla(0, 0%, 10%, 0.75)'\n",
    "viz.height = '400px'\n",
    "\n",
    "# Legend settings\n",
    "viz.legend_gradient = False\n",
    "viz.legend_fill = '#343332'\n",
    "viz.legend_header_fill = '#343332'\n",
    "viz.legend_text_color = 'hsl(0, 0%, 70%)'\n",
    "viz.legend_key_borders_on = False\n",
    "viz.legend_title_halo_color = 'hsla(0, 0%, 10%, 0.75)'\n",
    "\n",
    "# Render map\n",
    "viz.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "## Default legend for a graduated circle viz"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Generate data breaks and color stops from colorBrewer\n",
    "measure_color = 'Avg Covered Charges'\n",
    "color_breaks = [round(df[measure_color].quantile(q=x*0.1), 2) for x in range(2, 10)]\n",
    "color_stops = create_color_stops(color_breaks, colors='Blues')\n",
    "\n",
    "# Generate radius breaks from data domain and circle-radius range\n",
    "measure_radius = 'Avg Medicare Payments'\n",
    "radius_breaks = [round(df[measure_radius].quantile(q=x*0.1), 2) for x in range(2,10)]\n",
    "radius_stops = create_radius_stops(radius_breaks, 0.5, 10)\n",
    "\n",
    "# Create the viz\n",
    "viz2 = GraduatedCircleViz('../data/healthcare_points.geojson', \n",
    "                          access_token=token,\n",
    "                          color_property='Avg Covered Charges',\n",
    "                          color_stops=color_stops,\n",
    "                          radius_property='Avg Medicare Payments',\n",
    "                          radius_stops=radius_stops,\n",
    "                          stroke_color='black',\n",
    "                          stroke_width=0.5,\n",
    "                          center=(-95, 40),\n",
    "                          zoom=2.5,\n",
    "                          opacity=0.75,\n",
    "                          below_layer='waterway-label',\n",
    "                          height='300px')\n",
    "viz2.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Default legend for a clustered circle map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "# Create a clustered circle map\n",
    "color_stops = create_color_stops([1, 10, 25, 50, 75, 100], colors='YlOrRd')\n",
    "\n",
    "viz3 = ClusteredCircleViz('../data/healthcare_points.geojson', \n",
    "                  access_token=token,\n",
    "                  color_stops=color_stops,\n",
    "                  stroke_color='black',\n",
    "                  radius_stops=[[1,5], [10, 10], [50, 15], [100, 20]],\n",
    "                  radius_default=2,\n",
    "                  cluster_maxzoom=10,\n",
    "                  cluster_radius=30,\n",
    "                  label_size=12,\n",
    "                  opacity=0.9,\n",
    "                  center=(-95, 40),\n",
    "                  zoom=2.5,\n",
    "                  height='300px')\n",
    "viz3.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Default legend for choropleth viz"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# create choropleth from polygon features stored as GeoJSON\n",
    "viz4 = ChoroplethViz('https://raw.githubusercontent.com/mapbox/mapboxgl-jupyter/master/examples/data/us-states.geojson', \n",
    "                     color_property='density',\n",
    "                     color_stops=create_color_stops([0, 50, 100, 500, 1500], colors='YlOrRd'),\n",
    "                     color_function_type='interpolate',\n",
    "                     line_stroke='--',\n",
    "                     line_color='rgb(128,0,38)',\n",
    "                     line_width=1,\n",
    "                     opacity=0.8,\n",
    "                     center=(-96, 37.8),\n",
    "                     zoom=2.5,\n",
    "                     below_layer='waterway-label',\n",
    "                     height='300px')\n",
    "viz4.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Change legend to vertical contiguous bar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "viz4.legend_layout = 'vertical'\n",
    "viz4.legend_key_borders_on = False\n",
    "viz4.legend_key_shape = 'contiguous-bar'\n",
    "viz4.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Default legend for linestring viz"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "viz5 = LinestringViz([{\"elevation\": x} for x in range(0, 21000, 10)], \n",
    "                     vector_url='mapbox://mapbox.mapbox-terrain-v2',\n",
    "                     vector_layer_name='contour',\n",
    "                     vector_join_property='ele',\n",
    "                     data_join_property='elevation',\n",
    "                     color_property='elevation',\n",
    "                     color_stops=create_color_stops([0, 50, 100, 200, 300], colors='YlOrRd'),\n",
    "                     line_width_stops=create_numeric_stops([0, 50, 100, 200, 300], 0.1, 4),\n",
    "                     line_width_property='elevation',\n",
    "                     line_width_function_type='interpolate',\n",
    "                     line_width_default='1',\n",
    "                     opacity=0.8,\n",
    "                     center=(-122.48, 37.83),\n",
    "                     zoom=13,\n",
    "                     below_layer='waterway-label',\n",
    "                     height='300px')\n",
    "viz5.show()"
   ]
  }
 ],
 "metadata": {
  "anaconda-cloud": {
   "attach-environment": true,
   "environment": "Root",
   "summary": "Mapboxgl Python Data Visualization example"
  },
  "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.6.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}