JSFiddle - React, Tailwind, and code Playground

by mezis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="chart">
</div>

SCSS

#chart {
  width: 100%;
  min-height: 10rem;
  border: 1px dotted red;
  background-color: #eee;
  
  svg { 
    background-color: white;
  }
}
.chart-radar-series {
  stroke-width: 2px;
  fill-opacity: 0.5;
  fill: green;
}
.chart-radar-axis {
  stroke-width: 1px;
//  stroke: none;
  fill: none;
  .domain {
    stroke: black;
  }

  line {
    fill: black;
    stroke: black;
  }
  text {
    font-family: Helvetica;
    font-size: small;
    fill: black;   
  }
  text {
    font-family: Helvetica;
    font-size: x-small;
    fill: black;   
  }
  text:first-child {
    stroke:  white;
    stroke-width: 2px;
  }
}

CoffeeScript

data = [{
  name:           'johndoe'
  pull_requests:  3
  self_comments: 			2
  other_comments: 			3
  cross_team_comments: 			2
  self_merges:					1
  other_merges:					1
},{
  name:           'median'
  pull_requests:  2
  self_comments: 			3
  other_comments: 			1
  cross_team_comments: 			3
  self_merges:					2
  other_merges:					2
}]


el = $('#chart')
padding = 10 # give enough space for tick values
width = el.width()
height = width
radius = (width - 2*padding)/2
svg = d3.select('#chart').
  append('svg').
    attr('viewBox', "0 0 #{width} #{height}").
  append('g').
    attr('id', 'center').
    attr('transform', "translate(#{padding + radius},#{padding + radius})")


dimensionNames = d3.keys(data[0]).filter (dim) ->
  dim != 'name'

dimensions = {}
dimensionNames.forEach (dim, i) ->
  max = d3.max data, (d) ->
    d[dim]
  scale = d3.scale.linear().domain([0, max]).range([0, radius]).nice()
  angle = i * 2 * Math.PI / dimensionNames.length
  ux = Math.cos(angle)
  uy = Math.sin(angle)
  dimensions[dim] = 
    scale: scale
    angle: angle * 360 / (2 * Math.PI)
    coords: (value) ->
      [scale(value) * ux, scale(value) * uy]

data.forEach (d) ->
  points = dimensionNames.map( (dim) ->
    dimensions[dim].coords(d[dim]).join(',')
  ).join(' ')
  svg.append('polygon').
    attr('class', 'chart-radar-series').
    attr('points', points)

dimensionNames.forEach (name) ->
  dim = dimensions[name]
  
  axis = d3.svg.axis().
    scale(dim.scale).ticks(4).
    outerTickSize(0)

  a = svg.append('g').
    attr('class', 'chart-radar-axis').
    attr('transform', "rotate(#{dim.angle})").
    call(axis)
    
  # remove tick marks
  a.selectAll('.tick line').remove()
  
  # remove first (center) tick
  a.select('.tick:first-child').remove()
  
  # offset tick values and make them horizontal
  a.selectAll('text').
    attr('transform', "rotate(#{-dim.angle})").
    attr('dy', 4).
    attr('y', 0).
    each (d,i) ->
      $(this).clone().appendTo $(this).parent()

...