site and spark classes

[aappling-usgs]

site and sparklines both undergo color changes in time and/or space. the number and treatment of classes has grown organically; the code could be tidier. as of Maria, classification and formatting happen in https://github.com/USGS-VIZLAB/hurricane-maria/blob/master/scripts/process/process.classified_sites.R and https://github.com/USGS-VIZLAB/hurricane-maria/blob/master/scripts/process/process.sparks.R.

• copy over the relevant files.
• add comments. a lot of them.
• consider decomposing the functions into still smaller functions. maybe separate out the concepts of determining classes, formatting according to class, and formatting according to other information (adding onmousemove, etc.)
• define 'blocker' and 'treasure'
• make these functions work for the case where a data stream is only temporarily offline and then comes back. and maybe even for the case where data is sporadic (goes off and online more than once).
• could timeseries classes be defined in a third script, maybe here: https://github.com/USGS-VIZLAB/hurricane-maria/blob/master/scripts/process/process.storm_gage_height.R, before we move to creating svg elements in the two scripts linked above?

[aappling-usgs]

In the Irma-Marie retrospective, someone noted that "Combination of fill mask and clipPath could support using making Maria-like sparks with one path". Look into it.

[jordansread]

here is what I meant by that:

mask examples
clipPath

[jordansread]

I like this concept with flood yes/no:

I think it is intuitive, and easier to control the state w/ jquery compared to changing colors and strokes.

The base dot has a stroke color, fill color, and stroke width (which is wide). the "flood" condition changes the stroke-opacity to 1 (making the wider, darker donut band visible), and the "not flooding" condition changes stroke-opacity to 0. That is the only change.

This way the colors are still controlled in css, vs in maria and elsewhere, there was a confusing mix of styles in css doc and jquery setting styles within the animation functions.

This way we can also do .dot:hover conditions that would change the colors to emphasize the dot, but all of that could live in css and not need to be tracked again in js.

[jordansread]

Here is one example of how we can use a pattern for the flood level fill:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 144 30" preserveAspectRatio="xMidYMid meet" version="1.1">
	<g>
		<polyline points="5.33,27.73 5.33,27.73 6.87,15.75 8.40,12.81 9.93,11.83 11.46,14.28 13.00,12.08 14.53,13.54 16.06,13.30 17.59,13.79 19.13,14.28 20.66,11.83 22.19,8.90 23.72,7.18 25.26,6.69 26.79,6.45 28.32,6.20 29.85,5.47 31.39,4.49 32.92,5.47 34.45,8.16 35.98,10.85 37.52,6.94 39.05,4.49 40.58,3.02 42.11,3.51 43.65,2.53 45.18,2.29 46.71,1.56 48.25,2.53 49.78,3.76 51.31,1.80 52.84,1.56 54.38,1.07 55.91,2.78 57.44,4.74 58.97,6.45 60.51,11.10 62.04,15.01 63.57,17.70 65.10,20.64 66.64,23.09 68.17,25.53 69.70,12.32 71.23,11.10 72.77,10.36 74.30,13.79 75.83,13.79 77.36,12.08 78.90,14.52 80.43,18.44 81.96,17.95 83.49,14.28 85.03,9.38 86.56,7.67 88.09,7.18 89.62,5.23 91.16,3.27 92.69,5.71 94.22,5.47 95.75,3.02 97.29,7.43 98.82,10.85 100.35,11.83 101.89,14.52 103.42,17.70 104.95,20.88 106.48,21.62 108.02,22.84 109.55,23.33 111.08,23.57 112.61,23.82 114.15,24.06 115.68,24.55 117.21,24.31 118.74,24.55 120.28,25.04 121.81,24.80 123.34,25.04 124.87,25.04 126.41,24.80 127.94,25.04 129.47,25.04 131.00,25.29 132.54,25.04 134.07,24.55 135.60,24.31 137.13,24.06 138.67,23.57 138.67,27.73 " id="sparkline-02421350" class="sparkline" style="fill: url(#waterfill-02421350);"/>
	</g>
	<defs>
		<pattern id="waterfill-02421350" width="100%" height="100%">
			<rect width="100%" height="24%" style="fill: #175676"/>
			<rect width="100%" y="24%" height="76%" style="fill: #4BA3C3"/>
		</pattern>	
	</defs>
</svg>

produces this:

we can also keep the styling in css by using:

<rect width="100%" height="24%" class="flood-water"/>
<rect width="100%" y="24%" height="76%" class="normal-water"/>

With this approach, we can still use mask and clipPath for sequentially revealing data w/ the animation and clipping when data are missing (respectively).

[aappling-usgs]

i like it with just fill, no line - looks clean. but if including the line turns out to be cleaner for a large number of sites, do we also have the option of including the line?

[jordansread]

Yes, giving a stroke property to the sparkline class in CSS would give us back the line