Skip to content

Instantly share code, notes, and snippets.

@wiederkehr

wiederkehr/Readme.md

Last active December 30, 2015 14:09
Show Gist options
  • Save wiederkehr/7840282 to your computer and use it in GitHub Desktop.
Save wiederkehr/7840282 to your computer and use it in GitHub Desktop.
Download ZIP
Lifetime Visualization
Raw
Readme.md

Lifetime Visualization

Raw
index.html
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Lifetime Visualization</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
(function() {
var radius = 1400 / 2;
var seasonNames = ['Winter', 'Spring', 'Summer', 'Fall'],
winterNames = ['January', 'February', 'March'],
springNames = ['April', 'May', 'June'],
summerNames = ['July', 'August', 'September'],
fallNames = ['October', 'November', 'Decemeber'],
monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'Decemeber'],
dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
today = 2013
amount = 30
var cluster = d3.layout.cluster()
.size([360, radius - 100]);
var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
var svg = d3.select("body").append("svg")
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
var lifeData = createData();
function createData(){
var treeData = {
"name" : "Fabienne",
"type" : "life",
"children" : generateYears(amount)
};
return treeData
}
function generateYears(amount){
var years = []
for (var i = amount - 1; i >= 0; i--) {
years.push({
"name" : amount - i - 1,
"type" : "year",
"children" : generateSeasons(today - i)
})
};
return years
}
function generateSeasons(year){
var seasons = []
seasons.push({
"name" : seasonNames[0] + ' ' + year,
"type" : "season winter",
"children" : generateWinter()
})
seasons.push({
"name" : seasonNames[1] + ' ' + year,
"type" : "season spring",
"children" : generateSpring()
})
seasons.push({
"name" : seasonNames[2] + ' ' + year,
"type" : "season summer",
"children" : generateSummer()
})
seasons.push({
"name" : seasonNames[3] + ' ' + year,
"type" : "season fall",
"children" : generateFall()
})
console.log(seasons);
return seasons
}
function generateWinter(){
var months = []
for (var i = 0; i <= 3 - 1; i++) {
months.push({
"name" : winterNames[i],
"type" : "month"
})
};
return months
}
function generateSpring(){
var months = []
for (var i = 0; i <= 3 - 1; i++) {
months.push({
"name" : springNames[i],
"type" : "month"
})
};
return months
}
function generateSummer(){
var months = []
for (var i = 0; i <= 3 - 1; i++) {
months.push({
"name" : summerNames[i],
"type" : "month"
})
};
return months
}
function generateFall(){
var months = []
for (var i = 0; i <= 3 - 1; i++) {
months.push({
"name" : fallNames[i],
"type" : "month"
})
};
return months
}
function generateMonths(){
var months = []
for (var i = 0; i <= 12 - 1; i++) {
months.push({
"name" : monthNames[i],
"children" : generateWeeks()
})
};
return months
}
function generateWeeks(){
var weeks = []
for (var i = 0; i <= 4 - 1; i++) {
weeks.push({"name" : toString(i)})
weeks.push({
"name" : i+1
})
};
return weeks
}
function generateDays(){
var days = []
for (var i = 0; i <= 7 - 1; i++) {
days.push({
"name" : dayNames[i]
})
};
return days
}
var nodes = cluster.nodes(lifeData);
var link = svg.selectAll(".link")
.data(cluster.links(nodes))
.enter().append("path")
.style("fill", "transparent")
.style("stroke-width", "0.5px")
.style("stroke", "#000")
.attr("class", "link")
.attr("d", diagonal);
svg.append('circle')
.attr("r", 438)
.style("fill", "transparent")
.style("stroke-width", "85px")
.style("stroke", "#fff")
var node = svg.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("class", function(d) { return "node " + d.type})
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
var life = svg.selectAll("g.life")
var year = svg.selectAll("g.year")
var season = svg.selectAll("g.season")
var month = svg.selectAll("g.month")
year.append("circle")
.style("fill", "#fff")
.style("stroke", "none")
.attr("r", 20);
node.append("text")
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-0)"; })
.text(function(d) { return d.name; });
life.select("text")
.attr("class", "name")
.attr("dy", "0")
.style("text-anchor", "middle")
.style("font-size", "40px")
.style("font-weight", "bold")
.style("text-transform", "uppercase")
.attr("transform", "rotate(" + (270) + ")translate(0,-85)")
life.append("text")
.attr("class", "age")
.attr("dy", "0")
.style("text-anchor", "middle")
.style("font-size", "185px")
.style("font-weight", "bold")
.style("text-transform", "uppercase")
.attr("transform", "rotate(" + (270) + ")translate(0,40)")
.text(amount - 1);
life.append("text")
.attr("class", "years")
.attr("dy", "0")
.style("text-anchor", "middle")
.style("font-size", "60px")
.style("font-weight", "bold")
.style("text-transform", "uppercase")
.attr("transform", "rotate(" + (270) + ")translate(0,88)")
.text("Years");
year.select("text")
.style("font-size", "30px")
.style("font-weight", "bold")
.attr("text-anchor", "middle");
season.select("text")
.style("font-size", "12px")
.style("font-weight", "bold");
month.select("text")
.style("font-size", "8px")
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
})()
Raw
style.css
body {
font-family: "Sentinel", serif;
}
.life {
}
.life .name{
}
.life .years{
}
.life .age{
}
.year {
}
.season {
}
.month {
}
.link {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment