var svg = d3.select("svg");

var data = tributary.pics.data.children
.sort(function(a,b) {
  return a.data.score - b.data.score; // first - second yields ascending
})
;

// prepare to visualize

var maxScore = d3.max(data, function (d) { return d.data.score });
var chartHeight = 400;

var yScale = d3.scale.linear()
.domain([0, maxScore])
.range([500,0]) // circles
.range([0, chartHeight])
;

var xScale = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([0,500], 0.5)
;

var yScaleLine = d3.scale.linear()
.domain([0, maxScore])
.range([chartHeight,0])
;

var line = d3.svg.line()
.x(function (d,i) { return xScale(i); })
.y(function (d,i) { return yScaleLine(d.data.score); })
.interpolate('cardinal')
;

var g = svg.append('g')
.attr('transform', 'translate(27,29)')
;

var circles = g.selectAll('circle')
 .data(data)
;

var bars = g.selectAll('rect')
.data(data)
;

bars.enter()
.append('rect')
.attr({
//  x: function (d,i) { return xScale(i); },
  x: function (d,i) { return xScale(i); },
  y: function (d,i) { return chartHeight - yScale(d.data.score) },
  width: xScale.rangeBand(),
  height: function (d,i) { return yScale(d.data.score) }
})
;

g.append('path') // tight to the bar chart
.attr('d', line(data))
.style({
  fill: 'none',
  stroke: '#000'
})
;

/*
svg.append('path')
.attr('d', line(data))
.style({
  fill: 'none',
  stroke: '#000'
})
;
*/

/*
circles.enter()
.append('circle')
.attr({
  cx: function (d, i) { return 50 + i * 15; },
  cy: function (d, i) { return yScale(d.data.score); },
  r: 3
})
.on('mouseover', function (d) { console.log(d.data.score); })
;
*/