var svg = d3.select('body').append('svg')

var skills = [
    ['D3', 6, 2],
    ['Angular', 0.1, 5],
    ['Верстка', 3, 2],
    ['SVG', 5, 3],
    ['Базовые навыки программирования', 3, 5],
    ['Математика', 6, 0],
    ['', 0, 0],
    ['Настойчивость', 9, 2],
    ['Проектирование', 2, 5],
    ['Управление временем', 3, 3],
]
var count = skills.length

var skillHeight = 24
var gapHeight = 3

var r = (count * (skillHeight + gapHeight) - gapHeight) / 2

var skillWidth = 20
svg
    .attr('width', '100%')
    .style('left', '50%')
    .attr('height', r * 2 + 2)

svg.append('circle')
    .attr('r', r - 1)
    .attr('cx', r + 1)
    .attr('cy', r + 1)
    .attr('stroke', 'black')
    .attr('fill', 'white')


svg.append('circle')
    .attr('r', 15)
    .attr('cx', 50)
    .attr('cy', 80)
    .attr('stroke', 'black')
    .attr('fill', 'white')
    .classed('eye', true)

svg.append('rect')
    .attr('x', r)
    .attr('width', r + 2)
    .attr('height', r * 2)
    .attr('fill', 'white')

var g = svg.append('g')
g
    .selectAll('rect.year2014')
    .data(skills)
    .enter()
    .append('rect')
    .classed('year2014', true)
    .attr('x', r)
    .attr('y', function (d, i) { return i * (skillHeight + gapHeight) + 1})
    .attr('height', skillHeight)
    .attr('width', function (d) { return d[1] * skillWidth })
    .attr('fill', 'white')


g
    .selectAll('rect.year2015')
    .data(skills)
    .enter()
    .append('rect')
    .classed('year2015', true)
    .attr('x', function (d) { return d[1] * skillWidth + r })
    .attr('y', function (d, i) { return i * (skillHeight + gapHeight) + 1})
    .attr('height', skillHeight)
    .attr('width', function (d) { return d[2] * skillWidth })
    .attr('fill', 'white')


g
    .selectAll('text')
    .data(skills)
    .enter()
    .append('text')
    .text(function (d) { return d[0]})
    .attr('x', function (d) { return (d[1] + d[2]) * skillWidth })
    .attr('dy', 18)
    .attr('dx', 6 + r)
    .attr('y', function (d, i) { return i * (skillHeight + gapHeight) + 1})