public
Last active

inlets for tributary

  • Download Gist
arctween.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
var data = [5, 25, 40, 20, 10];
 
var sw = parseInt(svg.style("width"), 10);
var sh = parseInt(svg.style("height"), 10);
 
var r = Math.min(sw, sh)/2;
var color = d3.scale.category20();
var arc = d3.svg.arc().outerRadius(r);
var donut = d3.layout.pie();
 
tributary.init = function(g) {
g.data([data]);
var pie_arcs = g.selectAll("g.pie_arc")
.data(donut)
.enter().append("g")
.attr("class", "pie_arc")
.attr("transform", "translate(" + (r + 2*r) + "," + r + ")");
 
var pie_paths = pie_arcs.append("path")
.attr("fill", function(d, i) { return color(i); });
 
var donut_arcs = g.selectAll("g.donut_arc")
.data(donut)
.enter().append("g")
.attr("class", "donut_arc")
.attr("transform", "translate(" + r + "," + r + ")");
 
var donut_paths = donut_arcs.append("path")
.attr("fill", function(d, i) { return color(i); });
 
};
 
tributary.run = function(t, g) {
var pie_paths = g.selectAll("g.pie_arc")
.select("path");
var donut_paths = g.selectAll("g.donut_arc")
.select("path");
//This is the same as tweenPie
pie_paths.attr("d", function(d,i) {
var interpol = d3.interpolate({startAngle: 0, endAngle: 0}, d);
return arc(interpol(t));
});
//This is the same as tweenDonut
donut_paths.attr("d", function(d,i) {
//d.innerRadius = r * 0.6;
d.innerRadius = 0;
var interpol = d3.interpolate({innerRadius: r*0.6}, d);
return arc(interpol(t));
});
 
};
 
/*
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) {
return arc(i(t));
};
}
function tweenDonut(b) {
b.innerRadius = r * .6;
var i = d3.interpolate({innerRadius: 0}, b);
return function(t) {
return arc(i(t));
};
}
*/
color.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
 
 
//Try changing all these parameters
//Layout properties
var colors = [
"#658851"
,"#D40067"
, "#4DA9DF"
];
var color = colors[0];
 
//var hsl_color = d3.rgb(colors[0]).hsl();
//console.log(hsl_color)
 
var hex = color.slice(1, color.length);
var hexs = [hex.slice(0, 2), hex.slice(2, 4) , hex.slice(4, 6)];
var rgbs = _.map(hexs, function(hex) {
return parseInt(hex, 16);
});
//from this article http://blog.sarathonline.com/2009/02/javascript-convert-strings-to-binary.html
function intToBin(d){
var j;
var arr = [];
for (j = 0; j < 8; j++) {
arr.push(d%2);
d = Math.floor(d/2);
}
//reverse all bits again.
return arr.reverse().join("");
}
var bins = _.map(rgbs, function(rgb) {
return intToBin(rgb);
});
 
//from @mrejFox http://enjalot.com/tributary/2632354/sinwaves.js
var binarrs = _.map(bins, function(bin) {
var i;
var data = [];
bin = String(bin);
//for (var i=0; i < bin.length; i++) { data.push({text: bin.slice(i,i+1)}) };
for (i=0; i < bin.length; i++) { data.push(parseInt(bin.slice(i,i+1), 10)); }
return data;
});
 
var sw = parseInt(d3.select("svg").style("width"), 10);
var sh = parseInt(d3.select("svg").style("height"), 10);
 
var svg = d3.select("svg")
.append("svg:g");
 
svg.append("rect")
.attr("width", sw)
.attr("height", sh)
.attr("fill", color)
.attr("x", 0)
.attr("y", 0);
 
function make_text(text, clazz, y) {
var text_group = svg.append("g")
.classed(clazz, true)
var txt = text_group.append("text")
.style("font-size", 30);
txt.selectAll("tspan")
.data(text)
.enter().append("tspan")
.text(function(d,i) {
return d;
})
.attr("dx", 33);
//center the text
var offset = -37;
var bbox = txt.node().getBBox();
//txt.attr("x", -bbox.width/2);
text_group
.attr("transform", "translate(" + [-bbox.width/2 + sw/2 + offset, y] + ")");
return txt;
}
 
function make_dots(binary, clazz, y) {
var r = 30;
var spacer = r + 10;
var bw = 8 * spacer + 50;
var dots_group = svg.append("g")
var three_dots = dots_group.append("g")
.selectAll("g." + clazz)
.data(binary)
.enter().append("g")
.classed(clazz, true)
.attr("transform", function(d,i) {
return "translate(" + [i*bw, 0] + ")";
});
 
 
var dots = three_dots.selectAll("circle")
//.data(function(d, i) { return {"digit":d, "i": i}; })
.data(function(d, i) { return d; })
.enter()
.append("circle")
.attr("cx", function(d,i) {
return i * spacer;
})
.attr("r", function(d,i) {
return 10 + 15*d;
})
.attr("fill", function(d,i) {
if(d) {
return "#ffffff";
} else {
return "#000000";
}
})
.attr("fill-opacity", 0.5)
.attr("stroke", "#000000")
;
var offset = 20;
var bbw = dots_group.node().getBBox().width;
dots_group.attr("transform", function(d,i) {
return "translate(" + [-bbw/2 + sw/2 + offset, y] + ")";
});
 
 
return dots;
}
 
 
function make_boxes(binary, clazz, y) {
var rw = 30;
var rh = rw;
var bw = 8 * rw + 95;
var boxes_group = svg.append("g");
var three_boxes = boxes_group.append("g")
.selectAll("g." + clazz)
.data(binary)
.enter().append("g")
.classed(clazz, true)
.attr("transform", function(d,i) {
return "translate(" + [i*bw, 0] + ")";
});
 
 
var boxes = three_boxes.selectAll("rect")
//.data(function(d, i) { return {"digit":d, "i": i}; })
.data(function(d, i) { return d; })
.enter()
.append("rect")
.attr("x", function(d,i) {
return i * 35;
})
.attr("width", rw)
.attr("height", rh)
.attr("fill", function(d,i) {
if(d) {
return "#ffffff";
} else {
return "#000000";
}
})
.attr("fill-opacity", 0.5)
.attr("stroke", "#000000")
;
var bbw = boxes_group.node().getBBox().width
boxes_group.attr("transform", function(d,i) {
return "translate(" + [-bbw/2 + sw/2, y] + ")";
});
 
 
return boxes;
}
 
make_text(hexs, "hex", 50);
make_text(rgbs, "rgb", 100);
make_text(bins, "bins", 150);
make_dots(binarrs, "binarys", 200);
make_boxes(binarrs, "boxes", 250);
 
make_boxes(binarrs, "boxes2", 300);
make_dots(binarrs, "binarys2", 380);
 
 
 
 
flow.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
var n = 5; //number of rings
var radius = 123; //radius interval
var deg = 360; //angle (in degrees) we will split
var width = 125; //width of each box
//, t = 1196 //"time'
var a = 7.9885;
var ntheta = 3.4843;
var speed_factor = 0.56425;
var tfactor = 223;
var opacity = 0.63202;
var stroke_opacity = 0.2;
var stroke_width = 7;
//, fill_color = "#000000"
var stroke_colors = ["#FFFFFF", "#fff"];
var corners = 0;
var size_scale = 121;
var rfactor = 45;
 
 
tributary.duration = 1500;
tributary.nclones = 2;
tributary.clone_opacity = 0.2;
 
var colors = [
'#D40067'
, '#4DA9DF'
, '#00ff00'
, '#ff0000'
];
var k, color_scale;
//interpolate over multiple colors
 
 
var sw = tributary.sw;
var sh = tributary.sh;
 
var rings = [ ];
 
var i;
for (i in d3.range(n))
{
var speed = i * speed_factor;
rings.push({
radius: radius * i,
width: width,
speed: speed,
phase: i
});
}
 
tributary.init = function(g) {
g = g.append("svg:g")
.attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");
 
var ring = g.selectAll("g.ring")
.data(rings)
.enter().append("svg:g")
.attr("class", "ring")
.each(ringEnter);
 
};
 
tributary.run = function(t, g) {
var ffts = getFreq();
freqs = _.map(ffts, function(fft, i) {
return fft/255;
});
/*
var freqs = [
ffts[10], ffts[20], ffts[30],ffts[40],
ffts[100], ffts[200], ffts[300],ffts[400],
ffts[500], ffts[600], ffts[700],ffts[800],
ffts[150], ffts[250], ffts[350],ffts[450]
]
*/
/*freqs = _.map(tributary.pads, function(pad) {
return pad.get();
});
*/
var freq = ffts[tributary.findex]/255;
//t = freqs[0];
var rotate = function(d,i) {
var rf = 0;
if(i < n) {
rf = d.speed * freqs[i];
} else {
rf = d.speed;
}
return "rotate(" + (a * rf * t * tfactor) + ")";
};
var rotate_translate = function(d,i) {
var rf = 0;
if(i < n) {
rf = d.speed * freqs[i];
} else {
rf = d.speed;
}
var rad = d.radius + rfactor * freqs[9];
return "rotate(" + (a * rf * t * tfactor) + ")translate(" + [0, 0] +")";
};
 
var color_scale = function(d, i) {
var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2);
//var k = deg / theta;
var num_interps = colors.length -1;
var ord = d3.scale.linear()
.domain([0, theta])
.range([0, num_interps]);
var section = parseInt(ord(i),10);
//console.log("section", section)
var section_size = theta / num_interps;
//get the two colors we want to interpolate between
var col_range = [colors[section], colors[section+1]];
var col_scale = d3.scale.linear()
.domain([section * section_size, (section+1) * section_size])
//.interpolate(d3.interpolateRgb)
.interpolate(d3.interpolateHsl)
.range(col_range);
return col_scale(i);
};
 
 
var rings = g.selectAll("g.ring")
.attr("transform", rotate_translate)
.selectAll("rect")
.attr("transform", rotate)
//.attr("fill", fill_color)
.attr("fill-opacity", opacity)
.attr("stroke", function(d,i) {
return stroke_colors[i % 2];
})
.attr("stroke-opacity", stroke_opacity)
.attr("stroke-width", stroke_width)
.attr("rx", function(d,i) {
return freqs[8] * corners;
})
.attr("ry", function(d,i) {
return freqs[7] * corners;
})
.attr("fill", color_scale)
.attr("width", function(d,i) {
return d.width + freqs[1] * size_scale;
})
.attr("height", function(d,i) {
return d.width + freqs[1] * size_scale;
});
}
 
function ringEnter(d, i) {
//split up the circle into squares
var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
k = deg / theta;
 
 
d3.select(this).selectAll("g.square")
.data(d3.range(theta).map(function() { return d; }))
.enter().append("svg:g")
.attr("class", "square")
.attr("transform", function(d, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
.append("svg:rect")
.attr("x", -d.width / 2)
.attr("y", -d.width / 2)
.attr("width", d.width)
.attr("height", d.width);
}
geyser.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
var n = 5 //number of rings
, radius = 123 //radius interval
, deg = 360 //angle (in degrees) we will split
, width = 125 //width of each box
//, t = 1196 //"time'
, a = 7.9885
, ntheta = 3.4843
, speed_factor = 0.05454
, tfactor = 165
, opacity = 0.63202
, stroke_opacity = 0.2
, stroke_width = 7
//, fill_color = "#000000"
, stroke_colors = ["#ffffff", "#fff"]
, corners = -310
, size_scale = 59
, rfactor = 20;
 
 
tributary.duration = 1500;
tributary.nclones = 2;
tributary.clone_opacity = 0.2;
 
var colors = [
'#D40067'
, '#4DA9DF'
, '#00ff00'
, '#ff0000'
];
var k, color_scale;
//interpolate over multiple colors
 
 
var sw = tributary.sw;
var sh = tributary.sh;
 
var rings = [ ];
 
var i;
for (i in d3.range(n))
{
var speed = i * speed_factor;
rings.push({
radius: radius*i,
width: width,
speed: speed,
phase: i
});
}
 
tributary.init = function(g) {
g = g.append("svg:g")
.attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");
 
var ring = g.selectAll("g.ring")
.data(rings)
.enter().append("svg:g")
.attr("class", "ring")
.each(ringEnter);
 
};
 
tributary.run = function(t, g) {
var ffts = getFreq();
freqs = ffts;
/*
var freqs = [
ffts[10], ffts[20], ffts[30],ffts[40],
ffts[100], ffts[200], ffts[300],ffts[400],
ffts[500], ffts[600], ffts[700],ffts[800],
ffts[150], ffts[250], ffts[350],ffts[450]
]
*/
/*freqs = _.map(tributary.pads, function(pad) {
return pad.get();
});
*/
var freq = ffts[tributary.findex]/255;
//t = freqs[0];
var rotate = function(d,i) {
var rf = 0;
if(i < n) {
rf = d.speed * freqs[i];
} else {
rf = d.speed;
}
return "rotate(" + (a * rf * t * tfactor) + ")";
};
var rotate_translate = function(d,i) {
var rf = 0;
if(i < n) {
rf = d.speed * freqs[i]
} else {
rf = d.speed
}
var rad = d.radius + rfactor * freqs[9]
console.log(d, a, rf, t, tfactor, rad)
return "rotate(" + (a * rf * t * tfactor) + ")translate(" + rad +")";
};
 
var color_scale = function(d, i) {
var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2);
//var k = deg / theta;
var num_interps = colors.length -1
var ord = d3.scale.linear()
.domain([0, theta])
.range([0, num_interps])
var section = parseInt(ord(i))
//console.log("section", section)
var section_size = theta / num_interps
//get the two colors we want to interpolate between
var col_range = [colors[section], colors[section+1]]
var col_scale = d3.scale.linear()
.domain([section * section_size, (section+1) * section_size])
//.interpolate(d3.interpolateRgb)
.interpolate(d3.interpolateHsl)
.range(col_range)
return col_scale(i)
}
 
 
var rings = g.selectAll("g.ring")
.attr("transform", rotate_translate)
.selectAll("rect")
.attr("transform", rotate)
//.attr("fill", fill_color)
.attr("fill-opacity", opacity)
.attr("stroke", function(d,i) {
return stroke_colors[i % 2];
})
.attr("stroke-opacity", stroke_opacity)
.attr("stroke-width", stroke_width)
.attr("rx", function(d,i) {
return freqs[8] * corners;
})
.attr("ry", function(d,i) {
return freqs[7] * corners;
})
.attr("fill", color_scale)
.attr("width", function(d,i) {
return d.width + freqs[1] * size_scale
})
.attr("height", function(d,i) {
return d.width + freqs[1] * size_scale
})
}
 
function ringEnter(d, i) {
//split up the circle into squares
var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
k = deg / theta;
 
 
d3.select(this).selectAll("g.square")
.data(d3.range(theta).map(function() { return d; }))
.enter().append("svg:g")
.attr("class", "square")
.attr("transform", function(d, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
.append("svg:rect")
.attr("x", -d.width / 2)
.attr("y", -d.width / 2)
.attr("width", d.width)
.attr("height", d.width);
}
icon.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
var n = 13 //number of rings
, radius = 70 //radius interval
, deg = 360 //angle (in degrees) we will split
, width = 62 //width of each box
, t = 13 //"time'
, a = 19.72
, ntheta = 2
, speed_factor = 0.0175
 
, opacity = .5
, stroke_opacity = 0.504
, stroke_width = 16.08
, fill_color = "#000000"
, stroke_colors = ["#ffffff", "#000000"]
, corners = 21
 
 
 
 
var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))
 
 
var rings = [ ];
 
for (i in d3.range(n))
{
var speed = i * speed_factor
rings.push({
radius: radius*i,
width: width,
speed: speed,
phase: i
})
}
 
var svg = d3.select("svg")
 
svg.append("rect")
.attr("width", sw)
.attr("height", sh)
.attr("fill", "#888888")
 
 
svg = svg.append("svg:g")
.attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");
 
var ring = svg.selectAll("g")
.data(rings)
.enter().append("svg:g")
.attr("class", "ring")
.each(ringEnter);
 
 
var updateRing = function(elapsed) {
rotate = function(d,i) {
return "rotate(" + (a * d.speed * elapsed) + ")";
};
 
var rings = svg.selectAll("g.ring")
.attr("transform", rotate)
var cells = rings
.selectAll("g.square")
var rects = cells
.select("rect")
.attr("transform", rotate)
.attr("fill", fill_color)
.attr("fill-opacity", opacity)
.attr("stroke", function(d,i) {
return stroke_colors[i % 2];
})
.attr("stroke-opacity", stroke_opacity)
.attr("stroke-width", stroke_width)
.attr("rx", corners)
.attr("ry", corners)
 
 
 
}
function ringEnter(d, i) {
//split up the circle into squares
var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
k = deg / theta;
var cells = d3.select(this).selectAll("g")
.data(d3.range(theta).map(function() { return d; }))
.enter().append("svg:g")
.attr("class", "square")
.attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
var rects = cells
.append("svg:rect")
.attr("x", -d.width / 2)
.attr("y", -d.width / 2)
.attr("width", d.width)
.attr("height", d.width);
var icons = cells
.append("svg:use")
.attr("xlink:href", "#manicon")
.attr("x", -d.width / 2)
.attr("y", -d.width / 2)
.attr("width", d.width)
.attr("height", d.width);
}
 
 
 
//Append the man and the woman icons (from thenounproject.com)
var defs = svg.append("defs")
var man = defs.append("g")
.attr("id", "man")
man.append("circle")
.attr("cx", 18.118)
.attr("cy", 8.159)
.attr("r", 8.159)
man.append("path")
.attr("d", "M8.472,95.426c0,2.524,2.05,4.574,4.574,4.574c2.529,0,4.576-2.05,4.576-4.574l0.004-38.374h2.037L19.65,95.426\nc0,2.524,2.048,4.574,4.574,4.574s4.573-2.05,4.573-4.574l0.02-66.158h2.006v24.38c0,4.905,6.398,4.905,6.384,0v-24.9\nc0-5.418-3.184-10.728-9.523-10.728L9.396,18.012C3.619,18.012,0,22.722,0,28.599v25.05c0,4.869,6.433,4.869,6.433,0v-24.38h2.048\nL8.472,95.426z")
 
updateRing(t)
 
/*
<g id="woman">
<circle cx="22.925" cy="8.164" r="8.164"/>
<path d="M29.775,18.047c5.697,0,8.008,4.695,8.871,7.283l6.999,23.008c1.396,4.949-4.899,6.998-6.4,2.175l-6.298-21.125h-1.833
L42.03,66.966H31.973v29.296c0,4.996-7.514,4.971-7.514,0V66.774h-3.063l0.005,29.447c0,5.037-7.545,5.037-7.545,0l-0.002-29.255
H3.765l10.831-37.578h-1.694l-6.299,21.2c-1.5,4.621-7.85,2.724-6.396-2.228L7.2,25.33c0.749-2.625,3.045-7.283,8.795-7.283H29.775z
"/>
</g>
*/
planets.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
var planets = [
{
name: "mercury"
,size: 4900
,dist_avg: 36
,dist_min: 28.6
,dist_max: 43.4
,color: "#909090"
}
,{
name: "venus"
,size: 12100
,dist_avg: 67
,dist_min: 67
,dist_max: 68
,color: "#C05B1C"
}
,{
name: "earth"
,size: 12800
,dist_avg: 93
,dist_min: 91
,dist_max: 94.5
,color: "#5B89B4"
}
,{
name: "mars"
,size: 6800
,dist_avg: 142
,dist_min: 128
,dist_max: 155
,color: "#C8552A"
}
,{
name: "jupiter"
,size: 143000
,dist_avg: 484
,dist_min: 460
,dist_max: 508
,color: "#8D9482"
}
,{
name: "saturn"
,size: 125000
,dist_avg: 891
,dist_min: 840
,dist_max: 938
,color: "#DACD5F"
}
,{
name: "uranus"
,size: 51100
,dist_avg: 1790
,dist_min: 1700
,dist_max: 1870
,color: "#7C929C"
}
,{
name: "neptune"
,size: 49500
,dist_avg: 2800
,dist_min: 2770
,dist_max: 2820
,color: "#5285D7"
}
];
 
//get the width and height of the screen so we can draw inside of it
var sw = parseInt(d3.select("svg").style("width"), 10);
var sh = parseInt(d3.select("svg").style("height"), 10);
 
//set the sun's position to be in the center of the screen
var sun = {x: sw/2, y: sh/2};
 
//we want to scale the distance of the planets by some number so
//that they fit inside of our screen (we use 1million miles for the distance)
var dist_radius = 261;
//we want to scale the size of the sun and the planets so that they are visible on the screen.
//this means that they don't match the scale of the distance
var size_radius = 110;
//we know the size of the sun and its bigger than any planet
var size_max = 695500;
var size_scale = d3.scale.linear()
.domain([0, size_max])
.range([0, size_radius]);
 
//get the maximum distance of a planet
var dist_max = d3.max(planets, function(d) {
return d.dist_avg;
});
//we use a log scale because the planets are so spread out
var dist_scale = d3.scale.log()
.domain([1, dist_max])
.range([0, dist_radius]);
var sun_circle = svg.append("circle")
.attr("r", size_scale(695500))
.attr("cx", sun.x)
.attr("cy", sun.y)
.attr("fill", "#FFFF1D");
 
var gplanets = svg.selectAll("g.planet")
.data(planets)
.enter()
.append("g")
.classed("planet", true)
.attr("transform", function(d,i) {
var dp = i/planets.length;
var theta = dp * Math.PI * 2;
var radius = dist_scale(d.dist_avg);
var x = Math.cos(theta) * radius;
var y = Math.sin(theta) * radius;
return "translate(" + [sun.x + x,sun.y + y] + ")";
})
;
var circles = gplanets.append("circle")
.attr("r", function(d,i) {
var radius = size_scale(d.size);
return radius;
})
/*
.attr("cx", function(d,i) {
//divide up 2*pi (full circle) into equal parts
var dp = i/planets.length
var theta = dp * Math.PI * 2;
var radius = dist_scale(d.dist_avg)
var x = Math.cos(theta) * radius;
return sun.x + x + offset.x;
})
 
.attr("cy", function(d,i) {
var dp = i/planets.length
var theta = dp * Math.PI * 2;
var radius = dist_scale(d.dist_avg)
var y = Math.sin(theta) * radius;
return sun.y + y + offset.y;
})
*/
.attr("fill", function(d,i) {
return d.color;
});
var labels = gplanets.append("text")
.text(function(d,i) {
return d.name;
})
.attr("x", 25)
.attr("y", 4);
 
 
reptile_weave.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
var w = tributary.g_width;
var h = tributary.g_height;
var n = 20; //number of vertical bars
var spacing = 29; //spacing between bars
var bar_height = w + 231;
var bar_width = 2; //width in pixels of each bar
var rot_a = 0;
var rot_b = 90;
var opacity = 0.5;
 
 
var color = d3.scale.category20();
//var color = d3.scale.category20b()
//var color = d3.scale.category20c()
d3.select("svg").style("background-color", "#000000");
 
 
 
var make_bars = function(clazz, rot, height) {
var data = d3.range(0, n)
//var sw = parseInt(d3.select("svg").style("width"))
//var sh = parseInt(d3.select("svg").style("height"))
var gg = g.append("g")
.attr("class", clazz)
.attr("transform", "rotate(" + rot + ","+[w/2,h/2] +")")
var bars = gg.selectAll("rect."+clazz)
.data(data)
.enter()
.append("rect")
.attr("class", clazz)
 
bars.attr("width", bar_width)
.attr("height", bar_height)
.attr("fill", function(d,i) { return color(i) })
.attr("opacity", opacity)
.attr("transform", function(d,i) {
//each bar is spaced evenly, and then centered
return "translate(" + [i*spacing - bar_width/2, -h] + ")";
})
}
 
 
make_bars("a", rot_a, w)
make_bars("b", rot_b, w)
reptile_weave2.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
 
var w = tributary.g_width;
var h = tributary.g_height;
var n = 10; //number of vertical bars
var spacing = 11.88; //spacing between bars
var bar_height = w + 300;
var bar_width = 9.04; //width in pixels of each bar
var rot_a = 32;
var rot_b = 302;
var opacity = 0.95577;
d3.select("svg").style("background-color", "#000000");
 
 
var color = d3.scale.category20c();
//var color = d3.scale.category20b()
//var color = d3.scale.category20c()
 
//var svg = g.attr("transform", "translate(-10, -10)")
//g.append("rect").attr("width", tributary.g_width).attr("height", tributary.g_height)
 
 
 
var make_bars = function(clazz, rot, height) {
var data = d3.range(0, n)
//var sw = parseInt(d3.select("svg").style("width"))
//var sh = parseInt(d3.select("svg").style("height"))
var gg = g.append("g")
.attr("class", clazz)
.attr("transform", "rotate(" + rot + ","+[w/2,h/2] +")")
var bars = gg.selectAll("rect."+clazz)
.data(data)
.enter()
.append("rect")
.attr("class", clazz)
 
bars.attr("width", bar_width)
.attr("height", bar_height)
.attr("fill", function(d,i) { return color(i) })
.attr("opacity", opacity)
.attr("transform", function(d,i) {
//each bar is spaced evenly, and then centered
return "translate(" + [i*spacing - bar_width/2, -bar_height/2] + ")";
})
}
 
 
make_bars("a", rot_a, w)
make_bars("b", rot_b, w)
shapes.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
//http://www.w3.org/TR/SVG/shapes.html
//http://alignedleft.com/tutorials/d3/an-svg-primer/
 
var svg = d3.select("svg");
var rect = svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 10)
.attr("height", 100)
.attr("rx", 5)
.attr("ry", 5)
.attr("fill", "#000")
.attr("opacity", 1.0);
 
var circle = svg.append("circle")
.attr("cx", 250)
.attr("cy", 60)
.attr("r", 50)
.attr("fill", "#000000")
.attr("stroke", "#0000aa")
.attr("stroke-width", 3);
 
var ellipse = svg.append("ellipse")
.attr("cx", 450)
.attr("cy", 60)
.attr("rx", 40)
.attr("ry", 70)
.attr("fill", "#ffff00");
 
var line = svg.append("line")
.attr("x1", 10)
.attr("y1", 150)
.attr("x2", 100)
.attr("y2", 150)
.attr("stroke", "#000000")
.attr("stroke-width", 3);
var text = svg.append("text")
.attr("x", 250)
.attr("y", 160)
.attr("font", "Helvetica")
.attr("font-size", 24)
.attr("fill", "#ff0000")
.text("Hello World");
sinwaves.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
//Try changing all these parameters
//Layout properties
var
n = 35
, m = 30
, spacing = 21
, opacity = 0.8
, stroke_width = 15
 
//Sin wave function
//y = amplitude * sin( omega * theta + phase)
var amplitude = 21
, theta = Math.PI * 3.5
, omega = -0.1
, phase = -0.5
 
 
var colors = [
'#D40067'
, '#4DA9DF'
, '#00ff00'
, '#ff0000'
]
 
//interpolate over multiple colors
var color_scale = function(i) {
var num_interps = colors.length -1
var ord = d3.scale.linear()
.domain([0, n])
.range([0, num_interps])
var section = parseInt(ord(i))
//console.log("section", section)
var section_size = n / num_interps
//get the two colors we want to interpolate between
var col_range = [colors[section], colors[section+1]]
var col_scale = d3.scale.linear()
.domain([section * section_size, (section+1) * section_size])
//.interpolate(d3.interpolateRgb)
.interpolate(d3.interpolateHsl)
.range(col_range)
return col_scale(i)
}
/*
var color = d3.scale.linear()
.domain([0, n])
//.interpolate(d3.interpolateRgb)
.interpolate(d3.interpolateHsl)
.range(['#D40067', '#4DA9DF'])
*/
var color = color_scale
 
 
 
var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))
 
 
var lines = [ ];
for (i in d3.range(n)) {
 
var data = d3.range(m)
lines.push({
index: i,
data: data
})
}
 
var xscale = d3.scale.linear()
.domain([0, m])
.range([-.1*sw, sw])
 
function line_maker( data ) {
var freq = omega * data.index
var svgline = d3.svg.line()
.x(function(d,i) {
return xscale(d);
})
.y(function(d,i) {
var th = d/m * theta
var ph = (n-data.index) * phase
var y = amplitude * Math.sin(freq * th + ph );
return y
})
.interpolate("basis")
//.interpolate("linear")
return svgline(data.data);
}
 
function lineenter(d, i) {
d3.select(this).selectAll("path.path")
.data([d])
.enter()
.append("svg:path")
.attr("class", "path")
.attr("stroke-width", stroke_width)
//.attr("stroke-width", function(e,i) { return e.width;})
.attr("stroke", "#fff")
.attr("fill", "none")
update_spacing()
}
 
function update_spacing()
{
var th = spacing * n;
var hscale = d3.scale.linear()
.domain([0, n])
.range([0, sh])
d3.selectAll("g.line path")
.attr("transform", function(d, i) {
//return "translate(" + [0, th - spacing * d.index] + ")";
return "translate(" + [0, 10+sh/2 + th / 2 - spacing * d.index] + ")";
})
}
 
var svg = d3.select("svg")
.attr("width", sw)
.attr("height", sh)
.append("svg:g")
 
var line = svg.selectAll("g.line")
.data(lines)
.enter().append("svg:g")
.attr("class", "line")
.each(lineenter);
 
 
 
 
/*
var opacity = d3.scale.linear()
.domain([0, n])
.range([1, .4])
*/
d3.selectAll("g.line path")
.attr("d", function(d,i) {
return line_maker(d)
})
.attr("stroke", function(d,i) { return color(d.index);})
.attr("opacity", opacity);
sinwaves_datgui.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
 
//Try changing all these parameters
//Layout properties
var n = 35;
var m = 30;
trib.spacing = 21;
trib.opacity = 0.8; trib_options.opacity = {"min":0, "max":1};
trib.stroke_width = 0.2;
 
//Sin wave function
//y = amplitude * sin( omega * theta + phase)
trib.amplitude = 21;
trib.theta = Math.PI * 3.5;
trib.omega = -0.1;
trib.phase = 0.2;
 
 
var colors = [
'#D40067'
, '#4DA9DF'
, '#00ff00'
, '#ff0000'
]
 
//interpolate over multiple colors
var color_scale = function(i) {
var num_interps = colors.length -1
var ord = d3.scale.linear()
.domain([0, n])
.range([0, num_interps])
var section = parseInt(ord(i))
//console.log("section", section)
var section_size = n / num_interps
//get the two colors we want to interpolate between
var col_range = [colors[section], colors[section+1]]
var col_scale = d3.scale.linear()
.domain([section * section_size, (section+1) * section_size])
//.interpolate(d3.interpolateRgb)
.interpolate(d3.interpolateHsl)
.range(col_range)
return col_scale(i)
}
/*
var color = d3.scale.linear()
.domain([0, n])
//.interpolate(d3.interpolateRgb)
.interpolate(d3.interpolateHsl)
.range(['#D40067', '#4DA9DF'])
*/
var color = color_scale
 
 
 
var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))
 
 
var lines = [ ];
for (i in d3.range(n)) {
 
var data = d3.range(m)
lines.push({
index: i,
data: data
})
}
 
var xscale = d3.scale.linear()
.domain([0, m])
.range([-.1*sw, sw])
 
function line_maker( data ) {
var freq = trib.omega * data.index
var svgline = d3.svg.line()
.x(function(d,i) {
return xscale(d);
})
.y(function(d,i) {
var th = d/m * trib.theta
var ph = (n-data.index) * trib.phase
var y = trib.amplitude * Math.sin(freq * th + ph );
return y
})
.interpolate("basis")
//.interpolate("linear")
return svgline(data.data);
}
 
function lineenter(d, i) {
d3.select(this).selectAll("path.path")
.data([d])
.enter()
.append("svg:path")
.attr("class", "path")
.attr("stroke-width", trib.stroke_width)
//.attr("stroke-width", function(e,i) { return e.width;})
.attr("stroke", "#fff")
.attr("fill", "none")
update_spacing()
}
 
function update_spacing()
{
var th = trib.spacing * n;
var hscale = d3.scale.linear()
.domain([0, n])
.range([0, sh])
d3.selectAll("g.line path")
.attr("transform", function(d, i) {
//return "translate(" + [0, th - spacing * d.index] + ")";
return "translate(" + [0, 10+sh/2 + th / 2 - trib.spacing * d.index] + ")";
})
}
 
var svg = d3.select("svg")
.attr("width", sw)
.attr("height", sh)
.append("svg:g")
 
var line = svg.selectAll("g.line")
.data(lines)
.enter().append("svg:g")
.attr("class", "line")
.each(lineenter);
 
 
 
 
/*
var opacity = d3.scale.linear()
.domain([0, n])
.range([1, .4])
*/
d3.selectAll("g.line path")
.attr("d", function(d,i) {
return line_maker(d)
})
.attr("stroke", function(d,i) { return color(d.index);})
.attr("opacity", trib.opacity);
squarecircle.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
 
var start = Date.now()
, n = 6 //number of rings
, radius = 70 //radius interval
, deg = 360 //angle (in degrees) we will split
, width = 21 //width of each box
, t = 1337 //"time'
, a = 1
, ntheta = 2
, speed_factor = 0.02917
 
, opacity = 0.01
, stroke_opacity = 0.9
, stroke_width = 2
, fill_color = "#000000"
, stroke_colors = ["#ffffff", "#000000"]
, corners = 0
 
 
 
 
var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))
 
 
var rings = [ ];
 
for (i in d3.range(n))
{
var speed = i * speed_factor
rings.push({
radius: radius*i,
width: width,
speed: speed,
phase: i
})
}
 
var svg = d3.select("svg")
 
svg.append("rect")
.attr("width", sw)
.attr("height", sh)
.attr("fill", "#888888")
 
 
svg = svg.append("svg:g")
.attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");
 
var ring = svg.selectAll("g")
.data(rings)
.enter().append("svg:g")
.attr("class", "ring")
.each(ringEnter);
 
 
var updateRing = function(elapsed) {
rotate = function(d,i) {
return "rotate(" + (a * d.speed * elapsed) + ")";
};
 
var rings = svg.selectAll("g.ring")
.attr("transform", rotate)
.selectAll("rect")
.attr("transform", rotate)
.attr("fill", fill_color)
.attr("fill-opacity", opacity)
.attr("stroke", function(d,i) {
return stroke_colors[i % 2];
})
.attr("stroke-opacity", stroke_opacity)
.attr("stroke-width", stroke_width)
.attr("rx", corners)
.attr("ry", corners)
 
 
 
}
function ringEnter(d, i) {
//split up the circle into squares
var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
k = deg / theta;
d3.select(this).selectAll("g")
.data(d3.range(theta).map(function() { return d; }))
.enter().append("svg:g")
.attr("class", "square")
.attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
.append("svg:rect")
.attr("x", -d.width / 2)
.attr("y", -d.width / 2)
.attr("width", d.width)
.attr("height", d.width);
}
updateRing(t)
test.html
HTML
1 2 3 4 5 6 7 8 9
<html>
<head>
<script type="text/javascript" src="../advd3/d3/d3.v2.js"></script>
</head>
<body>
<svg></svg>
<script type="text/javascript" src="warp.js"></script>
</body>
</html>
warp.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
//http://stackoverflow.com/questions/5055625/image-warping-bulge-effect-algorithm
 
//Try changing all these parameters
//Layout properties
var n = 15
 
, k = 0.94 //amount of warping, try positive numbers around 1
, spacing = 8 //spacing between squares
, color = "#D40067"
, opacity = 0.9
, stroke_color = "#4DA9DF"
, stroke_opacity = 0.9
, stroke_width = 3
, corners = 5
, offset = 40
 
 
 
//take in normalized coords (from 0 to 1)
function warp(x0, y0, x1, y1)
{
var r = Math.sqrt( (x0 - x1)*(x0 - x1) + (y0 - y1)*(y0 - y1) )
var a = Math.atan2(y0 - y1, x0 - x1)
var rn = Math.pow(r, k)
var nx = rn * Math.cos(a) + x1
var ny = rn * Math.sin(a) + y1
return [nx, ny]
}
 
//pass in the center point we want to warp around
function warp_boxes(x1, y1)
{
boxes = d3.selectAll("g.box")
.attr("transform", function(d,i)
{
x0 = x(d) / n;
y0 = y(d) / n;
xy = warp(x0, y0, x1, y1);
//console.log("xy", x0,y0, xy);
xx = xy[0] * n * (bw+spacing)
yy = xy[1] * n * (bh+spacing)
return "translate(" + [xx,yy] + ")"
})
}
 
function x(i) {
return (i%n)
}
function y(i) {
return Math.floor(i/n)
}
 
function make_unit_chart(){
var data = d3.range(n*n);
 
var sw = parseInt(d3.select("svg").style("width")) + offset
var sh = parseInt(d3.select("svg").style("height")) + offset
 
var canvas = d3.select("svg")
.append("svg:g")
.attr("id", "graph");
 
bw = (sw - spacing*n) / n
bh = (sh - spacing*n) / n
canvas.append("svg:rect")
.attr("class", "bgrect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#ffffff")
 
chart = canvas.append("svg:g")
.attr("class", "chart")
.attr("transform", "translate(" + [-offset/2, -offset/2] + ")")
 
rects = chart.selectAll("g.box")
.data(data)
.enter()
.append("svg:g")
.attr("class", "box")
.attr("transform", function(d,i) {
return "translate(" + [x(d)*(bw+spacing), y(d)*(bh+spacing)] + ")"
})
.attr("pointer-events", "all")
 
 
rects
.append("svg:rect")
.attr("fill", function(d,i){
return color;
})
.attr("stroke", function(d,i){
return stroke_color;
})
.attr("stroke-opacity", function(d,i) {
return stroke_opacity;
})
.attr("stroke-width", function(d,i) {
return stroke_width;
})
.attr("rx", function(d,i) {
return corners;
})
.attr("ry", function(d,i) {
return corners;
})
.attr("class", "rowrect")
.attr("width", bw)
.attr("height", bh)
.attr("opacity", opacity)
 
canvas.append("svg:rect")
.attr("pointer-events", "all")
.attr("width", sw)
.attr("height", sh)
.attr("fill-opacity", 0)
.on("mousemove", function(d,i) {
//console.log("this", this, d3.svg.mouse(this))
x1 = d3.svg.mouse(this)[0] / sw
y1 = d3.svg.mouse(this)[1] / sh
warp_boxes(x1, y1)
})
.on("mouseout", function(d,i) {
//set the bulge back to center of canvas
//these coordinates go from 0 - 1
x1 = .5
y1 = .5
warp_boxes(x1, y1)
 
})
var x1 = .5
var y1 = .5
warp_boxes(x1, y1)
 
 
 
};
 
 
make_unit_chart()
weave.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
 
//Try changing all these parameters
//Layout properties
var h = 1000 //height of the bars (we make it a lot bigger than canvas so we can rotate)
, n = 30 //number of vertical bars
, m = 30 //number of horizontal bars
, spacing = 30 //spacing between bars
, bar_width = 10 //width in pixels of each bar
, rot_a = 0
, rot_b = 90
, opacity = 0.8
 
 
var color = d3.scale.category20()
//var color = d3.scale.category20b()
//var color = d3.scale.category20c()
 
var svg = d3.select("svg")
.append("g")
.attr("transform", "translate(-10, -10)")
 
 
var make_bars = function(clazz, rot) {
var data = d3.range(0, n)
var sw = parseInt(d3.select("svg").style("width"))
var sh = parseInt(d3.select("svg").style("height"))
var g = svg.append("g")
.attr("class", clazz)
.attr("transform", "rotate(" + rot + ","+[sw/2,sh/2] +")")
var bars = g.selectAll("rect."+clazz)
.data(data)
.enter()
.append("rect")
.attr("class", clazz)
 
bars.attr("width", bar_width)
.attr("height", 2*h)
.attr("fill", function(d,i) { return color(i) })
.attr("opacity", opacity)
.attr("transform", function(d,i) {
//each bar is spaced evenly, and then centered
return "translate(" + [i*spacing - bar_width/2, -h] + ")";
})
}
 
 
make_bars("a", rot_a)
make_bars("b", rot_b)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.