Skip to content

@enjalot /arctween.js
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
inlets for tributary
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));
};
}
*/
//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);
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);
}
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);
}
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>
*/
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);
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)
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)
//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");
//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);
//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);
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)
<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>
//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()
//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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.