Trek'n'Co money

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Money chart</title>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;font-family: sans-serif; }
    path { stroke-width: 3; stroke: white; stroke-linecap:round}
    #tooltip { position: absolute;background:rgba(0,0,0,0.75);color:white;padding:10px;border-radius:5px;top:0;left:0;display:none;text-align:center}
  </style>
</head>

<body>
  <div id="tooltip"><span id="text"></span></div>
  <script>
(function() {
  var arc, color, data, g, height, pie, radius, svg, width;
	var myTooltip = document.getElementById("tooltip");

//data.money.toEuro : 1€ = value * data.money.toEuro
  data = {
    costs : [
      {
        name : "Food",
        value : 15.3
      },
      {
        name : "Transport",
        value : 5
      },
      {
        name : "Fun things",
        value : 0.71
      },
      {
        name : "Sleeping",
        value : 18.3
      },
      {
        name : "Beers :D",
        value : 8.71
      }
    ],
    money : {
      local : "!",
      toEuro : 1.2895478
    }
  };

//All positive
  var total = 0.0;
  for(var i = 0; i < data.costs.length; i++) {
    total += data.costs[i].value;
  }
  data.costs.forEach(function(d) {
    d["percent"] = d.value * 100 / total;
    return d.value = +d.value;
  });

width = 960;

height = 500;

radius = Math.min(width, height) / 2;

color = d3.scale.ordinal().range(["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d"]);

arc = d3.svg.arc().outerRadius(radius - 40).innerRadius(0);

pie = d3.layout.pie().sort(null).value(function(d) {
    return d.value;
  });

svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g").attr({
    transform: "translate(" + (width / 2) + ", " + (height / 2) + ")"
  });

}).call(this);

</script>
</body>

https://d3js.org/d3.v3.min.js