Skip to content

Instantly share code, notes, and snippets.

@chiester

chiester/data.json

Last active August 29, 2015 14:02
Show Gist options
  • Save chiester/f7deef95513fdbe1a217 to your computer and use it in GitHub Desktop.
Save chiester/f7deef95513fdbe1a217 to your computer and use it in GitHub Desktop.
Download ZIP
Revised Zoomable Sunburst Skills Chart
Raw
data.json
{
"name": "Me",
"size": 1,
"children": [{
"name": "Web Dev",
"size": 1,
"children": [{
"name": "NodeJS",
"size": 1
}, {
"name": "PHP",
"size": 1
}, {
"name": "Java",
"size": 1
}, {
"name": "Scala",
"size": 1
}, {
"name": "MySQL",
"size": 1
}, {
"name": "MongoDB",
"size": 1
}, {
"name": "CSS",
"size": 1
}, {
"name": "HTML5",
"size": 1
}, {
"name": "AngularJS",
"size": 1
}, {
"name": "D3",
"size": 1
}, {
"name": "jQuery",
"size": 1
}, {
"name": "Meteor",
"size": 1
}, {
"name": "Grunt",
"size": 1
}, {
"name": "Bower",
"size": 1
}, {
"name": "npm",
"size": 1
}, {
"name": "Karma",
"size": 1
}, {
"name": "Jasmine",
"size": 1
}, {
"name": "Protractor",
"size": 1
}]
}, {
"name": "SDLC",
"size": 1,
"children": [{
"name": "CI",
"size": 1
}, {
"name": "git",
"size": 1
}]
}, {
"name": "UX",
"size": 1,
"children": [{
"name": "Design",
"size": 1
}, {
"name": "Usability",
"size": 1
}, {
"name": "Research",
"size": 1
}, {
"name": "IA",
"size": 1
}, {
"name": "Wireframes",
"size": 1
}]
}, {
"name": "Manager",
"size": 1,
"children": [{
"name": "Mentor",
"size": 1
}, {
"name": "Recruit",
"size": 1
}, {
"name": "Hire",
"size": 1
}, {
"name": "Lead",
"size": 1
}, {
"name": "Facilite",
"size": 1
}, {
"name": "Collaborate",
"size": 1
}]
}, {
"name": "Business",
"size": 1,
"children": [{
"name": "Strategy",
"size": 1
}, {
"name": "Analytics",
"size": 1
}]
}]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<style>
body {
font-size: 14px;
}
path {
stroke: #fff;
fill-rule: evenodd;
cursor: pointer
}
text {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 100%;
cursor: pointer;
}
image {
cursor: pointer;
}
</style>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 480,
height = 480,
radius = Math.min(width, height) / 2;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.linear()
.range([0, radius]);
var color = d3.scale.category20c();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("preserveAspectRatio", "xMidYMid")
.attr("viewBox", "0 0 640 640")
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");
var partition = d3.layout.partition()
.value(function(d) {
return d.size;
});
var arc = d3.svg.arc()
.startAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
})
.endAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
})
.innerRadius(function(d) {
return Math.max(0, y(d.y));
})
.outerRadius(function(d) {
return Math.max(0, y(d.y + d.dy));
});
d3.json("data.json", function(error, root) {
var g = svg.selectAll("g")
.data(partition.nodes(root))
.enter().append("g");
d3.select("g").append("svg:image")
.attr('x', -78)
.attr('y', -78)
.attr('width', 156)
.attr('height', 156)
.attr("xlink:href", "img/hiester_profile_circle_200.png")
.on("mouseover", function() {
var sel = d3.select(this);
sel.moveToBack();
});
var path = g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color((d.children ? d : d.parent).name);
})
.on("click", click)
.on("mouseover", doHover)
.on("mouseout", unDoHover);
var text = g.append("text")
.attr("transform", function(d) {
return "rotate(" + computeTextRotation(d) + ")";
})
.attr("x", function(d) {
return y(d.y);
})
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) {
return d.name;
}).on("click", click)
.on("mouseover", doHover)
.on("mouseout", unDoHover);
d3.select("g g").transition().duration(200).attr("opacity", "0");
function click(d) {
// fade out all text elements
text.transition().attr("opacity", 0);
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function() {
return "rotate(" + computeTextRotation(e) + ")"
})
.attr("x", function(d) {
return y(d.y);
});
}
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
function doHover(d) {
d3.select(this.parentNode.childNodes[0]).transition().duration(200).attr("opacity", "0.1");
d3.select("g g").transition().duration(200).attr("opacity", "0");
};
function unDoHover(d) {
d3.select(this.parentNode.childNodes[0]).transition().duration(200).attr("opacity", "1");
d3.select("g g").transition().duration(200).attr("opacity", "0");
};
function rootHide(d) {
d3.select("g g").transition().duration(200).attr("opacity", "0");
}
function rootShow(d) {
d3.select("g g").transition().duration(200).attr("opacity", "0");
}
});
d3.select(self.frameElement).style("height", height + "px");
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i ? function(t) {
return arc(d);
} : function(t) {
x.domain(xd(t));
y.domain(yd(t)).range(yr(t));
return arc(d);
};
};
}
function computeTextRotation(d) {
return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
}
var chart = $("svg"),
aspect = chart.width() / chart.height(),
container = chart.parent();
$(window).on("resize", function() {
var targetWidth = container.width();
chart.attr("width", targetWidth);
chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment