Skip to content

Instantly share code, notes, and snippets.

@clydet

clydet/index.html

Created August 28, 2014 15:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save clydet/1738c40f768e18bdd836 to your computer and use it in GitHub Desktop.
Save clydet/1738c40f768e18bdd836 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgit.com/MikeMcl/big.js/master/big.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#plus {
float:left;
}
#minus {
float:right;
}
</style>
</head>
<body>
<div style="width:250px; height:30px;">
<div id="plus">+</div>
<div id="minus">-</div>
</div>
<script id="jsbin-javascript">
var data, h, num_partitions, padding, r, renderPie, toggleSelection, updatePartitions, w;
w = 250;
h = 250;
r = 100;
padding = 10;
num_partitions = 1;
data = null;
updatePartitions = function(delta) {
var index, measure, remove_me;
num_partitions += delta;
if (num_partitions < 1) {
num_partitions = 1;
return;
} else {
measure = 100 / num_partitions;
}
switch (delta) {
case 1:
index = data.length;
console.log('index', index);
data[index] = {
id: num_partitions,
value: measure,
shaded: false
};
break;
case 0:
if (!data) {
data = [
{
id: num_partitions,
value: measure,
shaded: false
}
];
}
break;
case -1:
remove_me = _.find(data, function(entry) {
return !entry.shaded;
});
if (!remove_me) {
remove_me = data[data.length];
}
index = _.indexOf(data, remove_me);
data.splice(index, 1);
console.log("data.length", data.length);
}
_.map(data, function(entry, index) {
entry.value = measure;
return entry.id = index;
});
return renderPie(data);
};
renderPie = function(data) {
var arc, arcs, pie, vis;
$('svg').remove();
vis = d3.select("body").append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + (r + padding) + "," + (r + padding) + ")");
arc = d3.svg.arc().outerRadius(r);
pie = d3.layout.pie().value(function(d) {
return d.value;
});
arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
return arcs.append("svg:path").attr("stroke", "black").attr("stroke-width", "2px").attr("d", arc).attr('data-id', function(d) {
return d.data.id;
}).attr("fill", function(d) {
if (d.data.shaded) {
return 'grey';
} else {
return 'white';
}
}).on('click', toggleSelection);
};
toggleSelection = function() {
var data_entry, id, path;
path = d3.select(this);
id = parseInt(path.attr('data-id'));
data_entry = _.find(data, function(entry) {
return entry.id === id;
});
console.log("data_entry", data_entry);
data_entry.shaded = !data_entry.shaded;
console.log("data_entry", data_entry);
return updatePartitions(0);
};
updatePartitions(0);
$('#plus').click(function() {
return updatePartitions(1);
});
$('#minus').click(function() {
return updatePartitions(-1);
});
</script>
<script id="jsbin-source-css" type="text/css">#plus {
float:left;
}
#minus {
float:right;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">w = 250
h = 250
r = 100
padding = 10
num_partitions = 1
data = null
updatePartitions = (delta) ->
num_partitions += delta
if num_partitions < 1
num_partitions = 1
return
else
measure = 100 / num_partitions
switch delta
when 1
index = data.length
console.log 'index', index
data[index] =
id: num_partitions
value: measure
shaded: false
when 0
data = [{id:num_partitions, value:measure, shaded:false}] unless data
when -1
remove_me = _.find data, (entry) -> not entry.shaded
remove_me = data[data.length] unless remove_me
index = _.indexOf data, remove_me
data.splice index, 1
console.log "data.length", data.length
_.map data, (entry, index) ->
entry.value = measure
entry.id = index
renderPie data
renderPie = (data) ->
$('svg').remove()
vis = d3.select("body")
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + (r + padding) + "," + (r + padding) + ")")
arc = d3.svg.arc()
.outerRadius(r)
pie = d3.layout.pie()
.value((d) -> d.value )
arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice")
arcs.append("svg:path")
.attr("stroke", "black")
.attr("stroke-width", "2px")
.attr("d", arc)
.attr('data-id', (d) -> d.data.id )
.attr("fill", (d) -> if d.data.shaded then 'grey' else 'white')
.on('click', toggleSelection)
toggleSelection = ->
path = d3.select(this)
id = parseInt(path.attr('data-id'))
data_entry = _.find data, (entry) -> entry.id is id
console.log "data_entry", data_entry
data_entry.shaded = not data_entry.shaded
console.log "data_entry", data_entry
updatePartitions 0
updatePartitions 0
$('#plus').click -> updatePartitions 1
$('#minus').click -> updatePartitions -1</script></body>
</html>
Raw
jsbin.wifaq.css
#plus {
float:left;
}
#minus {
float:right;
}
Raw
jsbin.wifaq.js
var data, h, num_partitions, padding, r, renderPie, toggleSelection, updatePartitions, w;
w = 250;
h = 250;
r = 100;
padding = 10;
num_partitions = 1;
data = null;
updatePartitions = function(delta) {
var index, measure, remove_me;
num_partitions += delta;
if (num_partitions < 1) {
num_partitions = 1;
return;
} else {
measure = 100 / num_partitions;
}
switch (delta) {
case 1:
index = data.length;
console.log('index', index);
data[index] = {
id: num_partitions,
value: measure,
shaded: false
};
break;
case 0:
if (!data) {
data = [
{
id: num_partitions,
value: measure,
shaded: false
}
];
}
break;
case -1:
remove_me = _.find(data, function(entry) {
return !entry.shaded;
});
if (!remove_me) {
remove_me = data[data.length];
}
index = _.indexOf(data, remove_me);
data.splice(index, 1);
console.log("data.length", data.length);
}
_.map(data, function(entry, index) {
entry.value = measure;
return entry.id = index;
});
return renderPie(data);
};
renderPie = function(data) {
var arc, arcs, pie, vis;
$('svg').remove();
vis = d3.select("body").append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + (r + padding) + "," + (r + padding) + ")");
arc = d3.svg.arc().outerRadius(r);
pie = d3.layout.pie().value(function(d) {
return d.value;
});
arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
return arcs.append("svg:path").attr("stroke", "black").attr("stroke-width", "2px").attr("d", arc).attr('data-id', function(d) {
return d.data.id;
}).attr("fill", function(d) {
if (d.data.shaded) {
return 'grey';
} else {
return 'white';
}
}).on('click', toggleSelection);
};
toggleSelection = function() {
var data_entry, id, path;
path = d3.select(this);
id = parseInt(path.attr('data-id'));
data_entry = _.find(data, function(entry) {
return entry.id === id;
});
console.log("data_entry", data_entry);
data_entry.shaded = !data_entry.shaded;
console.log("data_entry", data_entry);
return updatePartitions(0);
};
updatePartitions(0);
$('#plus').click(function() {
return updatePartitions(1);
});
$('#minus').click(function() {
return updatePartitions(-1);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment