Merge pull request #1611 from CartoDB/jarroyo/ch66627/cluster-style-f…

…ails-visualising-a-gdf Add info in cluster example
CartoDB · Apr 3, 2020 · 0f74baa · 0f74baa
2 parents e59245e + ac389e2
commit 0f74baa
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 58 deletions.
diff --git a/cartoframes/viz/styles/cluster_size_style.py b/cartoframes/viz/styles/cluster_size_style.py
@@ -8,8 +8,9 @@
 
 def cluster_size_style(value, operation='count', resolution=32, color=None, opacity=None,
                        stroke_color=None, stroke_width=None, animate=None):
-    """Helper function for quickly creating a cluster map with
-    continuously sized points.
+    """Helper function for quickly creating a cluster map with continuously sized points.
+    Cluster operations are performed in the back-end, so this helper can be used only with
+    CARTO tables or SQL queries. It cannot be used with GeoDataFrames.
 
     Args:
         value (str): Numeric column to aggregate.

diff --git a/examples/styles/cluster_size_style.ipynb b/examples/styles/cluster_size_style.ipynb
@@ -6,7 +6,9 @@
    "source": [
     "## Cluster Size Style\n",
     "\n",
-    "The `cluster_size_style` helper creates a cluster map with continuously sized points.Use `help(cluster_size_style)` to get more information about the different settings that can be applied."
+    "The `cluster_size_style` helper creates a cluster map with continuously sized points.Use `help(cluster_size_style)` to get more information about the different settings that can be applied.\n",
+    "\n",
+    "*Cluster* operations are performed in the back-end, so the `cluster_size_style` helper can be used only with CARTO tables or SQL queries. It cannot be used with GeoDataFrames."
    ]
   },
   {
@@ -51,11 +53,11 @@
        "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
        "\n",
        "  <!-- Include Airship -->\n",
-       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship.js&quot;></script>\n",
-       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship/airship.esm.js&quot;></script>\n",
-       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.3/asbridge.min.js&quot;></script>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.3/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.3/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3.1-rc.1/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3.1-rc.1/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.3.1-rc.1/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.3.1-rc.1/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.3.1-rc.1/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
        "\n",
        "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
        "\n",
@@ -83,6 +85,11 @@
        "    max-width: 100%;\n",
        "    height: auto;\n",
        "  }\n",
+       "\n",
+       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
+       "    font-size: 14px;\n",
+       "    line-height: 14px;\n",
+       "  }\n",
        "</style>\n",
        "  <style>\n",
        "  .map {\n",
@@ -429,19 +436,12 @@
        "  }\n",
        "\n",
        "  function formatNumber(value) {\n",
-       "    const log = Math.log10(Math.abs(value));\n",
-       "\n",
-       "    if ((log > 4 || log < -2.00000001) && value) {\n",
-       "      return value.toExponential(2);\n",
-       "    }\n",
-       "    \n",
        "    if (!Number.isInteger(value)) {\n",
        "      return value.toLocaleString(undefined, {\n",
        "        minimumFractionDigits: 2,\n",
        "        maximumFractionDigits: 3\n",
        "      });\n",
        "    }\n",
-       "    \n",
        "    return value.toLocaleString();\n",
        "  }\n",
        "\n",
@@ -753,7 +753,6 @@
        "      throw e;\n",
        "    }\n",
        "\n",
-       "\n",
        "    mapLayer.addTo(map);\n",
        "\n",
        "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
@@ -862,7 +861,7 @@
        "    );\n",
        "\n",
        "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse());\n",
+       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
        "    }\n",
        "\n",
        "    setInteractiveLayers(map, layers, mapLayers);\n",
@@ -900,16 +899,17 @@
        "    }\n",
        "  }\n",
        "\n",
-       "  function addLayersSelector(layers, mapLayers) {\n",
-       "    const layerSelector$ = document.querySelector(`#layer-selector`);\n",
-       "      const layersInfo = mapLayers.map((layer, index) => {\n",
-       "        return {\n",
-       "          title: layers[index].title || `Layer ${index}`,\n",
-       "          id: layer.id,\n",
-       "          checked: true\n",
-       "        };\n",
-       "      });\n",
-       "    \n",
+       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
+       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
+       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
+       "    const layersInfo = mapLayers.map((layer, index) => {\n",
+       "      return {\n",
+       "        title: layers[index].title || `Layer ${index}`,\n",
+       "        id: layer.id,\n",
+       "        checked: true\n",
+       "      };\n",
+       "    });\n",
+       "\n",
        "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
        "    \n",
        "    layerSelector.build();\n",
@@ -956,8 +956,8 @@
        "    const camera = null;\n",
        "    const has_legends = 'true' === 'true';\n",
        "    const is_static = 'None' === 'true';\n",
-       "    const layer_selector = 'False' === 'true'; // TODO it will be a helper\n",
-       "    const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;vancouver_trees\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v40e601&quot;, &quot;title&quot;: &quot;clusterCount()&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;width&quot;, &quot;title&quot;: &quot;diameter&quot;, &quot;type&quot;: &quot;size-continuous&quot;, &quot;variable&quot;: &quot;size_value&quot;}], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v40e601: clusterCount()\\ncolor: opacity(#FFB927, 0.8)\\nwidth: ramp(linear(clusterCount(), viewportMIN(clusterCount()), viewportMAX(clusterCount())), [4.0, 16.0, 32])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n@size_value: ramp(linear(clusterCount(), viewportMIN(clusterCount()), viewportMAX(clusterCount())), [4.0, 16.0, 32])\\nfilter: 1\\nresolution: 32\\n&quot;, &quot;widgets&quot;: []}];\n",
+       "    const layer_selector = 'False' === 'true';\n",
+       "    const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;vancouver_trees\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v40e601&quot;, &quot;title&quot;: &quot;clusterCount()&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;width&quot;, &quot;title&quot;: &quot;diameter&quot;, &quot;type&quot;: &quot;size-continuous&quot;, &quot;variable&quot;: &quot;size_value&quot;}], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;vancouver_trees\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v40e601: clusterCount()\\ncolor: opacity(#FFB927, 0.8)\\nwidth: ramp(linear(clusterCount(), viewportMIN(clusterCount()), viewportMAX(clusterCount())), [4.0, 16.0, 32])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n@size_value: ramp(linear(clusterCount(), viewportMIN(clusterCount()), viewportMAX(clusterCount())), [4.0, 16.0, 32])\\nfilter: 1\\nresolution: 32\\n&quot;, &quot;widgets&quot;: []}];\n",
        "    const mapboxtoken = '';\n",
        "    const show_info = 'None' === 'true';\n",
        "\n",
@@ -981,7 +981,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layer.Layer at 0x11dfce150>"
+       "<cartoframes.viz.layer.Layer at 0x7f7816b159e8>"
       ]
      },
      "execution_count": 2,
