Skip to content

Instantly share code, notes, and snippets.

@thepuzzlemaster

thepuzzlemaster/_.md

Last active August 29, 2015 14:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thepuzzlemaster/bb81d5b57d5ebdc3877b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thepuzzlemaster/bb81d5b57d5ebdc3877b to your computer and use it in GitHub Desktop.
Download ZIP
Tier 8
Raw
_.md
Raw
config.json
{"description":"Tier 8","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/S8s8dCn.png","inline-console":false}
Raw
data.json
[
{
"id": 534678,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
89,
93,
7,
172
],
[
94,
149,
28,
213
],
[
85,
143,
23,
203
],
[
110,
150,
33,
224
],
[
131,
104,
25,
207
],
[
78,
135,
18,
193
],
[
167,
107,
9,
188
]
]
},
{
"id": 534679,
"route": [
[
43,
107,
9,
188
],
[
128,
100,
23,
203
],
[
120,
146,
35,
228
],
[
167,
107,
9,
188
]
]
},
{
"id": 534680,
"route": [
[
43,
107,
9,
188
],
[
78,
104,
7,
172
],
[
105,
120,
22,
201
],
[
128,
100,
23,
203
],
[
167,
107,
9,
188
]
]
},
{
"id": 534681,
"route": [
[
43,
107,
9,
188
],
[
99,
150,
30,
217
],
[
89,
93,
7,
172
],
[
110,
89,
13,
183
],
[
134,
130,
35,
227
],
[
167,
107,
9,
188
]
]
},
{
"id": 534682,
"route": [
[
43,
107,
9,
188
],
[
74,
125,
13,
183
],
[
105,
120,
22,
201
],
[
74,
120,
11,
180
],
[
78,
104,
7,
172
],
[
115,
90,
15,
187
],
[
167,
107,
9,
188
]
]
},
{
"id": 534683,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
75,
109,
8,
173
],
[
78,
104,
7,
172
],
[
167,
107,
9,
188
]
]
},
{
"id": 534684,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
134,
130,
35,
227
],
[
124,
96,
20,
197
],
[
167,
107,
9,
188
]
]
},
{
"id": 534685,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
131,
104,
25,
207
],
[
74,
114,
9,
176
],
[
135,
114,
30,
217
],
[
167,
107,
9,
188
]
]
},
{
"id": 534686,
"route": [
[
43,
107,
9,
188
],
[
134,
109,
27,
213
],
[
78,
104,
7,
172
],
[
105,
120,
22,
201
],
[
99,
150,
30,
217
],
[
136,
120,
32,
221
],
[
124,
96,
20,
197
],
[
167,
107,
9,
188
]
]
},
{
"id": 534687,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
94,
90,
8,
173
],
[
74,
120,
11,
180
],
[
75,
109,
8,
173
],
[
128,
139,
36,
229
],
[
167,
107,
9,
188
]
]
},
{
"id": 534688,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
134,
109,
27,
213
],
[
134,
130,
35,
227
],
[
115,
149,
35,
227
],
[
167,
107,
9,
188
]
]
},
{
"id": 534689,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
89,
146,
25,
207
],
[
85,
96,
7,
171
],
[
85,
143,
23,
203
],
[
135,
125,
33,
224
],
[
136,
120,
32,
221
],
[
167,
107,
9,
188
]
]
},
{
"id": 534690,
"route": [
[
43,
107,
9,
188
],
[
105,
151,
32,
221
],
[
105,
120,
22,
201
],
[
85,
96,
7,
171
],
[
99,
150,
30,
217
],
[
167,
107,
9,
188
]
]
},
{
"id": 534691,
"route": [
[
43,
107,
9,
188
],
[
104,
89,
11,
179
],
[
105,
120,
22,
201
],
[
124,
143,
36,
229
],
[
78,
135,
18,
193
],
[
167,
107,
9,
188
]
]
},
{
"id": 534692,
"route": [
[
43,
107,
9,
188
],
[
74,
125,
13,
183
],
[
105,
120,
22,
201
],
[
85,
143,
23,
203
],
[
167,
107,
9,
188
]
]
},
{
"id": 534693,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
136,
120,
32,
221
],
[
105,
151,
32,
221
],
[
134,
109,
27,
213
],
[
124,
96,
20,
197
],
[
75,
130,
15,
187
],
[
115,
90,
15,
187
],
[
167,
107,
9,
188
]
]
},
{
"id": 534694,
"route": [
[
43,
107,
9,
188
],
[
135,
125,
33,
224
],
[
74,
114,
9,
176
],
[
110,
150,
33,
224
],
[
105,
120,
22,
201
],
[
128,
100,
23,
203
],
[
124,
96,
20,
197
],
[
94,
149,
28,
213
],
[
167,
107,
9,
188
]
]
},
{
"id": 534695,
"route": [
[
43,
107,
9,
188
],
[
74,
120,
11,
180
],
[
128,
139,
36,
229
],
[
134,
130,
35,
227
],
[
105,
120,
22,
201
],
[
94,
149,
28,
213
],
[
99,
89,
9,
176
],
[
167,
107,
9,
188
]
]
},
{
"id": 534696,
"route": [
[
43,
107,
9,
188
],
[
136,
120,
32,
221
],
[
74,
114,
9,
176
],
[
105,
120,
22,
201
],
[
85,
96,
7,
171
],
[
78,
104,
7,
172
],
[
124,
143,
36,
229
],
[
167,
107,
9,
188
]
]
},
{
"id": 534697,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
128,
139,
36,
229
],
[
131,
104,
25,
207
],
[
85,
96,
7,
171
],
[
167,
107,
9,
188
]
]
},
{
"id": 534698,
"route": [
[
43,
107,
9,
188
],
[
104,
89,
11,
179
],
[
120,
146,
35,
228
],
[
124,
96,
20,
197
],
[
105,
120,
22,
201
],
[
74,
114,
9,
176
],
[
167,
107,
9,
188
]
]
},
{
"id": 534699,
"route": [
[
43,
107,
9,
188
],
[
74,
125,
13,
183
],
[
105,
120,
22,
201
],
[
75,
130,
15,
187
],
[
81,
100,
7,
171
],
[
75,
109,
8,
173
],
[
167,
107,
9,
188
]
]
},
{
"id": 534700,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
124,
96,
20,
197
],
[
128,
139,
36,
229
],
[
120,
93,
18,
193
],
[
94,
90,
8,
173
],
[
167,
107,
9,
188
]
]
},
{
"id": 534701,
"route": [
[
43,
107,
9,
188
],
[
105,
120,
22,
201
],
[
115,
90,
15,
187
],
[
99,
150,
30,
217
],
[
78,
104,
7,
172
],
[
124,
96,
20,
197
],
[
94,
149,
28,
213
],
[
89,
146,
25,
207
],
[
167,
107,
9,
188
]
]
},
{
"id": 534702,
"route": [
[
43,
107,
9,
188
],
[
120,
146,
35,
228
],
[
105,
120,
22,
201
],
[
110,
89,
13,
183
],
[
167,
107,
9,
188
]
]
}
]
Raw
inlet.js
console.clear();
var data = tributary.data;
//console.log(data)
data = _.map(data, function(item, i) {
//item.route.splice(0, 1);
//item.route.splice(item.route.length - 1, 1);
return item;
});
var newData = [];
_.forEach(data, function(item) {
_.forEach(item.route, function(route) {
var data = {
name: item.id,
route: route
};
newData.push(data);
});
})
_.forEach(data, function(item) {
// console.log(item.route.length)
})
var sumData = [];
_.forEach(newData, function(item) {
var sum = item.route[0] + item.route[1] + item.route[2] + item.route[3];
sumData.push({
name: item.name,
sum: sum
});
});
console.log(_.groupBy(sumData, 'sum'))
var routeArray = _.groupBy(newData, 'route');
console.log(routeArray)
console.log(data)
var fourArray = [[], [], [], []];
_.forEach(newData, function(item, i) {
if (fourArray[0].length > 2000) {
return;
}
var sum = item.route[0] + item.route[1] + item.route[2] + item.route[3];
fourArray[0].push({
x: i,
y: item.route[0] / sum,
sum: sum
});
fourArray[1].push({
x: i,
y: item.route[1] / sum,
sum: sum
});
fourArray[2].push({
x: i,
y: item.route[2] / sum,
sum: sum
});
fourArray[3].push({
x: i,
y: item.route[3] / sum,
name: item.name,
sum: sum
});
});
//console.log(fourArray, 'fourarray');
var svg = d3.select('svg').append('g')
var n = 4, // number of layers
m = fourArray[0].length, // number of samples per layer
stack = d3.layout.stack();
var layers = stack(fourArray);
var yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
console.log(layers);
var margin = {top: 40, right: 10, bottom: 20, left: 10},
width = 1400 - margin.left - margin.right,
height = 442 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([0, width], .07);
var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);
var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(0)
.tickValues('')
.tickPadding(6)
.orient("bottom");
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) {
return color(i);
});
var rect = layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", height)
.attr("width", x.rangeBand())
.attr("height", 0);
var currentName = '';
var label = layer.selectAll('text')
.data(function(d) { return d; })
.enter()
.append('rect')
.attr({
x: function(d) {
return x(d.x) - 2;
},
y: 0,
height: 1000,
width: function(d) {
if (d.name !== currentName) {
currentName = d.name;
return 2;
}
return 0;
},
fill: '#000'
})
var currentName2 = '';
var label = layer.selectAll('text')
.data(function(d) { return d; })
.enter()
.append('text')
.attr({
x: function(d) {
return x(d.x) - 0;
},
y: height + 10,
transform: function(d) {
// return 'rotate(90, ' + x(d.x) + ',' + height + ')';
}
})
.text(function(d) {
if (d.name !== currentName2 && d.name) {
currentName2 = d.name;
return (d.name + '').replace('53', '');
};
})
rect.transition()
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
Raw
style.css
text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.label {
fill: #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment