Skip to content

Instantly share code, notes, and snippets.

@heyjinkim
Last active December 19, 2015 16:08
Show Gist options
  • Save heyjinkim/5981201 to your computer and use it in GitHub Desktop.
Save heyjinkim/5981201 to your computer and use it in GitHub Desktop.
Ember.Component: responsible for encapsulating templates of HTML content, combining templates with data to render as sections of a page's DOM, and registering and responding to user-initiated events.
App = Ember.Application.create();
App.BarChartComponent = Ember.Component.extend({
tagName: 'svg',
attributeBindings: 'width height'.w(),
margin: {top: 20, right: 20, bottom: 30, left: 40},
w: function(){
return this.get('width') - this.get('margin.left') - this.get('margin.right');
}.property('width'),
h: function(){
return this.get('height') - this.get('margin.top') - this.get('margin.bottom');
}.property('height'),
transformG: function(){
return "translate(" + this.get('margin.left') + "," + this.get('margin.top') + ")";
}.property(),
transformX: function(){
return "translate(0,"+ this.get('h') +")";
}.property('h'),
draw: function(){
var formatPercent = d3.format(".0%");
var width = this.get('w');
var height = this.get('h');
var svg = d3.select('#'+this.get('elementId'));
var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.1);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(formatPercent);
x.domain(DATA.map(function(d) { return d.letter; }));
y.domain([0, d3.max(DATA, function(d) { return d.frequency; })]);
svg.select(".axis.x").call(xAxis);
svg.select(".axis.y").call(yAxis);
svg.select(".rects").selectAll("rect")
.data(DATA)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
},
didInsertElement: function(){
this.draw();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment