influxdata / influxdata/giraffe

[GeoWidget] Minimum Radius calculation for circles can render camouflaged datapoints

Open
#327 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
189
Forks
33
Avg merge
3d 15h
Merged PRs (30d)
4

Description

**Build**

Local build of Master branch.

Last commit.
```
commit 3adba8bd0767e10c7b37349a7e2140c921df2fdc
```
Using testing framework at

https://github.com/bonitoo-io/giraffe-cypress

**Test Case**

Rendering basic circles with standard data set.

```javascript
...
const config: Config = {
//table: geoTable(),
table: fromRows(data),
showAxes: false,
layers: [
{
type: 'geo',
lat: latitude,
lon: longitude,
zoom: 8,
allowPanAndZoom: true,
detectCoordinateFields: true,
layers: [
{
type: 'circleMap',
radiusField: 'mag',
radiusDimension: {label: 'Mag'},
colorDimension: {label: 'Dur'},
colorField: 'dur',
colors: [
{type: 'min', hex: '#ff8808'},
{value: 50, hex: '#ff0888'},
{type: 'max', hex: '#343aeb'},
],
},
],
tileServerConfiguration,
} as GeoLayerConfig,
],
}
...
```

Magnitude values, `mag`, range from 1.8 to 6.3.

**Expected behavior**

That all circles would be clearly visible when rendered.

**Actual behavior**

The circle with the radius calculated from 1.8 is only a couple of pixels wide and is camouflaged in the background layer tiles.

**Screenshots**

![MinRadiusValue01](https://user-images.githubusercontent.com/25881301/96696941-a2582680-138b-11eb-98cf-e6fa517f6a28.png)
![MinRadiusValue02](https://user-images.githubusercontent.com/25881301/96696947-a3895380-138b-11eb-8045-51df0323c17f.png)

**Comment**

Radius calculation should better calculate the minimum radius size to ensure circles are large enough to stand out from the background. Currently the scale seems skewed. The largest circle over La Rochelle is much larger than 3.5 (6.3/1.8) times the smallest, which is over Niort.

Additional config fields might be added, so that users can declare for themselves the minimum and maximum radius values.

Color values might be adjusted or calculated based on background values so as to make sure data points stand out. Elsewhere in Giraffe colorSchemes constrain user choices.

Contributor guide

Open the contributing guide

Research direction

Start with the GeoWidget circleMap radius calculation and reproduce the supplied TypeScript configuration using the giraffe-cypress test framework. Compare the minimum and maximum circles against the visibility requirement; done means the 1.8 point is clearly visible without making the scale misleading.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.