@@ -1026,11 +1026,11 @@
        "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
        "\n",
        "  <!-- Include Airship -->\n",
-       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship.js&quot;></script>\n",
-       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3/airship/airship.esm.js&quot;></script>\n",
-       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.3/asbridge.min.js&quot;></script>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.3/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
-       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.3/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3.1-rc.1/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.3.1-rc.1/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.3.1-rc.1/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.3.1-rc.1/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.3.1-rc.1/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
        "\n",
        "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
        "\n",
@@ -1058,6 +1058,11 @@
        "    max-width: 100%;\n",
        "    height: auto;\n",
        "  }\n",
+       "\n",
+       "  as-layer-selector-slot .as-layer-selector-slot--wrapper .as-caption { // FIXME\n",
+       "    font-size: 14px;\n",
+       "    line-height: 14px;\n",
+       "  }\n",
        "</style>\n",
        "  <style>\n",
        "  .map {\n",
@@ -1404,19 +1409,12 @@
        "  }\n",
        "\n",
        "  function formatNumber(value) {\n",
-       "    const log = Math.log10(Math.abs(value));\n",
-       "\n",
-       "    if ((log > 4 || log < -2.00000001) && value) {\n",
-       "      return value.toExponential(2);\n",
-       "    }\n",
-       "    \n",
        "    if (!Number.isInteger(value)) {\n",
        "      return value.toLocaleString(undefined, {\n",
        "        minimumFractionDigits: 2,\n",
        "        maximumFractionDigits: 3\n",
        "      });\n",
        "    }\n",
-       "    \n",
        "    return value.toLocaleString();\n",
        "  }\n",
        "\n",
@@ -1728,7 +1726,6 @@
        "      throw e;\n",
        "    }\n",
        "\n",
-       "\n",
        "    mapLayer.addTo(map);\n",
        "\n",
        "    setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
@@ -1837,7 +1834,7 @@
        "    );\n",
        "\n",
        "    if (settings.layer_selector) {\n",
-       "      addLayersSelector(layers.reverse(), mapLayers.reverse());\n",
+       "      addLayersSelector(layers.reverse(), mapLayers.reverse(), mapIndex);\n",
        "    }\n",
        "\n",
        "    setInteractiveLayers(map, layers, mapLayers);\n",
@@ -1875,16 +1872,17 @@
        "    }\n",
        "  }\n",
        "\n",
-       "  function addLayersSelector(layers, mapLayers) {\n",
-       "    const layerSelector$ = document.querySelector(`#layer-selector`);\n",
-       "      const layersInfo = mapLayers.map((layer, index) => {\n",
-       "        return {\n",
-       "          title: layers[index].title || `Layer ${index}`,\n",
-       "          id: layer.id,\n",
-       "          checked: true\n",
-       "        };\n",
-       "      });\n",
-       "    \n",
+       "  function addLayersSelector(layers, mapLayers, mapIndex) {\n",
+       "    const layerSelectorId = mapIndex !== undefined ? `#layer-selector-${mapIndex}` : '#layer-selector';\n",
+       "    const layerSelector$ = document.querySelector(layerSelectorId);\n",
+       "    const layersInfo = mapLayers.map((layer, index) => {\n",
+       "      return {\n",
+       "        title: layers[index].title || `Layer ${index}`,\n",
+       "        id: layer.id,\n",
+       "        checked: true\n",
+       "      };\n",
+       "    });\n",
+       "\n",
        "    const layerSelector = new AsBridge.VL.Layers(layerSelector$, carto, layersInfo, mapLayers);\n",
        "    \n",
        "    layerSelector.build();\n",
@@ -1931,8 +1929,8 @@
        "    const camera = null;\n",
        "    const has_legends = 'true' === 'true';\n",
        "    const is_static = 'None' === 'true';\n",
-       "    const layer_selector = 'False' === 'true'; // TODO it will be a helper\n",
-       "    const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;vancouver_trees\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;v84907f&quot;, &quot;title&quot;: &quot;clusterSum($diameter)&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;width&quot;, &quot;title&quot;: &quot;diameter&quot;, &quot;type&quot;: &quot;size-continuous&quot;, &quot;variable&quot;: &quot;size_value&quot;}], &quot;options&quot;: {}, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v84907f: clusterSum($diameter)\\ncolor: opacity(#FFB927, 0.8)\\nwidth: ramp(linear(clusterSum($diameter), viewportMIN(clusterSum($diameter)), viewportMAX(clusterSum($diameter))), [8.0, 32.0, 64])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n@size_value: ramp(linear(clusterSum($diameter), viewportMIN(clusterSum($diameter)), viewportMAX(clusterSum($diameter))), [8.0, 32.0, 64])\\nfilter: 1\\nresolution: 64\\n&quot;, &quot;widgets&quot;: []}];\n",
+       "    const layer_selector = 'False' === 'true';\n",
+       "    const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartoframes.carto.com&quot;, &quot;username&quot;: &quot;cartoframes&quot;}, &quot;data&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;vancouver_trees\\&quot;&quot;, &quot;encode_data&quot;: true, &quot;has_legend_list&quot;: true, &quot;interactivity&quot;: [{&quot;attrs&quot;: {&quot;name&quot;: &quot;vc16a1f&quot;, &quot;title&quot;: &quot;clusterSum(prop(\\u0027diameter\\u0027))&quot;}, &quot;event&quot;: &quot;hover&quot;}], &quot;legends&quot;: [{&quot;ascending&quot;: false, &quot;description&quot;: &quot;&quot;, &quot;dynamic&quot;: true, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;width&quot;, &quot;title&quot;: &quot;diameter&quot;, &quot;type&quot;: &quot;size-continuous&quot;, &quot;variable&quot;: &quot;size_value&quot;}], &quot;map_index&quot;: 0, &quot;options&quot;: {}, &quot;source&quot;: &quot;SELECT * FROM \\&quot;cartoframes\\&quot;.\\&quot;vancouver_trees\\&quot;&quot;, &quot;title&quot;: null, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vc16a1f: clusterSum(prop(\\u0027diameter\\u0027))\\ncolor: opacity(#FFB927, 0.8)\\nwidth: ramp(linear(clusterSum(prop(\\u0027diameter\\u0027)), viewportMIN(clusterSum(prop(\\u0027diameter\\u0027))), viewportMAX(clusterSum(prop(\\u0027diameter\\u0027)))), [8.0, 32.0, 64])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n@size_value: ramp(linear(clusterSum(prop(\\u0027diameter\\u0027)), viewportMIN(clusterSum(prop(\\u0027diameter\\u0027))), viewportMAX(clusterSum(prop(\\u0027diameter\\u0027)))), [8.0, 32.0, 64])\\nfilter: 1\\nresolution: 64\\n&quot;, &quot;widgets&quot;: []}];\n",
        "    const mapboxtoken = '';\n",
        "    const show_info = 'None' === 'true';\n",
        "\n",
@@ -1956,7 +1954,7 @@
        "</iframe>"
       ],
       "text/plain": [
-       "<cartoframes.viz.layer.Layer at 0x11e198890>"
+       "<cartoframes.viz.layer.Layer at 0x7f781626a4e0>"
       ]
      },
      "execution_count": 3,
@@ -1985,7 +1983,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.4"
+   "version": "3.6.7"
   }
  },
  "nbformat": 4,