My D3 Column Chart Attempt
CSS
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
CoffeeScript
d = document
e = d.documentElement
g = d.getElementsByTagName('body')[0]
padding = 40
w = d.innerWidth || e.clientWidth || g.clientWidth
h = d.innerHeight|| e.clientHeight|| g.clientHeight;
barPadding = 1
dataset = [ 50, 35, 10, 15, 20, 25 ]
#dataset = (Math.abs(Math.random() * 100) for i in [0..25])
svg = d3.select("body")
.append("svg")
svg.attr("width", w)
.attr("height", h)
min = Math.min dataset...
max = Math.max dataset...
build = () ->
console.log("building");
xscale = d3.scale.linear()
.domain([0, dataset.length])
.range([0, w]);
yscale = d3.scale.linear()
.domain([0, max])
.range([0, h-2*padding]);
svg.selectAll("rect").remove()
svg.selectAll("text").remove()
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d,i) -> xscale(i) )
.attr("width", w / dataset.length - barPadding)
.attr('fill', (d,i) -> "rgb(0, 0, #{ parseInt(50 + d)})")
.attr("y", (d,i) -> h-yscale(d) - 40 - (Date.now() % 60))
.attr("height", (d,i) -> yscale(d) + (Date.now() % 60) )
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("x", (d, i) -> i * (w / dataset.length) + (w / dataset.length - barPadding) / 2)
.attr("y", (d,i) -> h-yscale(d) - 40)
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red")
.text(d3.format(",.0f"))
xAxis = d3.svg.axis();
xAxis.scale(xscale)
xAxis.orient("bottom")
svg.selectAll("g").remove()
svg.append("g")
.attr('class','axis')
.attr('transform', "translate(0,#{ h - 20 })")
.call(xAxis);
updateWindow = () ->
w = w.innerWidth || e.clientWidth || g.clientWidth;
h = w.innerHeight|| e.clientHeight|| g.clientHeight;
w = w - (2*padding)
...