Как исполнить такую диаграмму на Html и CSS?

Question

[Koreetz Koreetz]

День добрый.
Нужно сверстать такую необычную диаграмму

При наведении на каждый отдельный блок появляется подсказка,
может лучше использовать JS ?
Подскажите с чего начать.....

Comments

[CyberHost]

начни с изучения SVG и Canvas HTML5

[Koreetz Koreetz]

CyberHost: без SVG разве никак?

[CyberHost]

Koreetz Koreetz: такое делается SVG или Canvas. Ну конечно можно просто картинками)

[Koreetz Koreetz]

CyberHost: спасибо за совет)

[Koreetz Koreetz]

ArsenAbakarov: как сверстать через CSS ?)

Answer 1

[Николай]

d3.js - чтобы сделать на SVG. По мне так канвас для этого использовать - прошлый век.
Вот простенький мануал(ссылка) по пай чартам. Дальше смотрите доку d3.js

Comments

[Koreetz Koreetz]

Спасибо)

Answer 2

[Сергей]

Все давно придумано, нужно только доку почитать. Так же под нее есть и mpm модули и т.п. www.highcharts.com/demo

Answer 3

[Игорь Касперский]

Вроде у zorax есть видео где он делает подобную штуку

Answer 4

[SerzN1]

советую посмотреть
tympanus.net/codrops/2013/08/09/building-a-circula...
и просто почаще заходить на этот сайт

Answer 5

[Stac]

Используйте карту изображений (imagemap). Это html теги map, area, img.
Если вид стандартной подсказки (средствами браузера) недостаточно, то гуглите как делать tooltips на css.

Answer 6

[Иван Костюк]

raphael js