Servuc/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>

<!--
By Servuc.fr
Good Travel Trek'N'Co :D
-->
<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) + ")"
  });

var labelArc = d3.svg.arc()
    .outerRadius(radius + 225)
    .innerRadius(0);
  g = svg.selectAll(".arc").data(pie(data.costs)).enter().append("path").attr('class', 'arc').attr("d", arc).style("fill", function(d) {
    return color(d.data.name);
  }).attr("data-text", function(d) {
    return d.data.name +" : " + d.data.percent.toFixed(2) +  "%\n" + d.data.value.toFixed(2) + data.money.local + " / " + (d.data.value * data.money.toEuro).toFixed(2) + "€";
  }).on("mouseleave", function() {
      myTooltip.style.display = "none";
  }).on("mouseover", function() {
      myTooltip.style.display = "block";
    	document.getElementById("text").innerText = d3.select(this).attr("data-text")
  }).on("mousemove", function() {
    console.log(d3.event)
      myTooltip.style.left = (d3.event.clientX + 10) + "px";
      myTooltip.style.top = (d3.event.clientY - 20) + "px";
  }).append("text").attr("class", ".text")
      .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
      .attr("dy", ".5em")
      .text(function(d) { return d.data.name; }).style("fill", function(d) {
    return color(d.data.name);
  }).style("text-anchor", function(d) {
    return (labelArc.centroid(d)[0] <= 0) ? "end" : "start";
  })

  svg.selectAll(".arc").selectAll(".text").forEach(function(item) {
		svg.append("text")
      .text(item.parentNode.firstChild.textContent)
      .attr("transform", item.parentNode.firstChild.getAttribute("transform"))
    	.attr("style", item.parentNode.firstChild.getAttribute("style"))
  });

}).call(this);

  </script>
</body>
	<!DOCTYPE html>

	<!--
	By Servuc.fr
	Good Travel Trek'N'Co :D
	-->
	<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) + ")"
	});

	var labelArc = d3.svg.arc()
	.outerRadius(radius + 225)
	.innerRadius(0);
	g = svg.selectAll(".arc").data(pie(data.costs)).enter().append("path").attr('class', 'arc').attr("d", arc).style("fill", function(d) {
	return color(d.data.name);
	}).attr("data-text", function(d) {
	return d.data.name +" : " + d.data.percent.toFixed(2) + "%\n" + d.data.value.toFixed(2) + data.money.local + " / " + (d.data.value * data.money.toEuro).toFixed(2) + "€";
	}).on("mouseleave", function() {
	myTooltip.style.display = "none";
	}).on("mouseover", function() {
	myTooltip.style.display = "block";
	document.getElementById("text").innerText = d3.select(this).attr("data-text")
	}).on("mousemove", function() {
	console.log(d3.event)
	myTooltip.style.left = (d3.event.clientX + 10) + "px";
	myTooltip.style.top = (d3.event.clientY - 20) + "px";
	}).append("text").attr("class", ".text")
	.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
	.attr("dy", ".5em")
	.text(function(d) { return d.data.name; }).style("fill", function(d) {
	return color(d.data.name);
	}).style("text-anchor", function(d) {
	return (labelArc.centroid(d)[0] <= 0) ? "end" : "start";
	})

	svg.selectAll(".arc").selectAll(".text").forEach(function(item) {
	svg.append("text")
	.text(item.parentNode.firstChild.textContent)
	.attr("transform", item.parentNode.firstChild.getAttribute("transform"))
	.attr("style", item.parentNode.firstChild.getAttribute("style"))
	});

	}).call(this);

	</script>
	</body>