Commit 451e5a0c authored by Kjetil Thuen's avatar Kjetil Thuen

Some extra data displayed on click and mouseover

parent c51c8145
......@@ -6,8 +6,7 @@ completeData = {}
chartWidth = (chartId) ->
parseInt d3.select(chartId).style "width"
chartHeight = (chartId) ->
700
chartHeight = (chartId) -> 700
numBars = (chartId) ->
vals = lodash.first(lodash.values completeData[chartId])
......@@ -16,11 +15,12 @@ numBars = (chartId) ->
margin = (chartId) ->
chartWidth(chartId) / 50
speed = -> 500
speed = -> 200
barThickness = (chartId) ->
Math.floor(chartHeight(chartId) / numBars(chartId)) - 2
x = (chartId) ->
x_scale = (chartId) ->
d3.scale.linear()
.domain [
0,
......@@ -30,38 +30,79 @@ x = (chartId) ->
]
.range [ 0, (chartWidth(chartId) / 2) - (margin(chartId) * 2) ]
y = (chartId, val) ->
y_scale = (chartId) ->
d3.scale.linear()
.domain(d3.extent valuesFromFrame(chartId, 0), (d) -> d.age)
.range [ 0, chartHeight(chartId) ]
x_axis = (chartId) ->
d3.svg.axis()
.scale x(chartId)
.scale x_scale(chartId)
.orient "bottom"
.ticks 5
y_axis = d3.svg.axis()
.orient "left"
.ticks 5
y_axis = (chartId) ->
d3.svg.axis()
.scale y_scale(chartId)
.orient "left"
.ticks 5
updateInformation = (chartId, data) ->
# FIXME: Add a delay to reduce flicker
if not data
data = d3.select(chartId + " svg.chart g.selected").data()
d3.select chartId + " div.dataDetails"
.html JSON.stringify(data)
hoverBar = (chartId) ->
(data, index) ->
d3.selectAll chartId + " svg.chart g.valuepoint"
.filter (p) -> p.birthyear is data.birthyear
.classed "hovered", true
updateInformation chartId, data
unhoverBar = (chartId) ->
(data, index) ->
d3.selectAll chartId + " svg.chart g.valuepoint"
.classed "hovered", false
updateInformation chartId
selectBar = (chartId) ->
# FIXME: Need to store selected status in actual data, or state is lost when
# year scrolls out of view
(data, index) ->
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
addBar = (newBar, chartId) ->
barGroup = newBar.append "g"
.attr "class", "valuepoint"
.attr "transform", (d, i) ->
"translate(0, " + (y(chartId)(i) + 1) + ")"
"translate(0, " + (y_scale(chartId)(i) + 1) + ")"
.on "mouseover", hoverBar(chartId)
.on "mouseout", unhoverBar(chartId)
.on "click", selectBar(chartId)
barGroup.append "rect"
.attr "class", "right"
.attr "x", chartWidth(chartId) / 2 + margin(chartId)
.attr "width", (d) -> x(chartId)(d.rvalue)
.attr "width", (d) -> x_scale(chartId)(d.rvalue)
.attr "height", barThickness chartId
barGroup.append "text"
.attr "x", chartWidth(chartId) / 2
.text (d) -> d.birthyear
barGroup.append "rect"
.attr "class", "left"
.attr "x", (d) -> (chartWidth(chartId) / 2) -
x(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> x(chartId)(d.lvalue)
x_scale(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> x_scale(chartId)(d.lvalue)
.attr "height", barThickness(chartId)
valuesFromFrame = (chartId, frameNum) ->
......@@ -71,16 +112,19 @@ valuesFromFrame = (chartId, frameNum) ->
updateChart = (chartId, frameNum) ->
data = valuesFromFrame chartId, frameNum
chart = d3.select chartId + " svg.chart"
xAxesGroup = chart.select "xAxesGroup"
yAxesGroup = chart.select "yAxesGroup"
valuepoints = chart.selectAll "g.valuepoint"
.data data, (d) -> d.birthyear
label = chart.select "g div.yearLabel"
.html (d) -> data.year
valuepoints.transition()
.attr "transform", (d, i) ->
"translate(0, " + (y(chartId)(i) + 1) + ")"
"translate(0, " + (y_scale(chartId)(i) + 1) + ")"
xAxesGroup.call x_axis(chartId)
yAxesGroup.call(y_axis(chartId))
addBar valuepoints.enter(), chartId
......@@ -106,12 +150,13 @@ nextFrame = (chartId, frameNum) ->
#are ignored), each element in these arrays should contain an object that has
#the value property.
#
#The conteinarId is just a string identfying a div within wich the graph should
#The containerId is just a string identfying a div within wich the graph should
#be built. There can be several simultanious graphs
setupChart = (chartId, data) ->
if data
completeData[chartId] = data
lodash.forEach (lodash.keys completeData), (id) ->
d3.select id
.html ""
......@@ -125,10 +170,18 @@ setupChart = (chartId, data) ->
nextFrame id, 0
axisGroup = svg.append "g"
.attr "class", "xAxesGroup"
axesGroup = svg.append "g"
.attr "class", "yAxesGroup"
.attr "transform",
"translate("+ chartWidth(id) / 2 + "," + margin(id) + ")"
"translate("+ chartWidth(id) / 2 + "," + margin(id) + ")"
d3.select chartId
.append "div"
.attr "class", "yearLabel"
d3.select chartId
.append "div"
.attr "class", "dataDetails"
window.onresize = setupChart
......
......@@ -6,10 +6,33 @@
margin: 1em;
}
.chart rect.right {
fill: maroon;
}
.chart {
pointer-events: all;
rect.right {
fill: #EBA487;
}
rect.left {
fill: #87CEEB;
}
.valuepoint text {
visibility: hidden;
text-anchor: middle;
dominant-baseline: central;
fill: #888;
}
g.hovered,
g.selected {
text {
visibility: visible;
}
.chart rect.left {
fill: teal;
rect {
stroke-width: 1px;
stroke: red;
}
}
}
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