Skip to content

Instantly share code, notes, and snippets.

@korenmiklos

korenmiklos/button.css

Forked from lgrammel/button.css
Last active December 31, 2015 22:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save korenmiklos/8052011 to your computer and use it in GitHub Desktop.
Save korenmiklos/8052011 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
button.css
button {
font: 14px Helvetica Neue;
background-color: #222;
background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
color: #fff;
text-rendering: optimizeLegibility;
text-shadow: 0 -1px 1px #222;
padding: 6px 10px 6px 10px;
border: 0;
border-radius: 0;
border-bottom: 1px solid #222;
margin: 0;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
}
button.first {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
button.last {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
button.active {
background-color: rgb(65,102,133);
}
button:hover {
background-color: steelblue;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Streamgraph</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js?2.8.0"></script>
<link type="text/css" rel="stylesheet" href="button.css"/>
<script type="text/javascript" src="stream_layers.js"></script>
<script type="text/javascript" src="stream-chart.js"></script>
</head>
<body>
<div id="chart">
<p>
</div>
<script>
var n = 8, // number of layers
m = 54; // number of samples per layer
var colors = d3.range(n).map(function() { return d3.interpolateRgb("#aad", "#556")(Math.random()); });
var streamgraph = streamgraphChart()
.margin({top: 10, right: 10, bottom: 10, left: 10})
.color(function(d, i) { return colors[i]; });
d3.text("weekly_hours.csv", function(text) {
var data = d3.csv.parseRows(text).map(function(row) {
return row.map(function(value, idx) {
return { x: idx, y: +value };
});
});
console.log(data);
d3.select("#chart")
.datum(data)
.call(streamgraph);
});
</script>
</body>
</html>
Raw
stream-chart.js
function streamgraphChart() {
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 960,
height = 500,
transitionDuration = 1000,
color = function() { return d3.interpolateRgb("#aad", "#556")(Math.random()); };
var streamgraph = d3.layout.stack().offset("wiggle");
function chart(selection) {
selection.each(function(data) {
// Compute the streamgraph.
data = streamgraph(data);
var mx = data[0].length - 1, // assumes that all layers have same # of samples & that there is at least one layer
my = d3.max(data, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
});
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);
// Otherwise, create the skeletal chart.
var gEnter = svg.enter().append("svg").append("g");
// Update the outer dimensions.
svg .attr("width", width)
.attr("height", height);
// Update the inner dimensions.
var g = svg.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Update the streamgraph
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom;
var area = d3.svg.area()
.x(function(d) { return d.x * availableWidth / mx; })
.y0(function(d) { return availableHeight - d.y0 * availableHeight / my; })
.y1(function(d) { return availableHeight - (d.y + d.y0) * availableHeight / my; });
var path = g.selectAll("path").data(data);
path.enter().append("path");
path.exit().remove();
path.style("fill", color).transition().duration(transitionDuration).attr("d", area);
});
}
chart.color = function(_) {
if (!arguments.length) return color;
color = _;
return chart;
};
chart.transitionDuration = function(_) {
if (!arguments.length) return transitionDuration;
transitionDuration = _;
return chart;
};
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
return chart;
}
Raw
stream_layers.js
/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
if (arguments.length < 3) o = 0;
function bump(a) {
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < m; i++) {
var w = (i / m - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
return d3.range(n).map(function() {
var a = [], i;
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
for (i = 0; i < 5; i++) bump(a);
return a.map(stream_index);
});
}
function stream_index(d, i) {
return {x: i, y: Math.max(0, d)};
}
Raw
weekly_hours.csv
0 0 0 0 0 0 0 0
4.5 0.75 0 0 0 0 0 0
4.5 2 0 0 1.5 0 0 0
1 0 0 0 0 0 0 0
5.5 0 0 0 0 0 0 0
8.5 0 0 0 1 0 0 0
2 0 0 0.5 1 0 0.5 0
5.833333 7 0 0.5 1.833333 0 0 0
0.5 3.333333 0 0 3.5 0 0 0
0.5 2 0 0 0 0 0 0
3.5 2.5 0 4 1 0 1 0
2.833333 1 0 0 0 0 0 0
2 6 0 0 2 0 2.5 0
1 8.2 0 1 0 0 0 0
0 6 0 0 0 0 0 0
2 2 0 0 0 4 0 0
2.25 0.45 0 3 0 0 1 0
1 3.5 1 1 3.5 1 0 0
0 4 0 4 1 0 0 0
0 12 8.5 0 0 0 0.5 0
0 4 15.5 0 0 2 0.5 0
0 0.5 30.33333 3.833333 0 1 0 0
0.5 1 2 5.5 1 0.5 0 0
1 1 0 0 0 2.5 2.5 0
2 0 0 0 2 0 1.5 0
1 1 0 0 0 2 5 0
0 0 0 1 0 0.5 2 0
0 1 0 2 3 1 0 0
3.5 4.5 0 0.3333333 1 1 2 3.333333
1 1.5 0 0.5 0 13.5 2.5 3
0.2 0 0 1 5 4.5 0 18.7
1.5 0 0 0 0 1 0 1.5
1 15.33333 0 0 0 0 0 0
1 5 0 0 0 0 0 0
1 0 4.5 0 0.5 0 0 0
1 0 0 0 0 0 1 0
0 0 1 0 0 3 0 0
0 0 0 0 0 0 0 0
0 1 8.5 0 1 0 0.5 1
0 0 1.5 0 0 0 3 0
0 6 0 0 0.5 1 3.5 1
0.5 2.5 0 0 0.5 2.5 0 2
0 1.5 3.5 0 5.5 3 10.5 6
0 8 0 1 0.5 0 0 2.5
0 0 0 0 0 1 5.5 0
0 0.5 0 0 0 1 0 0.5
0 2 1.5 1 5 0 11 0.5
0 0 0 0 0 1 12.5 0
0 0.8333333 1 2 1.5 17.5 7 0
0 2.333333 0 7 0 5 0 0
0 0.3333333 1 1 1 3 0 6.833333
0 4.5 0 0 0 8 0 2.5
0 6.333333 0 1 4 5.833333 0 0
0 7.833333 0 4.5 1 3.5 0.5 0.5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment