Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

updated svg styles, added strict filtering explanation, resolves #802

pull/813/head
Scott Anderson 2020-03-10 16:37:25 -06:00
parent 18a9cbf543
commit 7e2befedf8
8 changed files with 173 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
assets/styles/layouts/article/_svgs.scss
View File

@ -16,6 +16,43 @@ svg {
.st8{font-size:14.2px;} .st8{font-size:14.2px;}
.st9{fill: $svg-table-code-operator;} .st9{fill: $svg-table-code-operator;}
.st10{fill: $svg-table-code-string;} .st10{fill: $svg-table-code-string;}
}
&[id^='geo-s2-cells-'] {
max-width: 250px;
.geo-cell{fill:rgba($svg-geo-s2-cell, 0.25);stroke:$svg-geo-s2-cell;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
.geo-region{fill:rgba($svg-geo-region, 0.35);stroke:$svg-geo-region;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
.geo-point{fill:$svg-geo-point;}
} }
} }
//////////////////////////// Styles for SVG legends ////////////////////////////
span.key-geo-cell {
display: inline-block;
vertical-align: middle;
margin: 0 .5rem .25rem 0;
width: 1.1em;
height: 1.1em;
border: 2px solid $svg-geo-s2-cell;
background: rgba($svg-geo-s2-cell, .25);
border-radius: 2px;
}
span.key-geo-region {
display: inline-block;
vertical-align: middle;
margin: 0 .5rem .25rem 0;
width: 1.1em;
height: 1.1em;
border: 2px solid $svg-geo-region;
background: rgba($svg-geo-region, .35);
border-radius: 2px;
}
span.key-geo-point {
display: inline-block;
margin: 0 .7rem 0 .25rem;
width: .65rem;
height: .65rem;
border-radius: 50%;
background: $svg-geo-point;
}

4
assets/styles/themes/_theme-dark.scss
View File

@ -192,3 +192,7 @@ $svg-table-code: $cp-munchkin;
$svg-table-code-bg: $np-deepnight; $svg-table-code-bg: $np-deepnight;
$svg-table-code-operator: $b-pool; $svg-table-code-operator: $b-pool;
$svg-table-code-string: $gr-viridian; $svg-table-code-string: $gr-viridian;
$svg-geo-s2-cell: $b-curious;
$svg-geo-region: $m-lavander;
$svg-geo-point: $ch-chartreuse;

4
assets/styles/themes/_theme-light.scss
View File

@ -193,3 +193,7 @@ $svg-table-code: $cp-marguerite !default;
$svg-table-code-bg: $cp-titan !default; $svg-table-code-bg: $cp-titan !default;
$svg-table-code-operator: $b-dodger !default; $svg-table-code-operator: $b-dodger !default;
$svg-table-code-string: #12A290 !default; $svg-table-code-string: #12A290 !default;
$svg-geo-s2-cell: $b-malibu !default;
$svg-geo-region: $cp-comet !default;
$svg-geo-point: $m-heliotrope !default;

22
content/v2.0/reference/flux/stdlib/experimental/geo/filterrows.md
View File

@ -35,6 +35,27 @@ geo.filterRows(
) )
``` ```
### Strict and non-strict filtering
In most cases, the specified geographic region does not perfectly align with S2 grid cells.
**Non-strict filtering** returns points that may be outside of the specified region but
inside S2 grid cells partially covered by the region.
**Strict filtering** returns only points inside the specified region.
<span class="key-geo-cell"></span> S2 grid cell
<span class="key-geo-region"></span> Filter region
<span class="key-geo-point"></span> Returned point
{{< flex >}}
{{% flex-content %}}
**Strict filtering**
{{< svg "/static/svgs/geo-strict.svg" >}}
{{% /flex-content %}}
{{% flex-content %}}
**Non-strict filtering**
{{< svg "/static/svgs/geo-non-strict.svg" >}}
{{% /flex-content %}}
{{< /flex >}}
## Parameters ## Parameters
### region ### region
@ -88,6 +109,7 @@ Enable strict geographic data filtering which filters points by longitude (`lon`
For S2 grid cells that are partially covered by the defined region, only points For S2 grid cells that are partially covered by the defined region, only points
with coordinates in the defined region are returned. with coordinates in the defined region are returned.
Default is `true`. Default is `true`.
_See [Strict and non-strict filtering](#strict-and-non-strict-filtering) above._
_**Data type:** Boolean_ _**Data type:** Boolean_

22
content/v2.0/reference/flux/stdlib/experimental/geo/gridfilter.md
View File

@ -22,6 +22,7 @@ data with coordinates outside the region, but inside S2 grid cells partially cov
Use [`toRows()`](/v2.0/reference/flux/stdlib/experimental/geo/toRows/) and Use [`toRows()`](/v2.0/reference/flux/stdlib/experimental/geo/toRows/) and
[`geo.strictFilter()`](/v2.0/reference/flux/stdlib/experimental/geo/strictfilter/) [`geo.strictFilter()`](/v2.0/reference/flux/stdlib/experimental/geo/strictfilter/)
after `geo.gridFilter()` to precisely filter points. after `geo.gridFilter()` to precisely filter points.
_See [Non-strict and strict filtering](#non-strict-and-strict-filtering) below._
{{% /note %}} {{% /note %}}
_**Function type:** Transformation_ _**Function type:** Transformation_
@ -38,6 +39,27 @@ geo.gridFilter(
) )
``` ```
### Non-strict and strict filtering
In most cases, the specified geographic region does not perfectly align with S2 grid cells.
**Non-strict filtering** returns points that may be outside of the specified region but
inside S2 grid cells partially covered by the region.
**Strict filtering** returns only points inside the specified region.
<span class="key-geo-cell"></span> S2 grid cell
<span class="key-geo-region"></span> Filter region
<span class="key-geo-point"></span> Returned point
{{< flex >}}
{{% flex-content %}}
**Non-strict filtering**
{{< svg "/static/svgs/geo-non-strict.svg" >}}
{{% /flex-content %}}
{{% flex-content %}}
**Strict filtering**
{{< svg "/static/svgs/geo-strict.svg" >}}
{{% /flex-content %}}
{{< /flex >}}
## Parameters ## Parameters
### region ### region

34
content/v2.0/reference/flux/stdlib/experimental/geo/strictfilter.md
View File

@ -17,12 +17,7 @@ related:
The `geo.strictFilter()` function filters data by latitude and longitude in a specified region. The `geo.strictFilter()` function filters data by latitude and longitude in a specified region.
This filter is more strict than [`geo.gridFilter()`](/v2.0/reference/flux/stdlib/experimental/geo/gridfilter/), This filter is more strict than [`geo.gridFilter()`](/v2.0/reference/flux/stdlib/experimental/geo/gridfilter/),
but for the best performance, use `geo.strictFilter()` **after** `geo.gridFilter()`. but for the best performance, use `geo.strictFilter()` **after** `geo.gridFilter()`.
_See [Strict and non-strict filtering](#strict-and-non-strict-filtering) below._
{{% note %}}
`geo.strictFilter()` requires `lat` and `lon` columns in each row.
Use [`geo.toRows()`](/v2.0/reference/flux/stdlib/experimental/geo/gridfilter/)
to pivot `lat` and `lon` fields into each row **before** using `geo.strictFilter()`.
{{% /note %}}
_**Function type:** Transformation_ _**Function type:** Transformation_
@ -34,6 +29,33 @@ geo.strictFilter(
) )
``` ```
{{% note %}}
`geo.strictFilter()` requires `lat` and `lon` columns in each row.
Use [`geo.toRows()`](/v2.0/reference/flux/stdlib/experimental/geo/gridfilter/)
to pivot `lat` and `lon` fields into each row **before** using `geo.strictFilter()`.
{{% /note %}}
### Strict and non-strict filtering
In most cases, the specified geographic region does not perfectly align with S2 grid cells.
**Non-strict filtering** returns points that may be outside of the specified region but
inside S2 grid cells partially covered by the region.
**Strict filtering** returns only points inside the specified region.
<span class="key-geo-cell"></span> S2 grid cell
<span class="key-geo-region"></span> Filter region
<span class="key-geo-point"></span> Returned point
{{< flex >}}
{{% flex-content %}}
**Strict filtering**
{{< svg "/static/svgs/geo-strict.svg" >}}
{{% /flex-content %}}
{{% flex-content %}}
**Non-strict filtering**
{{< svg "/static/svgs/geo-non-strict.svg" >}}
{{% /flex-content %}}
{{< /flex >}}
## Parameters ## Parameters
### region ### region

67
static/svgs/geo-non-strict.svg
View File

@ -1,41 +1,36 @@
<svg version="1.1" id="geo-s2-cells-non-strict" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="geo-s2-cells-non-strict" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 329.19" style="enable-background:new 0 0 300 329.19;" xml:space="preserve"> viewBox="0 0 300 329.19" style="enable-background:new 0 0 300 329.19;" xml:space="preserve">
<style type="text/css">
.st0{fill:#22ADF6;fill-opacity:0.25;stroke:#22ADF6;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#BF2FE5;fill-opacity:0.43;stroke:#BF2FE5;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#D6F622;}
</style>
<g> <g>
<polygon class="st0" points="170.66,324.46 5.81,293.56 5.81,110.47 170.66,141.37 "/> <polygon class="geo-cell" points="170.66,324.46 5.81,293.56 5.81,110.47 170.66,141.37 "/>
<polygon class="st0" points="88.24,125.92 5.81,110.47 5.81,18.93 88.24,34.37 "/> <polygon class="geo-cell" points="88.24,125.92 5.81,110.47 5.81,18.93 88.24,34.37 "/>
<polygon class="st0" points="170.66,141.37 88.24,125.92 88.24,34.37 170.66,49.82 "/> <polygon class="geo-cell" points="170.66,141.37 88.24,125.92 88.24,34.37 170.66,49.82 "/>
<polygon class="st0" points="253.08,156.82 170.66,141.37 170.66,49.82 253.08,65.27 "/> <polygon class="geo-cell" points="253.08,156.82 170.66,141.37 170.66,49.82 253.08,65.27 "/>
<polygon class="st0" points="253.08,248.36 170.66,232.91 170.66,141.37 253.08,156.82 "/> <polygon class="geo-cell" points="253.08,248.36 170.66,232.91 170.66,141.37 253.08,156.82 "/>
<polygon class="st0" points="211.87,286.41 170.66,278.69 170.66,232.91 211.87,240.64 "/> <polygon class="geo-cell" points="211.87,286.41 170.66,278.69 170.66,232.91 211.87,240.64 "/>
<polygon class="st0" points="253.08,294.14 211.87,286.41 211.87,240.64 253.08,248.36 "/> <polygon class="geo-cell" points="253.08,294.14 211.87,286.41 211.87,240.64 253.08,248.36 "/>
<polygon class="st0" points="294.29,301.86 253.08,294.14 253.08,248.36 294.29,256.09 "/> <polygon class="geo-cell" points="294.29,301.86 253.08,294.14 253.08,248.36 294.29,256.09 "/>
<polygon class="st0" points="294.29,256.09 253.08,248.36 253.08,202.59 294.29,210.31 "/> <polygon class="geo-cell" points="294.29,256.09 253.08,248.36 253.08,202.59 294.29,210.31 "/>
<polygon class="st0" points="294.29,210.31 253.08,202.59 253.08,156.82 294.29,164.54 "/> <polygon class="geo-cell" points="294.29,210.31 253.08,202.59 253.08,156.82 294.29,164.54 "/>
<polygon class="st0" points="294.29,164.54 253.08,156.82 253.08,111.04 294.29,118.77 "/> <polygon class="geo-cell" points="294.29,164.54 253.08,156.82 253.08,111.04 294.29,118.77 "/>
<polygon class="st0" points="294.29,118.77 253.08,111.04 253.08,65.27 294.29,72.99 "/> <polygon class="geo-cell" points="294.29,118.77 253.08,111.04 253.08,65.27 294.29,72.99 "/>
<polygon class="st0" points="294.29,72.99 253.08,65.27 253.08,19.5 294.29,27.22 "/> <polygon class="geo-cell" points="294.29,72.99 253.08,65.27 253.08,19.5 294.29,27.22 "/>
<polygon class="st0" points="253.08,65.27 211.87,57.55 211.87,11.77 253.08,19.5 "/> <polygon class="geo-cell" points="253.08,65.27 211.87,57.55 211.87,11.77 253.08,19.5 "/>
<polygon class="st0" points="211.87,57.55 170.66,49.82 170.66,4.05 211.87,11.77 "/> <polygon class="geo-cell" points="211.87,57.55 170.66,49.82 170.66,4.05 211.87,11.77 "/>
</g> </g>
<rect x="40.85" y="53.82" class="st1" width="218.41" height="218.41"/> <rect x="40.85" y="53.82" class="geo-region" width="218.41" height="218.41"/>
<circle class="st2" cx="111.31" cy="80.8" r="4.81"/> <circle class="geo-point" cx="111.31" cy="80.8" r="4.81"/>
<circle class="st2" cx="108.65" cy="199.68" r="4.81"/> <circle class="geo-point" cx="108.65" cy="199.68" r="4.81"/>
<circle class="st2" cx="111.31" cy="281.83" r="4.81"/> <circle class="geo-point" cx="111.31" cy="281.83" r="4.81"/>
<circle class="st2" cx="40.85" cy="235.82" r="4.81"/> <circle class="geo-point" cx="40.85" cy="235.82" r="4.81"/>
<circle class="st2" cx="207.05" cy="111.04" r="4.81"/> <circle class="geo-point" cx="207.05" cy="111.04" r="4.81"/>
<circle class="st2" cx="191.26" cy="128.98" r="4.81"/> <circle class="geo-point" cx="191.26" cy="128.98" r="4.81"/>
<circle class="st2" cx="151.74" cy="243.55" r="4.81"/> <circle class="geo-point" cx="151.74" cy="243.55" r="4.81"/>
<circle class="st2" cx="237.29" cy="256.09" r="4.81"/> <circle class="geo-point" cx="237.29" cy="256.09" r="4.81"/>
<circle class="st2" cx="243.06" cy="232.91" r="4.81"/> <circle class="geo-point" cx="243.06" cy="232.91" r="4.81"/>
<circle class="st2" cx="283.31" cy="289.32" r="4.81"/> <circle class="geo-point" cx="283.31" cy="289.32" r="4.81"/>
<circle class="st2" cx="24.41" cy="272.2" r="4.81"/> <circle class="geo-point" cx="24.41" cy="272.2" r="4.81"/>
<circle class="st2" cx="191.26" cy="113.95" r="4.81"/> <circle class="geo-point" cx="191.26" cy="113.95" r="4.81"/>
<circle class="st2" cx="180.21" cy="16.59" r="4.81"/> <circle class="geo-point" cx="180.21" cy="16.59" r="4.81"/>
<circle class="st2" cx="270.53" cy="181.38" r="4.81"/> <circle class="geo-point" cx="270.53" cy="181.38" r="4.81"/>
<circle class="st2" cx="270.53" cy="49.82" r="4.81"/> <circle class="geo-point" cx="270.53" cy="49.82" r="4.81"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

55
static/svgs/geo-strict.svg
View File

@ -1,35 +1,30 @@
<svg version="1.1" id="geo-s2-cells-strict" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="geo-s2-cells-strict" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 329.19" style="enable-background:new 0 0 300 329.19;" xml:space="preserve"> viewBox="0 0 300 329.19" style="enable-background:new 0 0 300 329.19;" xml:space="preserve">
<style type="text/css">
.st0{fill:#22ADF6;fill-opacity:0.25;stroke:#22ADF6;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#BF2FE5;fill-opacity:0.43;stroke:#BF2FE5;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#D6F622;}
</style>
<g> <g>
<polygon class="st0" points="170.66,324.46 5.81,293.56 5.81,110.47 170.66,141.37 "/> <polygon class="geo-cell" points="170.66,324.46 5.81,293.56 5.81,110.47 170.66,141.37 "/>
<polygon class="st0" points="88.24,125.92 5.81,110.47 5.81,18.93 88.24,34.37 "/> <polygon class="geo-cell" points="88.24,125.92 5.81,110.47 5.81,18.93 88.24,34.37 "/>
<polygon class="st0" points="170.66,141.37 88.24,125.92 88.24,34.37 170.66,49.82 "/> <polygon class="geo-cell" points="170.66,141.37 88.24,125.92 88.24,34.37 170.66,49.82 "/>
<polygon class="st0" points="253.08,156.82 170.66,141.37 170.66,49.82 253.08,65.27 "/> <polygon class="geo-cell" points="253.08,156.82 170.66,141.37 170.66,49.82 253.08,65.27 "/>
<polygon class="st0" points="253.08,248.36 170.66,232.91 170.66,141.37 253.08,156.82 "/> <polygon class="geo-cell" points="253.08,248.36 170.66,232.91 170.66,141.37 253.08,156.82 "/>
<polygon class="st0" points="211.87,286.41 170.66,278.69 170.66,232.91 211.87,240.64 "/> <polygon class="geo-cell" points="211.87,286.41 170.66,278.69 170.66,232.91 211.87,240.64 "/>
<polygon class="st0" points="253.08,294.14 211.87,286.41 211.87,240.64 253.08,248.36 "/> <polygon class="geo-cell" points="253.08,294.14 211.87,286.41 211.87,240.64 253.08,248.36 "/>
<polygon class="st0" points="294.29,301.86 253.08,294.14 253.08,248.36 294.29,256.09 "/> <polygon class="geo-cell" points="294.29,301.86 253.08,294.14 253.08,248.36 294.29,256.09 "/>
<polygon class="st0" points="294.29,256.09 253.08,248.36 253.08,202.59 294.29,210.31 "/> <polygon class="geo-cell" points="294.29,256.09 253.08,248.36 253.08,202.59 294.29,210.31 "/>
<polygon class="st0" points="294.29,210.31 253.08,202.59 253.08,156.82 294.29,164.54 "/> <polygon class="geo-cell" points="294.29,210.31 253.08,202.59 253.08,156.82 294.29,164.54 "/>
<polygon class="st0" points="294.29,164.54 253.08,156.82 253.08,111.04 294.29,118.77 "/> <polygon class="geo-cell" points="294.29,164.54 253.08,156.82 253.08,111.04 294.29,118.77 "/>
<polygon class="st0" points="294.29,118.77 253.08,111.04 253.08,65.27 294.29,72.99 "/> <polygon class="geo-cell" points="294.29,118.77 253.08,111.04 253.08,65.27 294.29,72.99 "/>
<polygon class="st0" points="294.29,72.99 253.08,65.27 253.08,19.5 294.29,27.22 "/> <polygon class="geo-cell" points="294.29,72.99 253.08,65.27 253.08,19.5 294.29,27.22 "/>
<polygon class="st0" points="253.08,65.27 211.87,57.55 211.87,11.77 253.08,19.5 "/> <polygon class="geo-cell" points="253.08,65.27 211.87,57.55 211.87,11.77 253.08,19.5 "/>
<polygon class="st0" points="211.87,57.55 170.66,49.82 170.66,4.05 211.87,11.77 "/> <polygon class="geo-cell" points="211.87,57.55 170.66,49.82 170.66,4.05 211.87,11.77 "/>
</g> </g>
<rect x="40.85" y="53.82" class="st1" width="218.41" height="218.41"/> <rect x="40.85" y="53.82" class="geo-region" width="218.41" height="218.41"/>
<circle class="st2" cx="111.31" cy="80.8" r="4.81"/> <circle class="geo-point" cx="111.31" cy="80.8" r="4.81"/>
<circle class="st2" cx="108.65" cy="199.68" r="4.81"/> <circle class="geo-point" cx="108.65" cy="199.68" r="4.81"/>
<circle class="st2" cx="40.85" cy="235.82" r="4.81"/> <circle class="geo-point" cx="40.85" cy="235.82" r="4.81"/>
<circle class="st2" cx="207.05" cy="111.04" r="4.81"/> <circle class="geo-point" cx="207.05" cy="111.04" r="4.81"/>
<circle class="st2" cx="191.26" cy="128.98" r="4.81"/> <circle class="geo-point" cx="191.26" cy="128.98" r="4.81"/>
<circle class="st2" cx="151.74" cy="243.55" r="4.81"/> <circle class="geo-point" cx="151.74" cy="243.55" r="4.81"/>
<circle class="st2" cx="237.29" cy="256.09" r="4.81"/> <circle class="geo-point" cx="237.29" cy="256.09" r="4.81"/>
<circle class="st2" cx="243.06" cy="232.91" r="4.81"/> <circle class="geo-point" cx="243.06" cy="232.91" r="4.81"/>
<circle class="st2" cx="191.26" cy="113.95" r="4.81"/> <circle class="geo-point" cx="191.26" cy="113.95" r="4.81"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB