Peaks map - optimize SVG

[lindsayplatt]

No description provided.

[cnell-usgs]

With the use of vue-svg-loader to inject svg files into the DOM, page builds execute svgo for svg optimization. Right now only default 'svgo' settings are used, but can be defined. This should cover most processes we would use in R to optimize svgs.

Moving forward, svg optimization efforts needs are more related to how we structure the svg animation and draw the peak paths.

[cnell-usgs]

vue-loader settings can be modified in vue.config.js. I added the following lines to keep svg <g> elements in, and stop streamlining of ids that we are using to bind to data.

.use('vue-svg-loader')
            .loader('vue-svg-loader')
            .options({
                svgo: {
                  plugins: [
                    { cleanupIDs: false },
                    { collapseGroups: false },
                    { removeEmptyContainers: false },
                  ],
                },
              });

[cnell-usgs]

Currently (#39) the R pipeline pre-processes data and svg coordinates which are exported to csv and used to draw the map and charts. With the exception of the map base, which is exported as svg and injected in (totally blank map).

The gwl sites are positioned via input data. Before we had <g>s with a nested <path> pre-drawn in the svg. The benefit of this was that the browser doesn't do any of that, and the map loads with the peaks almost immediately while the animation takes a min to get going. The issues with that were: (1) we had 2x as many svg elements, (2) the peaks didn't match perfectly to the animation in style, and (3) some sites were missing if they didn't have data on the first day.

We need -

• all sites with any data to be drawn on
• the map to appear right away, even if animation is still loading
• as few elements as possible, preprocessed as much as possible before D3 comes in

I think that means we should write the svg <path>s to the map svg as the first day (color and d) of the timeseries, and apply the scale and transform directly to them. Then grab these via class and bind the animation data. For sites without day 1 data, draw as a flat line or set opacity.