<div id="activity"></div>

#activity, #activity svg {
  margin-left: auto;
  margin-right: auto;
}

#activity {
  width: 450px;
  margin: 5rem auto 0 auto;
}

body {
  background-color: black;
}

/* Statistics */
const stats = [
 {
    name: 'Moving',
    value: 474,
    goal: 350,
    perc: 0.35,
    unit: 'kcal',
    color: 'hotpink'
  }, {
    name: 'Exercising',
    value: 40,
    goal: 40,
    perc: 1.00,
    unit: 'min',
    color: 'limegreen'
  }, {
    name: 'Standing',
    value: 9,
    goal: 12,
    perc: 0.75,
    unit: 'h',
    color: 'turquoise'
  }
];

/* Chart configuration. */
const width = 450;
const height = 600;
const margin = 40;

const chart = d3.select('#activity').append('svg')
  .attr('width', width)
  .attr('height', height);

const rings = chart.append('g')
  .attr('transform', `translate(${width / 2}, ${height / 2})`);

rings.append('path')
    .attr('d', d3.arc()
      .innerRadius(150)
      .outerRadius(200)
      .startAngle(0)
      .endAngle(Math.PI) // full circle: Math.PI * 2
     )
    .attr('fill', 'white');