Display metadata for selected/hovered birthyear

src/app/main.coffee

@@ -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)
 

src/app/timebars.coffee

@@ -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
 

src/style/timebars.scss

+
+@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;
+}
+

www/index.html

@@ -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"
         }
       };