function(data) {

var fns = {
  extentOf: function(data, axis) {
    var values    = d3.values(data),
        flatVals  = Array.prototype.concat.apply([], values),
        axisVals  = flatVals.map(function(o) { return o[axis]; });

    return d3.extent(axisVals);
  }
};

var margin     = { top: 40, right: 80, bottom: 40, left: 40 },
    width      = 400,
    height     = 400,
    svgWidth   = width + margin.right + margin.left,
    svgHeight  = height + margin.top + margin.bottom;

var svg = d3.select("body").append("svg")
            .attr('viewBox', "0 -10 " +svgWidth+ " " +svgHeight+ "")
            .attr("width", svgWidth)
            .attr("height", svgHeight)
            .style("font-family", "Arial")
            .style("font-size", "14px")
            .style("fill", "none")
            .style("background-color", "#ffffff")
          .append('g')
            .attr('transform', 'translate(' +margin.left+ ',' +margin.top+ ')')
            .style("fill", "none");

var x     = d3.scale
              .linear()
              .range([0, width])
              .domain(fns.extentOf(data, 'x')),
    y     = d3.scale
              .linear()
              .range([height, 0])
              .domain(fns.extentOf(data, 'y')),
    color = d3.scale
              .ordinal()
              .range(["#428bca", "#5cb85c", "#5bc0de", "#f0ad4e", "#d9534f"]);

var xAxis  = d3.svg
               .axis()
               .scale(x)
               .orient('bottom')
               .tickSize(-height),
    yAxis  = d3.svg
               .axis()
               .scale(y)
               .orient('left')
               .tickSize(width),
    line   = d3.svg
               .line()
               .interpolate('basis')
               .x(function(d) { return x(d.x); })
               .y(function(d) { return y(d.y); });

var xAxisElement = svg.append('g')
                   .attr('class',      'x axis')
                   .attr('transform',  "translate(0," +height+ ")")
                   .call(xAxis);

var yAxisElement = svg.append('g')
                   .attr('class', 'y axis')
                   .attr("transform", "translate(" +width+ ",0)")
                   .call(yAxis);

var lineElements = svg.selectAll('.line')
                     .data(d3.entries(data))
                   .enter().append('g')
                     .attr('class', 'line');

lineElements.append('path')
  .attr('class', 'line')
  .attr('d', function(d) { return line(d.value) })
  .style('stroke-width', '2px')
  .style('opacity',  '0.3')
  .style('stroke', function(d) { return color(d.key); });

lineElements.append('text')
  .datum(function(d) { return { name: d.key, value: d.value[d.value.length - 1] }; })
  .attr('transform', function(d) { return "translate(" +x(d.value.x)+ "," +y(d.value.y)+ ")"; })
  .attr('x', 3)
  .attr('dy', '5px')
  .style('fill', '#333333')
  .text(function(d) { return d.name; });

// axis styling
xAxisElement.selectAll('line')
  .style('fill', 'none')
  .style('stroke', 'black')
  .style('stroke-width', '1px')
  .style('stroke-opacity', 0.1)
  .style('shape-rendering', 'geometricPrecision');

xAxisElement.selectAll('text')
  .attr('dy', '20px')
  .style('fill', '#333333');

yAxisElement.selectAll('line')
  .style('fill', 'none')
  .style('stroke', 'black')
  .style('stroke-width', '1px')
  .style('stroke-opacity', 0.1)
  .style('shape-rendering', 'geometricPrecision');

yAxisElement.selectAll('text')
  .attr('dx', '-10px')
  .style('fill', '#333333');

}