I'm working on a pet project to experiment with CSS-based graphs, JavaScript Web Workers, and the Random Number Generator at random.org. Right now, my biggest challenge is how to structure the markup for my graphs to show results semantically. A basic design can be seen below. Essentially the purpose of the graph is to:

  • Show the number of times a given number has been generated
  • Show what number, specifically, was generated,
  • Visually show what the percentage of a number occurring was

I'd also like the layout to be somewhat flexible so that (as show below) random numbers from 1 to 10 can be displayed, but also numbers from 1 to 25 (for example) could be shown, with the only difference being much thinner bars in this case.

Graph Wireframe

I'm conflicted as to what the best approach to represent this type of data should be.

I've considered using an unordered list, where I style the list to display as it does in the wireframe above. This seems like a good choice because each set of data has its own <li> tag, allowing me to easily expand to add additional data points by increasing the <li> tags.

<ul>
    <li class="header">
        <span>Occurances</span>
        <span>Number</span>
    </li>
    <li class="data">
        <span class="percentage-container"><span class="percentage">15%</span></span>
        <span class="occurances">53</span>
        <span class="number">1</span>
    </li>
</ul>

Another approach I've thought of is to use tables. Since I'm showing (somewhat) tabular data, this doesn't seem like a terrible fit for what I'm doing. My main gripe with this idea is that it's not so much "tabular" as it is graphical data, at least when it is output. This means I'd be committing a major crime of semantic markup by using tables for non-tabular data. Also, to add a new point of data, I'd have to add a cell to each row, as opposed to my list-based solution above where I could add a single node to the list to add a new point of data. The biggest advantage here is that the data is still readable when styles are turned off.

<table>
    <tr class="percentage"><th>Percentage</th><td><span>15%</span></td></tr>
    <tr class="occurances"><th>Occurances</th><td>53</td></tr>
    <tr class="number"><th>Number</th><td>1</td></tr>
</table>

I'm ok with this approach, however in its current form it is not very 508-compliant (not a requirement, but I like to aim for it if I can) since it doesn't lend itself well to a <thead> tag unless I flip the chart on its axis to allow for it.

What is the more favorable approach here? Is either more favorable or is there another option that I'm not considering that would be better?

  • How is each occurance 15% (150% total)? Mottie over 6 years ago

2 answers

1
point

Have you considered a definition list (dl)?

If I'm reading the spec right I think you could do something like this:

<h3>Numbers</h3>

<dl>
  <dt>1</dt>
  <dd>
    <dl>
      <dt>Occurances</dt>
      <dd>53</dd>
      <dd>15%</dd>
    </dl>
  </dd>

  <dt>2</dt>
  <dd>
    <dl>
      <dt>Occurances</dt>
      <dd>32</dd>
      <dd>15%</dd>
    </dl>
  </dd>
</dl>

It would require a little more CSS creativity to reach your desired format but it may add some semantic clarity to the data. I'm guessing that it could be better read by screen readers in this format.

I could be misreading your data on the relationship between the percentage and integer. If I'm not that it seems that they are both views on "occurrences" which is in turn the "definition" of the number.

The spec is quite liberal in allowing the use of dl/dt/dd for all sorts of key-value pairs.

-S

Answered over 6 years ago by Samuel Mikel Bowles
Mottie 1134
0
points

I would go with using a table for three reasons:

  1. Like you said, with the CSS turned off the table would still be readable.
  2. Using a table is no more difficult that making an ordered list (depending on it's formatting)
  3. Compliance with the 508 standard may not be possible, but would the "graph" be readable if you used a list with CSS turned off?

I'm not quite sure what you are doing with the percentages, but you might have to define the height of each percentage. Maybe something like this:

CSS

#graph td { vertical-align: bottom }
#graph td div { text-align: center; }
.percentage {}
.p0 { height: 20px; background: transparent; }
.p5 { height: 20px; background: #444; }
.p10 { height: 30px; background: #444; }
.p15 { height: 40px; background: #555; }
.p20 { height: 50px; background: #555; }
.p25 { height: 60px; background: #666; }
.p30 { height: 70px; background: #666; }
.p35 { height: 80px; background: #777; }
.p40 { height: 90px; background: #777; }
.p45 { height: 100px; background: #888; }
.occurances {}
.number {}

HTML (using a table)

<table id="graph">
 <tr>
  <td><div class="percentage p15">15%</div><div class="occurances">53</div><div class="number">1</div></td>
  <td><div class="percentage p20">20%</div><div class="occurances">32</div><div class="number">2</div></td>
  <td><div class="percentage p30">30%</div><div class="occurances">21</div><div class="number">3</div></td>
  <td><div class="percentage p45">45%</div><div class="occurances">4</div><div class="number">4</div></td>
  <td><div class="percentage p5">5%</div><div class="occurances">3</div><div class="number">5</div></td>
  <td><div class="percentage p0">0%</div><div class="occurances">33</div><div class="number">6</div></td>
  <td><div class="percentage p25">25%</div><div class="occurances">62</div><div class="number">7</div></td>
 </tr>
</table>

You would only need to add one table cell to include more data.

Alternatively, have you looked at some graphing alternatives? Look at this blog post showing 6 different jQuery chart plugins... I especially like Flot.

Answered over 6 years ago by Mottie