Approach

In this example I am not using JavaScript or any backend application. All I rely on is well formed markup and css.So, the goal is to present data chart. We could say that a chart is a two dimensional object. So, the best structural and semantical choice is definition list. Why? Well, for starter, it is a list of items. Although the list is linear, we could interpret definition titles (dt elements) as items on x axis and definition descriptions (dd elements) as values on y axis.If that doesn’t make sense because of my poor explanation skills what I’ll do here is turn this:

into this

with css alone.

The markup

In my example I have used a period of last 12 days and presented my working energy level in percentages, 100% being the best I’ve felt about working ever. As you can see, on 6th More >