Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Created Aug 28, 2013
Embed
What would you like to do?
squidz help moving
{"description":"squidz help moving","endpoint":"","display":"div","public":true,"require":[{"name":"parallax","url":"https://raw.github.com/wagerfield/parallax/master/deploy/parallax.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/wcZeFGY.png"}
key value date
Group1 39 04/23/12
Group2 12 04/23/12
Group3 46 04/23/12
Group1 32 04/24/12
Group2 19 04/24/12
Group3 42 04/24/12
Group1 45 04/25/12
Group2 16 04/25/12
Group3 44 04/25/12
Group1 24 04/26/12
Group2 52 04/26/12
Group3 64 04/26/12
//wondering why http://bl.ocks.org/mbostock/3020685 doesn't work for squidz
var display = d3.select("#display");
var scene = display.append("ul").attr("id", "scene");
var sceneLayers = [
scene.append("li").attr("data-depth" , 0.00).classed("layer", true).append("svg"),
scene.append("li").attr("data-depth" , 0.4).classed("layer", true).append("svg"),
scene.append("li").attr("data-depth" , 0.8).classed("layer", true).append("svg"),
scene.append("li").attr("data-depth" , 1).classed("layer", true).append("svg")]
var format = d3.time.format("%m/%d/%y");
var margin = {top: 20, right: 26, bottom: 30, left: 7},
width = 647 - margin.left - margin.right,
height = 368 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var z = d3.scale.category20c();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.days);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var stack = d3.layout.stack()
.offset("zero")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
sceneLayers[0]
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var origData = tributary.data;
var data = origData.map(function(d) {
var thisObj = {};
thisObj.key = d.key;
thisObj.date = format.parse(d.date);
thisObj.value = +d.value;
return thisObj;
});
var layers = stack(nest.entries(data));
//console.log(layers)
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
for (var i = 0; i < layers.length; i++) {
console.log(layers[i])
sceneLayers[layers.length - i]
.append("path")
.attr("class", "layerG")
.attr("d", function(d) { return area(layers[i].values); })
.style("fill", z(i));
}
sceneLayers[0].append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
sceneLayers[0].append("g")
.attr("class", "y axis")
.call(yAxis);
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);//make parallax center at middle of scene instead of screen width/height?
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.