CSS: data visualization with chevrons

  Kiến thức lập trình

I’m working on visualizing a 30×30 table of data where each cell represents the real-time price of a good.
It is important that fluctuations in prices are highlighted in a timely fashion so that somebody can investigate.

The method I’m thinking about is by putting a chevron in ever cell (enter image description here).
Price increases or decreases are identified by the direction of the chevron.
How long the prices have been above a certain threshold is indicated by the number of chevrons (eg 1 chevron for ever 30 mins, max 3 chevrons).
The color of the chevrons indicate the percentage increase (I’m using 4 colors for price increases and 4 colors for price decreases).

What is the most intelligent way to implement this?
Should I make an icon for each possible colour-number of chevrons-direction combination, or is there a smarter way of doing this in CSS?
I suspect CSS could be the answer. If so, how would this be done?

LEAVE A COMMENT