Skip to content

Instantly share code, notes, and snippets.

@Servuc

Servuc/.block

Last active March 7, 2017 07:10
Show Gist options
  • Save Servuc/f2ea184b766f2a9c70dad9259e70e8ce to your computer and use it in GitHub Desktop.
Save Servuc/f2ea184b766f2a9c70dad9259e70e8ce to your computer and use it in GitHub Desktop.
Download ZIP
Trek'n'Co money
Raw
.block
license: mit
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment