Commit 13489815 authored by Kjetil Thuen's avatar Kjetil Thuen

Sort of working with real, live data

parent b5c8ae12
......@@ -6,8 +6,8 @@ currentFrame = 0
window.nesstartimebars = {}
window.nesstartimebars.main = (containerId) ->
nesstarloader.reloadNesstarData( (foo) ->
timebars.setupChart containerId, foo
nesstarloader.reloadNesstarData( (data) ->
timebars.setupChart containerId, data
currentFrame = timebars.nextFrame containerId, currentFrame
)
......@@ -19,7 +19,8 @@ window.nesstartimebars.main = (containerId) ->
.innerHTML = "<i class='fa fa-play'></i>"
else
timeBarAnim = setInterval ->
timebars.nextFrame containerId
console.log "Frame #" + currentFrame
currentFrame = timebars.nextFrame containerId, currentFrame
, timebars.speed()
document.getElementById("playBtn")
.innerHTML = "<i class='fa fa-pause'></i>"
......
......@@ -14,6 +14,7 @@ requestDescription = () ->
},
{
"id": "alder"
"members": []
},
{
"id": "Kjnn",
......@@ -46,7 +47,7 @@ assembleDataRequest = () ->
JSON.stringify(datadesc.filter)
# Turns the over-verbose and rigid cell descriptions from the Nesstar REST cube
# JSON format into something more manageble
# JSON format into something a bit more manageable
flattenNesstarData = (cellValue) ->
flattenedCell = lodash.object lodash.map cellValue.coordinate, (x) ->
[ x.category, x.member ]
......@@ -55,7 +56,7 @@ flattenNesstarData = (cellValue) ->
flattenedCell
# Runs a Nesstar cube REST response through flattenNesstarData and then sorts
# the resulting collection of objects by year and gender
# the resulting collection of objects by year and birthyear
prepareFuncFactory = (callback) ->
prepareDataForTimeBar = ->
values = JSON.parse(@response).payload.values
......@@ -70,12 +71,17 @@ prepareFuncFactory = (callback) ->
flattenedValuesByYearAndBirthYear =
lodash.mapValues valuesByYearAndBirthYear, (years) ->
lodash.map years, (birthYear) ->
lodash.filter lodash.map(years, (birthYear) ->
{
birthyear: parseInt(birthYear[0].tid) - parseInt(birthYear[0].alder)
year: parseInt birthYear[0].tid
age: parseInt birthYear[0].alder
rvalue: birthYear[0].value
lvalue: birthYear[1].value
}
), (cell) ->
#Ages < 100 are really age groups. Eeeeewww!
cell.age < 100
callback flattenedValuesByYearAndBirthYear
......
......@@ -3,40 +3,55 @@ lodash = require 'lodash'
completeData = {}
chartWidth = -> 900
chartHeight = -> 500
numBars = -> 100
speed = -> 100
margin = -> 10
chartWidth = (containerId) ->
parseInt d3.select(containerId).style "width"
barThickness = ->
chartHeight() / numBars()
chartHeight = (containerId) ->
500
x = d3.scale.linear()
.domain [ 0, 100]
.range [ 0, chartWidth() / 2 ]
numBars = (containerId) ->
vals = lodash.first(lodash.values completeData[containerId])
vals.length
y = d3.scale.linear()
.domain [ 0, numBars()]
.rangeRound [ 0, chartHeight() ]
margin = (containerId) ->
chartWidth(containerId) / 50
addBar = (newBar) ->
speed = -> 500
barThickness = (containerId) ->
chartHeight(containerId) / numBars(containerId)
x = (containerId) ->
d3.scale.linear()
.domain [
0,
d3.max(valuesFromFrame(containerId, 0), (d) -> Math.max(d.rvalue, d.lvalue))
]
.range [ 0, chartWidth(containerId) / 2 ]
y = (containerId, val) ->
d3.scale.linear()
.domain(d3.extent valuesFromFrame(containerId, 0), (d) -> d.age)
.rangeRound [ 0, chartHeight(containerId) ]
addBar = (newBar, containerId) ->
barGroup = newBar.append "g"
.attr "class", "valuepoint"
.attr "transform", (d, i) ->
"translate(0, " + (y(i) + .5) + ")"
"translate(0, " + (y(containerId)(i) + .5) + ")"
barGroup.append "rect"
.attr "class", "right"
.attr "x", chartWidth() / 2 - margin()
.attr "width", (d) -> x d.rvalue
.attr "height", barThickness()
.attr "x", chartWidth(containerId) / 2 + margin(containerId)
.attr "width", (d) -> x(containerId)(d.rvalue)
.attr "height", barThickness containerId
barGroup.append "rect"
.attr "class", "left"
.attr "x", (d) -> (chartWidth() / 2) - x d.lvalue + margin()
.attr "width", (d) -> x d.lvalue
.attr "height", barThickness()
.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])
......@@ -52,9 +67,9 @@ updateChart = (containerId, frameNum) ->
.ease "linear"
.duration speed()
.attr "transform", (d, i) ->
"translate(0, " + (y(i) + .5) + ")"
"translate(0, " + (y(containerId)(i) + .5) + ")"
addBar valuepoints.enter()
addBar valuepoints.enter(), containerId
valuepoints.exit()
.transition()
......@@ -66,7 +81,7 @@ updateChart = (containerId, frameNum) ->
nextFrame = (containerId, frameNum) ->
num = frameNum or 0
num++
if num > lodash.keys(completeData[containerId]).length
if num >= lodash.keys(completeData[containerId]).length
num = 0
updateChart containerId, num
num
......@@ -78,15 +93,24 @@ nextFrame = (containerId, frameNum) ->
#are ignored), each element in these arrays should contain an object that has
#the value property.
#
#The conteinerId is just a string identfying a div within wich the graph should
#be built
#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) ->
completeData[containerId] = data
chart = d3.select containerId
.insert "svg"
.attr "class", "chart"
.attr "width", chartWidth()
.attr "height", chartHeight()
if data
completeData[containerId] = data
lodash.forEach (lodash.keys completeData), (id) ->
d3.select id
.html ""
d3.select id
.insert "svg"
.attr "class", "chart"
.attr "width", chartWidth(id)
.attr "height", chartHeight(id)
nextFrame id, 0
window.onresize = setupChart
exports.setupChart = setupChart
exports.speed = speed
......
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