Commit a3c2b230 authored by Kjetil Thuen's avatar Kjetil Thuen
Browse files

Added background grid

parent 0f51cd4e
......@@ -28,7 +28,7 @@ maxValue = lodash.memoize (chartId) ->
0)
0)
x_scale = (chartId) ->
xScale = (chartId) ->
d3.scale.linear()
.domain [
0,
......@@ -36,22 +36,23 @@ x_scale = (chartId) ->
]
.range [ 0, (chartWidth(chartId) / 2) - (margin(chartId) * 2) ]
y_scale = lodash.memoize (chartId) ->
yScale = lodash.memoize (chartId) ->
d3.scale.linear()
.domain(d3.extent valuesFromFrame(chartId, 0), (d) -> d.age)
.range [ 0, chartHeight chartId ]
x_axis = (chartId) ->
xAxis = (chartId) ->
d3.svg.axis()
.scale x_scale chartId
.scale xScale chartId
.orient "bottom"
.ticks 5
y_axis = (chartId) ->
yAxis = (chartId) ->
d3.svg.axis()
.scale y_scale chartId
.orient "left"
.ticks 5
.scale yScale chartId
.orient "right"
.tickSize chartWidth(chartId) * 2
.ticks 100
prepareMetadataDiv = (chartId, data, mapping) ->
if data
......@@ -110,7 +111,7 @@ addBar = (newBar, chartId) ->
barGroup = newBar.append "g"
.attr "class", "valuepoint"
.attr "transform", (d, i) ->
"translate(0, " + (y_scale(chartId)(i) + 1) + ")"
"translate(0, " + (yScale(chartId)(i) + 1) + ")"
.on "mouseover", hoverBar chartId
.on "mouseout", unhoverBar chartId
.on "click", selectBar chartId
......@@ -130,7 +131,7 @@ addBar = (newBar, chartId) ->
.attr "x", chartWidth(chartId) / 2 + margin(chartId)
.attr "height", barThickness chartId
.attr "fill", completeData[chartId].displayDetails.rightcolor
.attr "width", (d) -> x_scale(chartId)(d.rvalue)
.attr "width", (d) -> xScale(chartId)(d.rvalue)
barGroup.append "text"
.attr "x", chartWidth(chartId) / 2
......@@ -139,8 +140,8 @@ addBar = (newBar, chartId) ->
barGroup.append "rect"
.attr "class", "left"
.attr "x", (d) -> (chartWidth(chartId) / 2) -
x_scale(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> x_scale(chartId)(d.lvalue)
xScale(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> xScale(chartId)(d.lvalue)
.attr "height", barThickness chartId
.attr "fill", completeData[chartId].displayDetails.leftcolor
......@@ -151,7 +152,6 @@ valuesFromFrame = (chartId, frameNum) ->
updateChart = (chartId, frameNum) ->
data = valuesFromFrame chartId, frameNum
chart = d3.select chartId + " svg.chart"
yAxesGroup = chart.select "yAxesGroup"
label = d3.select chartId + " span.yearLabel"
.html completeData[chartId].displayDetails.name +
......@@ -167,19 +167,17 @@ updateChart = (chartId, frameNum) ->
valuepoints.transition()
.attr "transform", (d, i) ->
"translate(0, " + (y_scale(chartId)(i) + 1) + ")"
"translate(0, " + (yScale(chartId)(i) + 1) + ")"
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)
xScale(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> xScale(chartId)(d.lvalue)
valuepoints.select "rect.right"
.transition()
.attr "width", (d) -> x_scale(chartId)(d.rvalue)
yAxesGroup.call(y_axis chartId)
.attr "width", (d) -> xScale(chartId)(d.rvalue)
addBar valuepoints.enter(), chartId
......@@ -238,23 +236,22 @@ setupChart = (chartId, data, displayDetails) ->
"Problems rendering chart",
"Could not understand data")
else
lodash.forEach (lodash.keys completeData), (id) ->
d3.select id
.html ""
svg = d3.select id
.insert "svg"
.attr "class", "chart"
.attr "shape-rendering", "geometricPrecision"
.attr "width", chartWidth id
.attr "height", chartHeight id
nextFrame id, 0
axesGroup = svg.append "g"
.attr "class", "yAxesGroup"
.attr "transform",
"translate("+ chartWidth(id) / 2 + "," + margin(id) + ")"
d3.select chartId
.html ""
svg = d3.select chartId
.insert "svg"
.attr "class", "chart"
.attr "shape-rendering", "geometricPrecision"
.attr "width", chartWidth chartId
.attr "height", chartHeight chartId
gy = svg.append "g"
axesGroup = svg.append "g"
.attr "class", "yAxisGroup"
.call yAxis(chartId)
metadata = d3.select chartId
.append "div"
......
......@@ -12,17 +12,32 @@
}
#main {
margin-top: 2em;
margin: 1em;
}
#main button {
margin: 1em;
}
#main svg {
@include rounded(1em);
}
div.chartContainer {
position: relative;
}
.yAxisGroup {
path {
display: none;
}
line {
stroke: #f5f5f5;
stroke-width: 5;
}
}
.poster {
@include rounded();
position: relative;
......
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