influxdata / influxdata/giraffe
[GeoWidget] Minimum Radius calculation for circles can render camouflaged datapoints
- 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**


**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
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