Skip to content

Instantly share code, notes, and snippets.

@scogle
Created August 26, 2014 23:59
Embed
What would you like to do?
d3 experiment
<!DOCTYPE html>
<html>
<head>
<title>Cowork</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<script type="text/javascript">
$(document).ready(function(){
var endpoint = "http://ibeam.semanticarts.com/timecard/api/timecharges?start=2014-08-01";
$('#slider').slider({
value: 01,
min: 01,
max: 26,
step: 1,
slide: function(event, ui){
var groups = d3.selectAll('g');
}
});
function process(json){
console.log("Initializing", json);
var dates = {};
var arr = [];
_.each(json, function(obj){
var date = obj.StartTime.split('T')[0].split('-')[2];
dates[date] = dates[date] || {};
//var x = a === true ? 2 : 5;
dates[date].tcEntries = dates[date].tcEntries || [];
dates[date].tcEntries.push(obj);
});
//dates = _.uniq(dates);
_.each(dates, function(day){
_.each(day.tcEntries, function(entry){
day[entry.Location] = day[entry.Location] || [];
day[entry.Location].push(entry.Employee);
day[entry.Location] = _.uniq(day[entry.Location]);
});
delete day.tcEntries;
});
console.log(dates);
var d3Data = {};
_.each(dates, function(obj,date){
d3Data[date] = {
'name': date,
'children': []
};
_.each(obj, function(people, place){
d3Data[date].children.push({
'name': place,
'children':[]
});
});
_.each(d3Data[date].children, function(child){
_.each(dates[date][child.name], function(person){
child.children.push({'name':person});
});
});
});
console.log(d3Data);
var width = 960,
height = 700,
radius = Math.min(width, height) / 2,
x = d3.scale.linear().range([0, 2 * Math.PI]),
y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]),
color = d3.scale.category20c();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius * radius])
.value(function(d) { return 1; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
var path = svg.datum(d3Data['01']).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.style("fill-rule", "evenodd")
.each(stash);
var text = svg.selectAll('text').data(partition.nodes);
var textEnter = text.enter().append("text")
.style("fill-opacity", 1)
.style("fill", '#000')
// .attr("text-anchor", function(d) {
// return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
// })
.attr("dy", ".2em")
//.attr("transform", 'translate(++)')
textEnter.append("tspan")
.attr("x", 0)
// .attr('x', function(d) { return d.x; })
// .attr('y', function(d) { return d.y; })
.text(function(d) { return d.name; });
// textEnter.append("tspan")
// //.attr("x", 0)
// .attr("dy", "1em")
// .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });
// Stash the old values for transition.
function stash(d) {
d.x0 = d.x;
d.dx0 = d.dx;
}
// Interpolate the arcs in data space.
function arcTween(a) {
var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
return function(t) {
var b = i(t);
a.x0 = b.x;
a.dx0 = b.dx;
return arc(b);
};
}
d3.select(self.frameElement).style("height", height + "px");
// d3.selectAll("input").on("change", function change() {
// var value = this.value === "count"
// ? function() { return 1; }
// : function(d) { return d.size; };
// path
// .data(partition.value(value).nodes)
// .transition()
// .duration(1500)
// .attrTween("d", arcTween);
// });
}
$.getJSON(endpoint, function(data){
process(data);
});
});
</script>
</head>
<body>
<h1>Cowork</h1>
<div class="slider">
<div id="slider"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment