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;}
.st9{fill: $svg-table-code-operator;}
.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-operator: $b-pool;
$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-operator: $b-dodger !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
### 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
with coordinates in the defined region are returned.
Default is `true`.
_See [Strict and non-strict filtering](#strict-and-non-strict-filtering) above._
_**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
[`geo.strictFilter()`](/v2.0/reference/flux/stdlib/experimental/geo/strictfilter/)
after `geo.gridFilter()` to precisely filter points.
_See [Non-strict and strict filtering](#non-strict-and-strict-filtering) below._
{{% /note %}}
_**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
### 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.
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()`.
{{% 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 %}}
_See [Strict and non-strict filtering](#strict-and-non-strict-filtering) below._
_**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
### 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"
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>
<polygon class="st0" 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="st0" 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="st0" 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="st0" 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="st0" 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="st0" 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="st0" 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="st0" points="211.87,57.55 170.66,49.82 170.66,4.05 211.87,11.77 "/>
<polygon class="geo-cell" points="170.66,324.46 5.81,293.56 5.81,110.47 170.66,141.37 "/>
<polygon class="geo-cell" points="88.24,125.92 5.81,110.47 5.81,18.93 88.24,34.37 "/>
<polygon class="geo-cell" points="170.66,141.37 88.24,125.92 88.24,34.37 170.66,49.82 "/>
<polygon class="geo-cell" points="253.08,156.82 170.66,141.37 170.66,49.82 253.08,65.27 "/>
<polygon class="geo-cell" points="253.08,248.36 170.66,232.91 170.66,141.37 253.08,156.82 "/>
<polygon class="geo-cell" points="211.87,286.41 170.66,278.69 170.66,232.91 211.87,240.64 "/>
<polygon class="geo-cell" points="253.08,294.14 211.87,286.41 211.87,240.64 253.08,248.36 "/>
<polygon class="geo-cell" points="294.29,301.86 253.08,294.14 253.08,248.36 294.29,256.09 "/>
<polygon class="geo-cell" points="294.29,256.09 253.08,248.36 253.08,202.59 294.29,210.31 "/>
<polygon class="geo-cell" points="294.29,210.31 253.08,202.59 253.08,156.82 294.29,164.54 "/>
<polygon class="geo-cell" points="294.29,164.54 253.08,156.82 253.08,111.04 294.29,118.77 "/>
<polygon class="geo-cell" points="294.29,118.77 253.08,111.04 253.08,65.27 294.29,72.99 "/>
<polygon class="geo-cell" points="294.29,72.99 253.08,65.27 253.08,19.5 294.29,27.22 "/>
<polygon class="geo-cell" points="253.08,65.27 211.87,57.55 211.87,11.77 253.08,19.5 "/>
<polygon class="geo-cell" points="211.87,57.55 170.66,49.82 170.66,4.05 211.87,11.77 "/>
</g>
<rect x="40.85" y="53.82" class="st1" width="218.41" height="218.41"/>
<circle class="st2" cx="111.31" cy="80.8" r="4.81"/>
<circle class="st2" cx="108.65" cy="199.68" r="4.81"/>
<circle class="st2" cx="111.31" cy="281.83" r="4.81"/>
<circle class="st2" cx="40.85" cy="235.82" r="4.81"/>
<circle class="st2" cx="207.05" cy="111.04" r="4.81"/>
<circle class="st2" cx="191.26" cy="128.98" r="4.81"/>
<circle class="st2" cx="151.74" cy="243.55" r="4.81"/>
<circle class="st2" cx="237.29" cy="256.09" r="4.81"/>
<circle class="st2" cx="243.06" cy="232.91" r="4.81"/>
<circle class="st2" cx="283.31" cy="289.32" r="4.81"/>
<circle class="st2" cx="24.41" cy="272.2" r="4.81"/>
<circle class="st2" cx="191.26" cy="113.95" r="4.81"/>
<circle class="st2" cx="180.21" cy="16.59" r="4.81"/>
<circle class="st2" cx="270.53" cy="181.38" r="4.81"/>
<circle class="st2" cx="270.53" cy="49.82" r="4.81"/>
<rect x="40.85" y="53.82" class="geo-region" width="218.41" height="218.41"/>
<circle class="geo-point" cx="111.31" cy="80.8" r="4.81"/>
<circle class="geo-point" cx="108.65" cy="199.68" r="4.81"/>
<circle class="geo-point" cx="111.31" cy="281.83" r="4.81"/>
<circle class="geo-point" cx="40.85" cy="235.82" r="4.81"/>
<circle class="geo-point" cx="207.05" cy="111.04" r="4.81"/>
<circle class="geo-point" cx="191.26" cy="128.98" r="4.81"/>
<circle class="geo-point" cx="151.74" cy="243.55" r="4.81"/>
<circle class="geo-point" cx="237.29" cy="256.09" r="4.81"/>
<circle class="geo-point" cx="243.06" cy="232.91" r="4.81"/>
<circle class="geo-point" cx="283.31" cy="289.32" r="4.81"/>
<circle class="geo-point" cx="24.41" cy="272.2" r="4.81"/>
<circle class="geo-point" cx="191.26" cy="113.95" r="4.81"/>
<circle class="geo-point" cx="180.21" cy="16.59" r="4.81"/>
<circle class="geo-point" cx="270.53" cy="181.38" r="4.81"/>
<circle class="geo-point" cx="270.53" cy="49.82" r="4.81"/>
</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"
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>
<polygon class="st0" 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="st0" 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="st0" 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="st0" 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="st0" 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="st0" 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="st0" 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="st0" points="211.87,57.55 170.66,49.82 170.66,4.05 211.87,11.77 "/>
<polygon class="geo-cell" points="170.66,324.46 5.81,293.56 5.81,110.47 170.66,141.37 "/>
<polygon class="geo-cell" points="88.24,125.92 5.81,110.47 5.81,18.93 88.24,34.37 "/>
<polygon class="geo-cell" points="170.66,141.37 88.24,125.92 88.24,34.37 170.66,49.82 "/>
<polygon class="geo-cell" points="253.08,156.82 170.66,141.37 170.66,49.82 253.08,65.27 "/>
<polygon class="geo-cell" points="253.08,248.36 170.66,232.91 170.66,141.37 253.08,156.82 "/>
<polygon class="geo-cell" points="211.87,286.41 170.66,278.69 170.66,232.91 211.87,240.64 "/>
<polygon class="geo-cell" points="253.08,294.14 211.87,286.41 211.87,240.64 253.08,248.36 "/>
<polygon class="geo-cell" points="294.29,301.86 253.08,294.14 253.08,248.36 294.29,256.09 "/>
<polygon class="geo-cell" points="294.29,256.09 253.08,248.36 253.08,202.59 294.29,210.31 "/>
<polygon class="geo-cell" points="294.29,210.31 253.08,202.59 253.08,156.82 294.29,164.54 "/>
<polygon class="geo-cell" points="294.29,164.54 253.08,156.82 253.08,111.04 294.29,118.77 "/>
<polygon class="geo-cell" points="294.29,118.77 253.08,111.04 253.08,65.27 294.29,72.99 "/>
<polygon class="geo-cell" points="294.29,72.99 253.08,65.27 253.08,19.5 294.29,27.22 "/>
<polygon class="geo-cell" points="253.08,65.27 211.87,57.55 211.87,11.77 253.08,19.5 "/>
<polygon class="geo-cell" points="211.87,57.55 170.66,49.82 170.66,4.05 211.87,11.77 "/>
</g>
<rect x="40.85" y="53.82" class="st1" width="218.41" height="218.41"/>
<circle class="st2" cx="111.31" cy="80.8" r="4.81"/>
<circle class="st2" cx="108.65" cy="199.68" r="4.81"/>
<circle class="st2" cx="40.85" cy="235.82" r="4.81"/>
<circle class="st2" cx="207.05" cy="111.04" r="4.81"/>
<circle class="st2" cx="191.26" cy="128.98" r="4.81"/>
<circle class="st2" cx="151.74" cy="243.55" r="4.81"/>
<circle class="st2" cx="237.29" cy="256.09" r="4.81"/>
<circle class="st2" cx="243.06" cy="232.91" r="4.81"/>
<circle class="st2" cx="191.26" cy="113.95" r="4.81"/>
<rect x="40.85" y="53.82" class="geo-region" width="218.41" height="218.41"/>
<circle class="geo-point" cx="111.31" cy="80.8" r="4.81"/>
<circle class="geo-point" cx="108.65" cy="199.68" r="4.81"/>
<circle class="geo-point" cx="40.85" cy="235.82" r="4.81"/>
<circle class="geo-point" cx="207.05" cy="111.04" r="4.81"/>
<circle class="geo-point" cx="191.26" cy="128.98" r="4.81"/>
<circle class="geo-point" cx="151.74" cy="243.55" r="4.81"/>
<circle class="geo-point" cx="237.29" cy="256.09" r="4.81"/>
<circle class="geo-point" cx="243.06" cy="232.91" r="4.81"/>
<circle class="geo-point" cx="191.26" cy="113.95" r="4.81"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB