Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add info in cluster example #1611

Merged
merged 2 commits into from
Apr 3, 2020
+57 −58
Merged

Add info in cluster example #1611

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05c564d
Add info in cluster example
Jesus89 Apr 3, 2020
ac389e2
Add cluster reference info
Jesus89 Apr 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 54 additions & 56 deletions examples/styles/cluster_size_style.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
]
},
{
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -753,7 +753,6 @@
" throw e;\n",
" }\n",
"\n",
"\n",
" mapLayer.addTo(map);\n",
"\n",
" setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -981,7 +981,7 @@
"</iframe>"
],
"text/plain": [
"<cartoframes.viz.layer.Layer at 0x11dfce150>"
"<cartoframes.viz.layer.Layer at 0x7f7816b159e8>"
]
},
"execution_count": 2,
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -1728,7 +1726,6 @@
" throw e;\n",
" }\n",
"\n",
"\n",
" mapLayer.addTo(map);\n",
"\n",
" setLayerLegend(layer, mapLayerIndex, mapLayer, mapIndex, hasLegends);\n",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -1956,7 +1954,7 @@
"</iframe>"
],
"text/plain": [
"<cartoframes.viz.layer.Layer at 0x11e198890>"
"<cartoframes.viz.layer.Layer at 0x7f781626a4e0>"
]
},
"execution_count": 3,
Expand Down Expand Up @@ -1985,7 +1983,7 @@
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.7.4"
"version": "3.6.7"
}
},
"nbformat": 4,
Expand Down