Commit 99aaf28f authored by Kjetil Thuen's avatar Kjetil Thuen

Fixed scaling

parent 13489815
......@@ -19,7 +19,6 @@ window.nesstartimebars.main = (containerId) ->
.innerHTML = "<i class='fa fa-play'></i>"
else
timeBarAnim = setInterval ->
console.log "Frame #" + currentFrame
currentFrame = timebars.nextFrame containerId, currentFrame
, timebars.speed()
document.getElementById("playBtn")
......
......@@ -3,63 +3,65 @@ lodash = require 'lodash'
completeData = {}
chartWidth = (containerId) ->
parseInt d3.select(containerId).style "width"
chartWidth = (chartId) ->
parseInt d3.select(chartId).style "width"
chartHeight = (containerId) ->
500
chartHeight = (chartId) ->
700
numBars = (containerId) ->
vals = lodash.first(lodash.values completeData[containerId])
numBars = (chartId) ->
vals = lodash.first(lodash.values completeData[chartId])
vals.length
margin = (containerId) ->
chartWidth(containerId) / 50
margin = (chartId) ->
chartWidth(chartId) / 50
speed = -> 500
barThickness = (containerId) ->
chartHeight(containerId) / numBars(containerId)
barThickness = (chartId) ->
Math.floor(chartHeight(chartId) / numBars(chartId)) - 2
x = (containerId) ->
x = (chartId) ->
d3.scale.linear()
.domain [
0,
d3.max(valuesFromFrame(containerId, 0), (d) -> Math.max(d.rvalue, d.lvalue))
d3.max(valuesFromFrame(chartId, 0), (d) ->
Math.max(d.rvalue, d.lvalue)
)
]
.range [ 0, chartWidth(containerId) / 2 ]
.range [ 0, (chartWidth(chartId) / 2) - (margin(chartId) * 2) ]
y = (containerId, val) ->
y = (chartId, val) ->
d3.scale.linear()
.domain(d3.extent valuesFromFrame(containerId, 0), (d) -> d.age)
.rangeRound [ 0, chartHeight(containerId) ]
.domain(d3.extent valuesFromFrame(chartId, 0), (d) -> d.age)
.range [ 0, chartHeight(chartId) ]
addBar = (newBar, containerId) ->
addBar = (newBar, chartId) ->
barGroup = newBar.append "g"
.attr "class", "valuepoint"
.attr "transform", (d, i) ->
"translate(0, " + (y(containerId)(i) + .5) + ")"
"translate(0, " + (y(chartId)(i) + 1) + ")"
barGroup.append "rect"
.attr "class", "right"
.attr "x", chartWidth(containerId) / 2 + margin(containerId)
.attr "width", (d) -> x(containerId)(d.rvalue)
.attr "height", barThickness containerId
.attr "x", chartWidth(chartId) / 2 + margin(chartId)
.attr "width", (d) -> x(chartId)(d.rvalue)
.attr "height", barThickness chartId
barGroup.append "rect"
.attr "class", "left"
.attr "x", (d) -> (chartWidth(containerId) / 2) -
x(containerId)(d.lvalue) - margin(containerId)
.attr "width", (d) -> x(containerId)(d.lvalue)
.attr "height", barThickness(containerId)
valuesFromFrame = (containerId, frameNum) ->
frameIndexes = lodash.keys(completeData[containerId])
completeData[containerId]['' + frameIndexes[frameNum] + '']
updateChart = (containerId, frameNum) ->
data = valuesFromFrame containerId, frameNum
chart = d3.select containerId + " svg.chart"
.attr "x", (d) -> (chartWidth(chartId) / 2) -
x(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> x(chartId)(d.lvalue)
.attr "height", barThickness(chartId)
valuesFromFrame = (chartId, frameNum) ->
frameIndexes = lodash.keys(completeData[chartId])
completeData[chartId]['' + frameIndexes[frameNum] + '']
updateChart = (chartId, frameNum) ->
data = valuesFromFrame chartId, frameNum
chart = d3.select chartId + " svg.chart"
valuepoints = chart.selectAll "g.valuepoint"
.data data, (d) -> d.birthyear
......@@ -67,9 +69,9 @@ updateChart = (containerId, frameNum) ->
.ease "linear"
.duration speed()
.attr "transform", (d, i) ->
"translate(0, " + (y(containerId)(i) + .5) + ")"
"translate(0, " + (y(chartId)(i) + 1) + ")"
addBar valuepoints.enter(), containerId
addBar valuepoints.enter(), chartId
valuepoints.exit()
.transition()
......@@ -78,12 +80,12 @@ updateChart = (containerId, frameNum) ->
.remove()
undefined
nextFrame = (containerId, frameNum) ->
nextFrame = (chartId, frameNum) ->
num = frameNum or 0
num++
if num >= lodash.keys(completeData[containerId]).length
if num >= lodash.keys(completeData[chartId]).length
num = 0
updateChart containerId, num
updateChart chartId, num
num
#Constructor.
......@@ -95,9 +97,9 @@ nextFrame = (containerId, frameNum) ->
#
#The conteinarId is just a string identfying a div within wich the graph should
#be built. There can be several simultanious graphs
setupChart = (containerId, data) ->
setupChart = (chartId, data) ->
if data
completeData[containerId] = data
completeData[chartId] = data
lodash.forEach (lodash.keys completeData), (id) ->
d3.select id
......@@ -106,6 +108,7 @@ setupChart = (containerId, data) ->
d3.select id
.insert "svg"
.attr "class", "chart"
.attr "shape-rendering", "geometricPrecision"
.attr "width", chartWidth(id)
.attr "height", chartHeight(id)
nextFrame id, 0
......
#main {
margin-top: 5em;
margin-top: 2em;
}
#main button {
......
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