Commit c082ad2d authored by Kjetil Thuen's avatar Kjetil Thuen

Display metadata for selected/hovered birthyear

parent 451e5a0c
......@@ -7,7 +7,7 @@ window.nesstartimebars = {}
window.nesstartimebars.main = (containerId, dataDesc) ->
nesstarloader.reloadNesstarData( (data) ->
timebars.setupChart containerId, data
timebars.setupChart containerId, data, dataDesc.display
currentFrame = timebars.nextFrame containerId, currentFrame
, dataDesc)
......
......@@ -33,26 +33,48 @@ x_scale = (chartId) ->
y_scale = (chartId) ->
d3.scale.linear()
.domain(d3.extent valuesFromFrame(chartId, 0), (d) -> d.age)
.range [ 0, chartHeight(chartId) ]
.range [ 0, chartHeight chartId ]
x_axis = (chartId) ->
d3.svg.axis()
.scale x_scale(chartId)
.scale x_scale chartId
.orient "bottom"
.ticks 5
y_axis = (chartId) ->
d3.svg.axis()
.scale y_scale(chartId)
.scale y_scale chartId
.orient "left"
.ticks 5
prepareMetadataDiv = (chartId, data, mapping) ->
if data
fieldMapping = mapping or {
birthyear: "birthyear",
left: "lvalue",
right: "rvalue"
}
_results = ["<dl> "]
for own field, name of fieldMapping
_results.push "<dt>"
_results.push completeData[chartId].displayDetails[field + "label"]
_results.push "</dt>"
_results.push "<dd>"
_results.push data[name]
_results.push "</dd>"
_results.push "</dl>"
_results.join ""
updateInformation = (chartId, data) ->
# FIXME: Add a delay to reduce flicker
if not data
data = d3.select(chartId + " svg.chart g.selected").data()
data = d3.select(chartId + " svg.chart g.selected").data()[0]
d3.select chartId + " div.dataDetails"
.html JSON.stringify(data)
.html prepareMetadataDiv chartId, data
hoverBar = (chartId) ->
(data, index) ->
......@@ -84,15 +106,16 @@ addBar = (newBar, chartId) ->
.attr "class", "valuepoint"
.attr "transform", (d, i) ->
"translate(0, " + (y_scale(chartId)(i) + 1) + ")"
.on "mouseover", hoverBar(chartId)
.on "mouseout", unhoverBar(chartId)
.on "click", selectBar(chartId)
.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_scale(chartId)(d.rvalue)
.attr "height", barThickness chartId
.attr "fill", completeData[chartId].displayDetails.rightcolor
barGroup.append "text"
.attr "x", chartWidth(chartId) / 2
......@@ -103,7 +126,8 @@ addBar = (newBar, chartId) ->
.attr "x", (d) -> (chartWidth(chartId) / 2) -
x_scale(chartId)(d.lvalue) - margin(chartId)
.attr "width", (d) -> x_scale(chartId)(d.lvalue)
.attr "height", barThickness(chartId)
.attr "height", barThickness chartId
.attr "fill", completeData[chartId].displayDetails.leftcolor
valuesFromFrame = (chartId, frameNum) ->
frameIndexes = lodash.keys(completeData[chartId])
......@@ -117,14 +141,15 @@ updateChart = (chartId, frameNum) ->
valuepoints = chart.selectAll "g.valuepoint"
.data data, (d) -> d.birthyear
label = chart.select "g div.yearLabel"
.html (d) -> data.year
label = d3.select chartId + " span.yearLabel"
.html completeData[chartId].displayDetails.name + " " +
lodash.keys(completeData[chartId])[frameNum]
valuepoints.transition()
.attr "transform", (d, i) ->
"translate(0, " + (y_scale(chartId)(i) + 1) + ")"
yAxesGroup.call(y_axis(chartId))
yAxesGroup.call(y_axis chartId)
addBar valuepoints.enter(), chartId
......@@ -150,11 +175,24 @@ nextFrame = (chartId, frameNum) ->
#are ignored), each element in these arrays should contain an object that has
#the value property.
#
#The containerId is just a string identfying a div within wich the graph should
#The chartId is the id attribute of a div within wich the graph should
#be built. There can be several simultanious graphs
setupChart = (chartId, data) ->
#
#displayDetails contain stuff like labels and colors
setupChart = (chartId, data, displayDetails) ->
if data
completeData[chartId] = data
completeData[chartId].displayDetails = displayDetails or {
name: "Timebars",
leftsymbol: "fa fa-female",
rightsymbol: "fa fa-male",
leftlabel: "Women",
rightlabel: "Men",
leftcolor: "#EBA487",
rightcolor: "#87CEEB",
yearlabel: "Year",
birthyearlabel: "Birthyear"
}
lodash.forEach (lodash.keys completeData), (id) ->
......@@ -175,13 +213,33 @@ setupChart = (chartId, data) ->
.attr "transform",
"translate("+ chartWidth(id) / 2 + "," + margin(id) + ")"
d3.select chartId
metadata = d3.select chartId
.append "div"
.attr "class", "metaData"
metadata.append "span"
.attr "class", "yearLabel"
.data data
metadata.append "div"
.attr "class", "dataDetails"
d3.select chartId
.append "div"
.attr "class", "dataDetails"
.attr "class", "leftLabel"
.html "<i class='" +
completeData[chartId].displayDetails.leftsymbol +
"'></i> " +
completeData[chartId].displayDetails.leftlabel
d3.select chartId
.append "div"
.attr "class", "rightLabel"
.html "<i class='" +
completeData[chartId].displayDetails.rightsymbol +
"'></i> " +
completeData[chartId].displayDetails.rightlabel
window.onresize = setupChart
......
@mixin rounded($radius: 0.5em) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
#main {
margin-top: 2em;
}
......@@ -6,17 +13,13 @@
margin: 1em;
}
div.chartContainer {
position: relative;
}
.chart {
pointer-events: all;
rect.right {
fill: #EBA487;
}
rect.left {
fill: #87CEEB;
}
.valuepoint text {
visibility: hidden;
text-anchor: middle;
......@@ -36,3 +39,34 @@
}
}
}
div.metaData {
@include rounded();
position: absolute;
left: 1em;
top: 1em;
background: rgba(0.2, 0.2, 0.2, 0.6);
padding: 0.5em;
color: #fff;
display: inline;
span.yearLabel {
font-size: 150%;
}
}
div.leftLabel {
font-size: 200%;
position: absolute;
left: 1em;
bottom: 1em;
}
div.rightLabel {
font-size: 200%;
position: absolute;
right: 1em;
bottom: 1em;
text-align: right;
}
......@@ -10,7 +10,7 @@
</head>
<body>
<section id="main">
<div id="content"></div>
<div class="chartContainer" id="content"></div>
<button id="playBtn" class="btn btn-primary" onclick="window.nesstartimebars.toggleAnimation('#content')">
<i class="fa fa-play"></i>
</button>
......@@ -45,6 +45,16 @@
"members": ["12"]
}
]
},
display: {
name: "Befolkningsframskrivning for Hordaland, fordelt på kjønn",
leftsymbol: "fa fa-female",
rightsymbol: "fa fa-male",
leftlabel: "Kvinner",
rightlabel: "Menn",
leftcolor: "#EBA487",
rightcolor: "#87CEEB",
birthyearlabel: "Fødselsår"
}
};
......
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