Визуализация данных на CSS

Веб разработка - CSS

Визуализация данных графиков, диаграмм в основном решается с помощью флэш и некоторых языков программирования. Являются ли эти способы единственными? Давайте попробуем реализовать эту задачу с помощью CSS.

Предисловие
В этом примере я не буду использовать ни JavaScript, ни любые другие языки. Все, что мне нужно это хорошая разметка и код CSS.
Таким образом, наша цель состоит в том, чтобы представить данные таблицы в виде диаграммы. Можно отметить, что данные диаграммы – это объект из 2х элементов, непосредственно зависимых друг от друга. Поэтому, лучшим решением в отношении структуры и семантики будет использование списков определений.
Почему? Ну, для начала, это список элементов. Несмотря на то, что список является линейным, мы можем обозначить заголовки определений (элементы dt) как пункты по оси X и описание определений (элементы dd) как значения по оси Y.

А делать мы будем следующее:
представим

вот в таком виде

лишь с помощью CSS кода

Реализация
Для примера я использовал период последних 12 дней и мое представление работоспособности за день (что-то типа КПД рабочего дня) в процентах. Как вы заметили, на 6й день процент был самый высокий, потому что я получил зарплату, что и мотивировало меня :-)

Заголовки определений в данном случае будут сами дни по порядку от 1 до 12

<dt>Day 1</dt>

А описанием определений будут значения моего КПД в %

<dd>36</dd>

Внутри элемента dd я добавлю также элементы span и em. Не в целях изменения структуры, а для того чтобы было достаточно элементов для работы со стилями. Также присвою класс элементу, который в дальнейшим мы оформим.
Таким образом, описание определения будет выглядеть так:

<dd><span class= type2 p80 ><em>80</em></span></dd>