Как исполнить такую диаграмму на Html и CSS?
d3.js - чтобы сделать на SVG. По мне так канвас для этого использовать - прошлый век.
Вот простенький мануал(ссылка) по пай чартам. Дальше смотрите доку d3.js
Используйте карту изображений (imagemap).  Это html теги map, area, img.  
Если вид стандартной подсказки (средствами браузера) недостаточно, то гуглите как делать tooltips на css.