Commit b38af4c9 authored by Kjetil Thuen's avatar Kjetil Thuen

Fixed bar width actually being updated.

Also fixed computing of max-width so that it takes all data into
account, not only year 1. This function is now memoized.
parent c082ad2d
......@@ -9,7 +9,7 @@ chartWidth = (chartId) ->
chartHeight = (chartId) -> 700
numBars = (chartId) ->
vals = lodash.first(lodash.values completeData[chartId])
vals = lodash.first(lodash.values completeData[chartId].yearData)
vals.length
margin = (chartId) ->
......@@ -20,17 +20,22 @@ speed = -> 200
barThickness = (chartId) ->
Math.floor(chartHeight(chartId) / numBars(chartId)) - 2
maxValue = lodash.memoize (chartId) ->
lodash.reduce(lodash.values(completeData[chartId].yearData), (max, yearData) ->
Math.max max, lodash.reduce(yearData, (max, val) ->
Math.max max, Math.max(val.rvalue, val.lvalue)
0)
0)
x_scale = (chartId) ->
d3.scale.linear()
.domain [
0,
d3.max(valuesFromFrame(chartId, 0), (d) ->
Math.max(d.rvalue, d.lvalue)
)
maxValue chartId
]
.range [ 0, (chartWidth(chartId) / 2) - (margin(chartId) * 2) ]
y_scale = (chartId) ->
y_scale = lodash.memoize (chartId) ->
d3.scale.linear()
.domain(d3.extent valuesFromFrame(chartId, 0), (d) -> d.age)
.range [ 0, chartHeight chartId ]
......@@ -51,6 +56,7 @@ prepareMetadataDiv = (chartId, data, mapping) ->
if data
fieldMapping = mapping or {
birthyear: "birthyear",
age: "age",
left: "lvalue",
right: "rvalue"
}
......@@ -69,10 +75,11 @@ prepareMetadataDiv = (chartId, data, mapping) ->
_results.join ""
updateInformation = (chartId, data) ->
updateMetadata = (chartId, data) ->
# FIXME: Add a delay to reduce flicker
if not data
data = d3.select(chartId + " svg.chart g.selected").data()[0]
#FIXME: Whats needed here is the data for the current frame filtered on the selected year
data = completeData[chartId].yearData[completeData[chartId].selectedYear]
d3.select chartId + " div.dataDetails"
.html prepareMetadataDiv chartId, data
......@@ -81,25 +88,23 @@ hoverBar = (chartId) ->
d3.selectAll chartId + " svg.chart g.valuepoint"
.filter (p) -> p.birthyear is data.birthyear
.classed "hovered", true
updateInformation chartId, data
updateMetadata chartId, data
unhoverBar = (chartId) ->
(data, index) ->
d3.selectAll chartId + " svg.chart g.valuepoint"
.classed "hovered", false
updateInformation chartId
updateMetadata chartId
selectBar = (chartId) ->
# FIXME: Need to store selected status in actual data, or state is lost when
# year scrolls out of view
(data, index) ->
completeData[chartId].selectedYear = data.birthyear
#FIXME: Shouln't this be updated automatically when the backed data changes?
d3.selectAll chartId + " svg.chart g.valuepoint"
.filter (p) -> p.birthyear is data.birthyear
.classed "selected", true
d3.selectAll chartId + " svg.chart g.valuepoint"
.filter (p) -> p.birthyear isnt data.birthyear
.classed "selected", false
updateInformation chartId
.classed "selected", (d) ->
d.birthyear is completeData[chartId].selectedYear
updateMetadata chartId
addBar = (newBar, chartId) ->
barGroup = newBar.append "g"
......@@ -109,13 +114,15 @@ addBar = (newBar, chartId) ->
.on "mouseover", hoverBar chartId
.on "mouseout", unhoverBar chartId
.on "click", selectBar chartId
.classed "selected", (d) ->
d.birthyear is completeData[chartId].selectedYear
barGroup.append "rect"
.attr "class", "right"
.attr "x", chartWidth(chartId) / 2 + margin(chartId)
.attr "width", (d) -> x_scale(chartId)(d.rvalue)
.attr "height", barThickness chartId
.attr "fill", completeData[chartId].displayDetails.rightcolor
.attr "width", (d) -> x_scale(chartId)(d.rvalue)
barGroup.append "text"
.attr "x", chartWidth(chartId) / 2
......@@ -130,25 +137,38 @@ addBar = (newBar, chartId) ->
.attr "fill", completeData[chartId].displayDetails.leftcolor
valuesFromFrame = (chartId, frameNum) ->
frameIndexes = lodash.keys(completeData[chartId])
completeData[chartId]['' + frameIndexes[frameNum] + '']
frameIndexes = lodash.keys(completeData[chartId].yearData)
completeData[chartId].yearData['' + frameIndexes[frameNum] + '']
updateChart = (chartId, frameNum) ->
data = valuesFromFrame chartId, frameNum
chart = d3.select chartId + " svg.chart"
yAxesGroup = chart.select "yAxesGroup"
valuepoints = chart.selectAll "g.valuepoint"
.data data, (d) -> d.birthyear
label = d3.select chartId + " span.yearLabel"
.html completeData[chartId].displayDetails.name + " " +
lodash.keys(completeData[chartId])[frameNum]
lodash.keys(completeData[chartId].yearData)[frameNum]
valuepoints = chart.selectAll "g.valuepoint"
.data data, (d) -> d.birthyear
valuepoints.transition()
.attr "transform", (d, i) ->
"translate(0, " + (y_scale(chartId)(i) + 1) + ")"
valuepoints.classed "selected", (d) ->
d.birthyear is completeData[chartId].selectedYear
valuepoints.select "rect.left"
.transition()
.attr "x", (d) -> (chartWidth(chartId) / 2) -
x_scale(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> x_scale(chartId)(d.lvalue)
valuepoints.select "rect.right"
.transition()
.attr "width", (d) -> x_scale(chartId)(d.rvalue)
yAxesGroup.call(y_axis chartId)
addBar valuepoints.enter(), chartId
......@@ -158,12 +178,14 @@ updateChart = (chartId, frameNum) ->
.duration speed() / 2
.attr "height", 0
.remove()
updateMetadata chartId
undefined
nextFrame = (chartId, frameNum) ->
num = frameNum or 0
num++
if num >= lodash.keys(completeData[chartId]).length
if num >= lodash.keys(completeData[chartId].yearData).length
num = 0
updateChart chartId, num
num
......@@ -181,7 +203,8 @@ nextFrame = (chartId, frameNum) ->
#displayDetails contain stuff like labels and colors
setupChart = (chartId, data, displayDetails) ->
if data
completeData[chartId] = data
completeData[chartId] = {}
completeData[chartId].yearData = data
completeData[chartId].displayDetails = displayDetails or {
name: "Timebars",
leftsymbol: "fa fa-female",
......@@ -194,6 +217,9 @@ setupChart = (chartId, data, displayDetails) ->
birthyearlabel: "Birthyear"
}
completeData[chartId].selectedYear =
valuesFromFrame(chartId, 0)[0].birthyear
lodash.forEach (lodash.keys completeData), (id) ->
d3.select id
......
......@@ -5,6 +5,12 @@
border-radius: $radius;
}
@mixin columns($number: 2) {
-moz-columns: $number;
-webkit-columns: $number;
columns: $number;
}
#main {
margin-top: 2em;
}
......@@ -52,6 +58,18 @@ div.metaData {
span.yearLabel {
font-size: 150%;
}
dl {
dt {
display: inline;
}
dt:after {
content: ": ";
}
dd {
display: inline;
padding-right: 2em;
}
}
}
......
......@@ -54,7 +54,8 @@
rightlabel: "Menn",
leftcolor: "#EBA487",
rightcolor: "#87CEEB",
birthyearlabel: "Fødselsår"
birthyearlabel: "Fødselsår",
agelabel: "Alder"
}
};
......
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