a d3.js plugin based on circle packing
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>John Doe website</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="circle-packing-timeline.min.js"></script>
</head>
<body>
<script>
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var timeline = d3.circlePackingTimeline();
timeline("data.json", width, height, "body");
</script>
</body>
</html>{
"name": "John Doe",
"children": [
{
"name": "Company 1",
"desc": "Description 1",
"start": "2010",
"end": "2013",
"children": [
{
"name": "Tools",
"children": [
{
"name": "Git",
"size": 2
},
{
"name": "Jenkins"
}
]
},
{
"name": "Languages",
"children": [
{
"name": "C++"
},
{
"name": "Java"
}
]
}
]
},
{
"name": "Company 2",
"start": "2014",
"end": "2016",
"children": [
{
"name": "Tools",
"children": [
{
"name": "Git"
},
{
"name": "Jenkins"
},
{
"name": "Sonar"
}
]
},
{
"name": "Languages",
"children": [
{
"name": "Java"
},
{
"name": "Javascript",
"size": 3
}
]
}
]
}
]
}.title {
font-size: 25px;
}
.title,
.footer,
.label {
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
}
.node {
cursor: pointer;
}
.node:hover {
stroke: rgba(0, 0, 0, 0.67);
stroke-width: 1.5px;
}
.label,
.node--leaf {
pointer-events: none;
}