Skip to content

Instantly share code, notes, and snippets.

@poezn poezn/_.md

Created Oct 24, 2012
Embed
What would you like to do?
just another inlet to tributary
{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"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}
var svg = d3.select("svg");
var g = svg.append('g');
var stripes = d3.range(13);
var stars = [5, 6, 5, 6, 5];
var width = 400,
height = width/1.9;
var stripeHeight = height / stripes.length;
var starBgHeight = stripeHeight * 7;
var starBgWidth = width/1.9*0.76; //according to http://www.usflag.org/flagspecs.html
var starRowScale = d3.scale.ordinal()
.domain(d3.range(0, stars.length))
.rangeBands([0, starBgHeight], 0.2);
var starScale = function(max) {
return d3.scale.ordinal()
.domain(d3.range(0, max))
.rangeBands([10, starBgWidth], 0.2);
};
g.selectAll('rect.stripe')
.data(stripes)
.enter().append('rect')
.attr({
class: 'stripe',
fill: function(d, i) {
return i % 2 ? 'white': 'red'
},
width: width,
height: stripeHeight,
transform: function(d, i) {
var tx = 10,
ty = 10 + i * stripeHeight;
return 'translate(' + [tx, ty] + ')';
}
});
g.append('rect')
.attr({
class: 'starbg',
fill: 'blue',
width: starBgWidth,
height: starBgHeight,
transform: function(d, i) {
var tx = 10,
ty = 10 + i * stripeHeight;
return 'translate(' + [tx, ty] + ')';
}
});
var starGroup = g.append('g');
var starRows = starGroup.selectAll('g.star-row')
.data(stars)
.enter().append('g')
.attr({
class: 'star-row',
width: width,
height: starRowScale.rangeBand(),
transform: function(d, i) {
return 'translate(' + [0, starRowScale(i) ]+ ')'
}
});
starRows.selectAll('text.star')
.data(function(d, i) {
return d3.range(0, d);
})
.enter().append('text')
.attr({
class: 'star',
transform: function(d, i, p) {
console.log(p);
var scale = starScale(stars[p]);
var tx = scale(i), ty = 25;
return 'translate(' + [tx, ty] + ')'
}
})
.style({
fill: 'white'
})
.text('★')
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.