Skip to content

Instantly share code, notes, and snippets.

@jzgit
Created October 18, 2013 02:13
Show Gist options
  • Save jzgit/7035470 to your computer and use it in GitHub Desktop.
Save jzgit/7035470 to your computer and use it in GitHub Desktop.
Tributary inlet
{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/zCkxgla.png"}
var svg = d3.select("svg");
var colorScale = d3.scale.category20c();
var stroke: '#EED9DD';
var data = [
{x: 0, y: 0, h: 1, w: 7, color: 3},
{x: 0, y: 1, h: 6, w: 1, color: 3},
{x: 1, y: 1, h: 1, w: 5, color: 3},
{x: 1, y: 2, h: 4, w: 1, color: 3},
{x: 2, y: 2, h: 1, w: 3, color: 3},
{x: 2, y: 3, h: 2, w: 1, color: 3},
{x: 3, y: 3, h: 1, w: 1, color: 8},
{x: 4, y: 3, h: 1, w: 1, color: 2},
{x: 3, y: 4, h: 1, w: 2, color: 2},
{x: 5, y: 2, h: 3, w: 1, color: 2},
{x: 2, y: 5, h: 1, w: 4, color: 2},
{x: 6, y: 1, h: 5, w: 1, color: 2},
{x: 1, y: 6, h: 1, w: 6, color: 2}
];
var scale = 39;
var squares = [
{x: 0, y: 0},
{x: 1, y: 0},
{x: 2, y: 0}
];
var g1 = svg.append('g');
var g2 = svg.append('g');
var groups = svg.selectAll('g');
var fabric = d3.scale.ordinal()
.range([3,3,3,3,3,3,8,2,2,2,2,2,2])
var rotation = d3.scale.ordinal()
.range([180, 90]);
g1.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
height: function(d) {
return d.h * scale;
},
width: function(d) {
return d.w * scale;
},
x: function(d) {
return d.x * scale;
},
y: function(d) {
return d.y * scale;
},
stroke: stroke,
fill: function(d, i){
return colorScale(fabric(i));
}
})
.attr("transform", function(d,i) {
var x = 0;
var y = 50;
return "translate(" + [x, y] + ")rotate(" + [0, scale * 3.5 , scale * 3.5] + ")";
});
g2.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
height: function(d) {
return d.h * scale;
},
width: function(d) {
return d.w * scale;
},
x: function(d) {
return d.x * scale;
},
y: function(d) {
return d.y * scale;
},
stroke: '#EED9DD',
fill: function(d, i){
//return colorScale(d.color);
return colorScale(fabric(i));
}
})
.attr("transform", function(d,i) {
var x = scale * 7;
var y = 50;
return "translate(" + [x, y] + ")rotate(" + [0, scale * 3.5 , scale * 3.5] + ")";
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment