Commit 1e17771e authored by Kjetil Thuen's avatar Kjetil Thuen

Flipped chart axis

parent a808e0e6
...@@ -24,10 +24,15 @@ speed = -> ...@@ -24,10 +24,15 @@ speed = ->
500 500
barWidth = -> barWidth = ->
chartWidth() / numBars() chartHeight() / numBars()
x = d3.scale.linear().domain([ 0, 1 ]).range([ 0, barWidth() ]) x = d3.scale.linear()
y = d3.scale.linear().domain([ 0, 100 ]).rangeRound([ 0, chartHeight() ]) .domain([ 9, 91])
.range([ 0, chartWidth() / 2 ])
y = d3.scale.linear()
.domain([ 0, numBars()])
.rangeRound([ 0, chartHeight() ])
redraw = -> redraw = ->
rect = chart.selectAll("rect") rect = chart.selectAll("rect")
...@@ -35,10 +40,10 @@ redraw = -> ...@@ -35,10 +40,10 @@ redraw = ->
rect.enter() rect.enter()
.insert("rect", "line") .insert("rect", "line")
.attr("x", (d, i) -> x i + 1 - .5) .attr "x", chartWidth() / 2
.attr("y", (d) -> chartHeight() - y d.value - .5) .attr "y", (d, i) -> y(i) + .5
.attr("width", barWidth()) .attr("width", (d) -> x(d.value))
.attr("height", (d) -> y d.value) .attr("height", barWidth())
.transition() .transition()
.ease("linear") .ease("linear")
.duration(speed()).attr "x", (d, i) -> .duration(speed()).attr "x", (d, i) ->
...@@ -47,7 +52,7 @@ redraw = -> ...@@ -47,7 +52,7 @@ redraw = ->
rect.transition() rect.transition()
.ease("linear") .ease("linear")
.duration(speed()) .duration(speed())
.attr "x", (d, i) -> .attr "y", (d, i) ->
x(i) - .5 x(i) - .5
rect.exit() rect.exit()
...@@ -57,7 +62,7 @@ redraw = -> ...@@ -57,7 +62,7 @@ redraw = ->
.remove() .remove()
setupChart = (containerId) -> setupChart = (containerId) ->
data = d3.range(100).map(next) data = d3.range(numBars()).map(next)
setInterval (-> setInterval (->
data.shift() data.shift()
...@@ -68,24 +73,17 @@ setupChart = (containerId) -> ...@@ -68,24 +73,17 @@ setupChart = (containerId) ->
chart = d3.select(containerId) chart = d3.select(containerId)
.append("svg") .append("svg")
.attr("class", "chart") .attr("class", "chart")
.attr("width", barWidth() * data.length - 1) .attr("width", chartWidth())
.attr("height", chartHeight()) .attr("height", chartHeight())
chart.selectAll("rect") chart.selectAll("rect")
.data(data) .data(data)
.enter() .enter()
.append("rect") .append("rect")
.attr "x", (d, i) -> x(i) - .5 .attr "x", chartWidth() / 2
.attr "y", (d) -> chartHeight() - y d.value - .5 .attr "y", (d, i) -> y(i) + .5
.attr "width", barWidth() .attr("width", (d) -> x(d.value))
.attr "height", (d) -> y d.value .attr("height", barWidth())
chart.append("line")
.attr("x1", 0)
.attr("x2", barWidth() * data.length)
.attr("y1", chartHeight() - .5)
.attr("y2", chartHeight() - .5)
.style "stroke", "#000"
window.initTimeBars = (containerId) -> window.initTimeBars = (containerId) ->
setupChart(containerId) setupChart(containerId)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment