vega-lite could be a promising direction for this page

[jhnwllr]

vega-lite
https://vega.github.io/vega-lite/

I made this graph directly using a csv provided by the analytics output:
occ_kingdom_basisOfRecord.csv

https://blockbuilder.org/jhnwllr/c9461b61f2dcd938d38909bab91c5344

All that was necessary was this json specification file.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "width": 400,
  "height":300,
  "data": {"url":"https://gist.githubusercontent.com/jhnwllr/f9eee906345f1cb53b8931347d57fa22/raw/2198298239da88b8db40aa98cc0a7ce47613f4d6/occ_kingdom_basisOfRecord.csv"},
"format": {"type": "csv"},  
"mark": "bar",
  "encoding": {
    "x": {"field": "snapshot", "type": "ordinal"},
    "y": {"field": "occurrenceCount", "type": "quantitative"},
    "tooltip": {"field": "basisOfRecord", "type": "nominal"},
    "color": {
      "field": "basisOfRecord",
      "type": "nominal",
      "scale": {
        "domain": 
       ["PRESERVED_SPECIMEN", 
       "UNKNOWN", 
       "FOSSIL_SPECIMEN",
       "LIVING_SPECIMEN",
       "HUMAN_OBSERVATION",
       "OBSERVATION",
       "LITERATURE",
       "MACHINE_OBSERVATION",
       "MATERIAL_SAMPLE"],
       "range": ["#c00000", "#ff4f00", "#fcff00", "#0c8900", "#0085ff","#aab8ab","#5da9b7"]
      },
       "order": {"aggregate": "sum", "field": "occurrenceCount", "type": "quantitative"}
 }
}

[MortenHofft]

I just looked a bit more on this. It looks nice and do a lot, but it is also a large dependency in terms of kb (it includes d3 apparently). It is 750kb ≈ 260kb gzipped and need css as well.

Highcharts as we use on GBIF.org is around 90kb gzipped

D3 is around 80kb gzipped

That said, it appears to support tree shaking, so perhaps it isn't as large in practice.

[jhnwllr]

Thanks for looking into it Morten. Yeah I am not sure about the performance...

The advantage is that it basically is built on the same frame work that is already being used so I could image that most the graphics being produced using R could be ported easily to this. If I am not mistaken, a large chunk processing time used for producing the analytics charts is from the R part. But maybe we would have to run that anyway for the country reports...

I am not a vega-lite expert either, so we might run into areas where it doesn't do certain things we want very easily, so maybe highcharts might still be a better option.

[MattBlissett]

Generating the figures themselves only takes a few minutes, that's not a problem.

The advantage would be interactivity (user can zoom in to just the last 5 years; user can hover over a colour to see the key), and also better scaling, although there's already SVG for that.

[MortenHofft]

I just looked again at vega-lite to try creating some simple charts. Turns out there isn't any support for custom click handlers. So it cannot replace our general chart usage (where we trigger filters, route changes, custom hovers etc).

For generating SVGs to replace the existing pngs it might well be fine though. But I would want them server rendered then, and I see that we already have that