Commit 74849912 authored by Kjetil Thuen's avatar Kjetil Thuen

Added x-axis labels, fixed y-axis orientation

parent ab628560
......@@ -12,9 +12,12 @@ numBars = (chartId) ->
vals = lodash.first(lodash.values completeData[chartId].yearData)
vals.length
margin = (chartId) ->
horizMargin = (chartId) ->
chartWidth(chartId) / 50
vertMargin = (chartId) ->
chartWidth(chartId) / 40
speed = -> 200
barThickness = (chartId) ->
......@@ -28,22 +31,50 @@ maxValue = lodash.memoize (chartId) ->
0)
0)
xScale = (chartId) ->
maxAge = lodash.memoize (chartId) ->
years = lodash.values completeData[chartId].yearData
lodash.reduce(years, (max, yearData) ->
Math.max max, lodash.reduce(yearData, (max, val) ->
Math.max max, val.age
0)
0)
xScaleRight = (chartId) ->
d3.scale.linear()
.domain [
0
maxValue chartId
]
.range [ 0, (chartWidth(chartId) / 2) - (horizMargin(chartId) * 2) ]
.nice()
xScaleLeft = (chartId) ->
d3.scale.linear()
.domain [
0,
0
maxValue chartId
]
.range [ 0, (chartWidth(chartId) / 2) - (margin(chartId) * 2) ]
.range [(chartWidth(chartId) / 2) - (horizMargin(chartId) * 2), 0 ]
.nice()
yScale = lodash.memoize (chartId) ->
yScale = (chartId) ->
d3.scale.linear()
.domain(d3.extent valuesFromFrame(chartId, 0), (d) -> d.age)
.range [ 0, chartHeight chartId ]
.domain [
0
maxAge(chartId)
]
.range [ (chartHeight(chartId) - vertMargin(chartId)), 0 ]
xAxis = (chartId) ->
xAxisLeft = (chartId) ->
d3.svg.axis()
.scale xScale chartId
.scale xScaleLeft chartId
.orient "bottom"
.ticks 5
xAxisRight = (chartId) ->
d3.svg.axis()
.scale xScaleRight chartId
.orient "bottom"
.ticks 5
......@@ -118,7 +149,9 @@ addBar = (newBar, chartId) ->
barGroup = newBar.append "g"
.attr "class", "valuepoint"
.attr "transform", (d, i) ->
"translate(0, " + (yScale(chartId)(i) + 1) + ")"
"translate(0, " +
(chartHeight(chartId) - yScale(chartId)(i) - vertMargin(chartId) + 1) +
")"
.on "mouseover", hoverBar chartId
.on "mouseout", unhoverBar chartId
.on "click", selectBar chartId
......@@ -135,10 +168,10 @@ addBar = (newBar, chartId) ->
barGroup.append "rect"
.attr "class", "right"
.attr "x", chartWidth(chartId) / 2 + margin(chartId)
.attr "x", chartWidth(chartId) / 2 + horizMargin(chartId)
.attr "height", barThickness chartId
.attr "fill", completeData[chartId].displayDetails.rightcolor
.attr "width", (d) -> xScale(chartId)(d.rvalue)
.attr "width", (d) -> xScaleRight(chartId)(d.rvalue)
barGroup.append "text"
.attr "x", chartWidth(chartId) / 2
......@@ -147,8 +180,8 @@ addBar = (newBar, chartId) ->
barGroup.append "rect"
.attr "class", "left"
.attr "x", (d) -> (chartWidth(chartId) / 2) -
xScale(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> xScale(chartId)(d.lvalue)
xScaleRight(chartId)(d.lvalue) - horizMargin(chartId)
.attr "width", (d) -> xScaleRight(chartId)(d.lvalue)
.attr "height", barThickness chartId
.attr "fill", completeData[chartId].displayDetails.leftcolor
......@@ -174,17 +207,19 @@ updateChart = (chartId, frameNum) ->
valuepoints.transition()
.attr "transform", (d, i) ->
"translate(0, " + (yScale(chartId)(i) + 1) + ")"
"translate(0, " +
(chartHeight(chartId) - yScale(chartId)(i) - vertMargin(chartId) + 1) +
")"
valuepoints.select "rect.left"
.transition()
.attr "x", (d) -> (chartWidth(chartId) / 2) -
xScale(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> xScale(chartId)(d.lvalue)
xScaleRight(chartId)(d.lvalue) - horizMargin(chartId)
.attr "width", (d) -> xScaleRight(chartId)(d.lvalue)
valuepoints.select "rect.right"
.transition()
.attr "width", (d) -> xScale(chartId)(d.rvalue)
.attr "width", (d) -> xScaleRight(chartId)(d.rvalue)
addBar valuepoints.enter(), chartId
......@@ -253,17 +288,42 @@ setupChart = (chartId, data, displayDetails) ->
.attr "width", chartWidth chartId
.attr "height", chartHeight chartId
gy = svg.append "g"
svg.append "g"
.attr "class", "axisLabels"
.attr "transform", (d, i) ->
"translate(" +
horizMargin(chartId) +
", " +
(chartHeight(chartId) - vertMargin(chartId)) +
")"
.call xAxisLeft(chartId)
svg.append "g"
.attr "class", "axisLabels"
.attr "transform", (d, i) ->
"translate(" +
(horizMargin(chartId) + (chartWidth(chartId) / 2)) +
", " +
(chartHeight(chartId) - vertMargin(chartId)) +
")"
.call xAxisRight(chartId)
svg.append "g"
.attr "class", "yAxisGrid"
.attr "transform", (d, i) ->
"translate(0, " + ((barThickness(chartId) / 2) + 1) + ")"
.call yAxisGrid(chartId)
svg.append "g"
.attr "class", "yAxisLabels"
.attr "class", "axisLabels"
.attr "transform", (d, i) ->
"translate(" + (chartWidth(chartId) / 2 - 15) + ", 0)"
"translate(" +
((chartWidth(chartId) - horizMargin(chartId)) / 2) +
", 0)"
.call yAxisLabels(chartId)
.selectAll("text")
.style("text-anchor", "middle")
metadata = d3.select chartId
.append "div"
......
......@@ -27,12 +27,13 @@ div.chartContainer {
position: relative;
}
.yAxisLabels {
.axisLabels {
path, line {
display: none;
}
text {
text-anchor: middle;
fill: black;
}
}
......@@ -99,7 +100,7 @@ div.chartContainer {
rect {
stroke-width: 1px;
stroke: red;
stroke: #f44;
}
}
}
......
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