Skip to content

Instantly share code, notes, and snippets.

@dsdstudio
Last active August 29, 2015 13:57
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save dsdstudio/9384120 to your computer and use it in GitHub Desktop.
d3 바차트 프로토타이핑
var data = [
{l:"개인", v:55, t:1},
{l:"기관", v:343, t:2},
{l:"외인", v:332, t:1}
];
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var w = 500;
var h = 80 - margin.bottom - margin.top;
var barWidth = w / data.length;
var canvas = d3.select("body")
.append('svg')
.attr('class', 'chart')
.attr('width', w)
.attr('height', h + margin.top + margin.bottom);
function getColor(t) {
return {1:"#f11",2:"#28f"}[t] || "#ddd";
}
var color = d3.scale.ordinal().range(["#f11", "#f99", "#ddd", "#9cf", "#28f"]);
var x = d3.scale.ordinal().rangeRoundBands([0, w], 0.4);
var y = d3.scale.linear().range([h, 0]);
x.domain(data.map(function(d) { return d.l; }));
y.domain([0, d3.max(data, function(d) { return d.v; })]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var bar = canvas.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + x(d.l) + ",0)"; });
canvas.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h + margin.top) + ")")
.call(xAxis);
bar.append("rect")
.style("fill", function(d) { return getColor(d.t); })
.attr("y", h + margin.top)
.attr("height", 0)
.attr("width", x.rangeBand())
.transition().duration(1000)
.attr("height", function(d) {
return h - y(Math.abs(d.v));
})
.attr("y", function(d) {
return y(Math.abs(d.v)) + margin.top;
});
bar.append("text")
.attr("x", x.rangeBand() / 2)
.attr("y", h + margin.top + 3)
.attr("dy", "-.5em")
.text(function(d) { return d.v; })
.style({"font-size":"10px", "text-anchor":"middle", "fill":"#ddd"})
.transition().duration(1000)
.attr("y", function(d) {
return y(Math.abs(d.v)) + 3 + margin.top;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment