So I have created a D3 Stacked Bar Chart, but I can't seem to figure out how to make the values of the bars show up on the chart. I can display Text "Sample" to each bar, but I can't figure out how to retrieve the data. I tried using this... .text(function(d) {return d.total; }) but with no luck.
jfiddle here.... http://jsfiddle.net/rasweat/D3ErQ/1/
<script src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript">
var margin = {top: 60, right: 20, bottom: 100, left: 100},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width-100], .1); //width-100 to make room for the legend.
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal()
//.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
.range(["#1f77b4", "#ff7f0e","d62728"]); //blue, orange, red
//color code for Progress Report
//.range(["#00FFFF","#00FF00","#990099","#FF0000","#FFFF00"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("#area_progress_report").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Get the data
//var data = [{"Commodity":"Base","num_complete_print":"3","num_incomplete_print":15},{"Commodity":"Blade","num_complete_print":"1","num_incomplete_print":53},{"Commodity":"DTE","num_complete_print":"1","num_incomplete_print":17},{"Commodity":"HUB","num_complete_print":"0","num_incomplete_print":"18"},{"Commodity":"MH","num_complete_print":"0","num_incomplete_print":"18"},{"Commodity":"Mid","num_complete_print":"0","num_incomplete_print":18},{"Commodity":"Top","num_complete_print":"0","num_incomplete_print":18}];
var data = <?php echo json_encode($dataset_progress001); ?>;
//alert(data);
//d3.csv("data.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Commodity"; }));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.ages[d.ages.length - 1].y1;
});
//use this to sort the bars from largest to smallest
//data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.Commodity; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text") //added this line through rotate to change orientation of x axis
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-1em")
.attr("transform", function(d) {
return "rotate(-90)"
});
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
// .text("Population");
//grid lines y.ticks controls the number of lines
svg.selectAll("line.horizontalGrid").data(y.ticks(10)).enter()
.append("line")
.attr(
{
"class":"horizontalGrid",
"x1" : 0,
"x2" : width-60,
"y1" : function(d){ return y(d);},
"y2" : function(d){ return y(d);},
"fill" : "none",
"shape-rendering" : "crispEdges",
"stroke" : "grey",
"stroke-width" : "1px"
});
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d.Commodity) + ",0)"; });
state.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
//Added y label 10/28
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", -60)
.attr("x",-70)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Number Of Components");
//Add Title
svg.append("text")
.attr("x", (width/2) )//(width / 2))
.attr("y", -20) //0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "20px")
.style("text-decoration", "underline")
.text("Inspection Progress Report");
state.selectAll("text")
.data(function(d) { return d.ages; })
.enter()
.append("text")
.attr("x", x.rangeBand()/2)
.attr("y", function(d, i) { return y(d.y1) + (y(d.y0) - y(d.y1))/2; })
.style("text-anchor", "middle")
//.text(function(d) {return d.total; })
.text("sample")
</script>
You have to change this line
.data(function(d) { return d.ages; })
to actually give data() your data. If you have an array with all the ages named ages, then it would be:
.data(ages)
The d argument in function(d) references nothing since data() is actually the method where you input your data.
Related
I am new to D3.js and got one issue.
I tried to create bar using some sample data.
var data = [{"date":"Chennai","value":"53"},
{"date":"Banglore","value":"165"},
{"date":"Pune","value":"269"},
{"date":"Ban","value":"344"},
{"date":"Hyderabad","value":"376"},
{"date":"HYd","value":"410"},
{"date":"Gurugram","value":"421"},
{"date":"Che","value":"376"}];
Able to display Strings(Ex: "Bangalore" on X-axis and values on Y-axis but I need to display Strings on Y-axis and values on X-axis.
var margin = {top: 20, right: 20, bottom: 70, left: 60},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var y = d3.scale.ordinal().rangeRoundBands([height,0]);
var x = d3.scale.linear().range([0, width]);
var data = [{"date":"Chennai","value":"53"},
{"date":"Banglore","value":"165"},
{"date":"Pune","value":"269"},
{"date":"Ban","value":"344"},
{"date":"Hyderabad","value":"376"},
{"date":"HYd","value":"410"},
{"date":"Gurugram","value":"421"},
{"date":"Kadapa","value":"405"},
{"date":"Che","value":"376"}]
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(12);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
data.forEach(function(d) {
d.value = +d.value;
});
y.domain(data.map(function(d) { return d.date; }));
x.domain([0, d3.max(data, function(d) { return d.value; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)" );
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return x(d.value); })
.attr("width", function(d) { return width - x(d.value); })
.attr("y", function(d) { return y(d.date); })
.attr("height", y.rangeBand())
.attr("title",function(d) { return y(d.value); });
svg.selectAll("bar")
.data(data)
.enter()
.append("text")
.attr("class","label")
.attr("y", (function(d) { return y(d.date) + y.rangeBand()/2 ; } ))
.attr("x", function(d) { return x(d.value) + 1; })
.attr("dx", ".75em")
.text(function(d) { return d.date; });
When I tried with the above code bars are coming as Horizontal but need as vertical.
Please help me on this.
Thanks in Advance.
You should be more accurate with your "height/x/y" manipulations :)
D3 uses coordinate space where x=0 and y=0 coordinates fall on the bottom left.
I've changed some of your code:
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x",function(d) { return x(d.value); })
.attr("width", y.rangeBand())
.attr("y", function(d) { return height - y(d.date); })
.attr("height", function(d) { return y(d.date); })
.attr("title",function(d) { return y(d.value); });
and I've got the result
Bars are in the right places.
I believe you can figure out with titles by your own, if no - you know what to do
ps: http://jsfiddle.net/om42ts61/
Since the values are dynamically appended it is better to use y-axis for the values.
I want to swap X and Y axis in my D3 stacked bar chart. The current X axis should be Y axis with the group names aligned at 180 degrees. Current Y axis should be X axis rotated by -60 degrees. The text size should be 15pt for both axis ticks and labels. How can I do it for my data?
Group,Field1,Field2
Title 1 data,44983,14605
Title 2 data,23524,81334
Title 3 data,15289,37347
Code:
<!DOCTYPE html>
<style>
.axis .domain {
display: none;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 60, bottom: 120, left: 80},
width = 700- margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#ff7f0e","#337ab7"]);
d3.csv("data.csv", function(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}, function(error, data) {
if (error) throw error;
var keys = data.columns.slice(1);
data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.Group; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
z.domain(keys);
g.append("g")
.selectAll("g")
.data(d3.stack().keys(keys)(data))
.enter().append("g")
.attr("fill", function(d) { return z(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.data.Group); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Total de trucades")
.attr("font-size", 15);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("font-size", 15)
.attr("y", 12)
.attr("x", 11)
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-60)")
.style("text-anchor", "end");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 15)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { return d; });
});
</script>
I am drawing charts with d3 4.2.2 in my Angular2 project. I created a multi series line chart and added zoom and drag properties. Now the chart is zooming on mouse scroll event but it zoom only X-axis and Y-axis. And it can be dragged only X-axis & Y-axis but chart cannot be dragged. When I do zooming or dragging those events are applying only to the two axis es but not for the chart. Following is what I am doing with my code.
// set the dimensions and margins of the graph
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var zoom = d3.zoom()
.scaleExtent([1, 5])
.translateExtent([[0, -100], [width + 90, height + 100]])
.on("zoom", zoomed);
var svg = d3.select(this.htmlElement).append("svg")
.attr("class", "line-graph")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("pointer-events", "all")
.call(zoom);
var view = svg.append("rect")
.attr("class", "view")
.attr("x", 0.5)
.attr("y", 0.5)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("fill", "#EEEEEE")
.style("stroke", "#000")
.style("stroke-width", "0px");
// parse the date / time
var parseDate = d3.timeParse("%Y-%m-%d");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var z = d3.scaleOrdinal(d3.schemeCategory10);
// define the line
var line = d3.line()
.x( (d) => {
return x(d.date);
})
.y( (d) => {
return y(d.lookbookcount);
});
z.domain(d3.keys(data[0]).filter(function (key) {
return key !== "date";
}));
// format the data
data.forEach( (d)=> {
d.date = parseDate(d.date);
});
var lookBookData = z.domain().map(function (name) {
return {
name: name,
values: data.map( (d) => {
return {date: d.date, lookbookcount: d[name], name: name};
})
};
});
x.domain(d3.extent(data, (d) => {
return d.date;
}));
y.domain([
d3.min([0]),
d3.max(lookBookData, (c) => {
return d3.max(c.values,
(d) => {
return d.lookbookcount;
});
})
]);
z.domain(lookBookData.map( (c) => {
return c.name;
}));
var xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1))
.tickFormat(d3.timeFormat("%d/%m"));
var yAxis = d3.axisLeft(y)
.ticks(10);
// Add the X Axis
var gX = svg.append("g")
.style("font", "14px open-sans")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
var gY = svg.append("g")
.style("font", "14px open-sans")
.attr("class", "axis axis--x")
.call(yAxis)
.style("cursor", "ns-resize");
// Add Axis labels
svg.append("text")
.style("font", "14px open-sans")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.text("Sales / Searches");
svg.append("text")
.style("font", "14px open-sans")
.attr("text-anchor", "end")
.attr("dx", ".71em")
.attr("transform", "translate(" + width + "," + (height +
(margin.bottom)) + ")")
.text("Departure Date");
var chartdata = svg.selectAll(".chartdata")
.data(lookBookData)
.enter().append("g")
.attr("class", "chartdata");
chartdata.append("path")
.classed("line", true)
.attr("class", "line")
.attr("d", function (d) {
return line(d.values);
})
.style("fill", "none")
.style("stroke", function (d) {
return z(d.name);
})
.style("stroke-width", "2px");
chartdata.append("text")
.datum(function (d) {
return {
name: d.name, value: d.values[d.values.length - 1]
};
})
.attr("transform", function (d) {
return "translate(" +
x(d.value.date) + "," + y(d.value.lookbookcount) + ")";
})
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "14px open-sans")
.text(function (d) {
return d.name;
});
// add the dots with tooltips
chartdata.selectAll(".circle")
.data(function (d) {
return d.values;
})
.enter().append("circle")
.attr("class", "circle")
.attr("r", 4)
.attr("cx", function (d) {
console.log(d);
return x(d.date);
})
.attr("cy", function (d) {
return y(d.lookbookcount);
})
.style("fill", function (d) { // Add the colours dynamically
return z(d.name);
});
function zoomed() {
view.attr("transform", d3.event.transform);
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
}
function resetted() {
svg.transition()
.duration(750)
.call(zoom.transform, d3.zoomIdentity);
}
Any suggestions would be highly appreciated.
Thank you
i have following code
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.value = +d.value;
});
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#bar").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var yAxisRight = d3.svg.axis().scale(y1)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.avg_return); });
x.domain(data.map(function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
y1.domain([0, d3.max(data, function(d) {
return d.avg_return; })]);
/*for x axis*/
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)" );
/*for y axis*/
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value ($)");
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill",function(d) { if (d.value >= 400) {return "green"} else if (d.value<=300) { return "red" } else { return 'yellow'} })
.attr("x", function(d) { return x(d.date); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
svg.append('path')
.datum(data)
.attr('class', 'sparkline')
.attr('d', line);
svg.append('circle')
.attr('class', 'sparkcircle')
.attr('cx', x(data[0].date))
.attr('cy', y1(data[0].avg_return))
.attr('r', 2.5);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + " ,0)")
.style("fill", "red")
.call(yAxisRight);
});
my csv file contains following data
date,value,avg_return
a,530,70
b,490,91
c,450,92
d,400,78
e,370,50
f,340,56
D,300,32
h,250,96
a9,200,73
i have use color gradient for this colors(#D73027,#FFFFBF,#1A9850).
how to use color gradient in bar chart..i have to sett colors based on the (value column)
From here : How to customize the color scale in a D3 line chart?
I have created your custom color scale :
var color = d3.scale.ordinal()
.range(["#D73027", "#FFFFBF" , "#1A9850"]);
And edited how you fill your bars :
.style("fill", function(d,i){
return color(i); //pass i to scale
})
Notice I pass i to the color scale. If there aren't enough colors in the scale it will wrap round and start again.
Working fiddle : https://jsfiddle.net/thatOneGuy/snjb4q92/2/
Edit
You say you want 'boundaries'. So what I have done, if its between 0 and 300, take first color, 300 and 400 takes second and 400 and 600 takes third.
Logic :
.style("fill", function(d, i) {
if (d.value >= 0 && d.value < 300) {
return color(0);
} else if (d.value >= 300 && d.value < 400) {
return color(1);
} else if (d.value >= 400 && d.value < 600) {
return color(2);
}
})
Updated fiddle : https://jsfiddle.net/thatOneGuy/snjb4q92/6/
Can I draw a stacked column chart with a line in one graph using D3?
Here is the example:
Any help is appreciated.
I have merged following to achieve your Visualization:
http://bl.ocks.org/d3noob/e34791a32a54e015f57d
http://bl.ocks.org/mbostock/3886208
Make scales and axis:
//x axis is ordinal
var x = d3.scale.ordinal()
.rangeRoundBands([0, width-150], .1);
//y left axis is linear for head count
var y = d3.scale.linear()
.rangeRound([height, 0]);
//this scale is for the average
y1 = d3.scale.linear().range([height, 0]).domain([0,100]);//marks can have min 0 and max 100
// y axis right for average marks.
var yAxisRight = d3.svg.axis().scale(y1)
.orient("right").ticks(5);
Then make the rectangle and line chart like this(Comments added):
//filter out name and average
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Name" && key !=="Average"; }));
data.forEach(function(d) {
var y0 = 0;
d.group = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.group[d.group.length - 1].y1;
});
x.domain(data.map(function(d) { return d.Name; }));
//stores toltal headcount
y.domain([0, d3.max(data, function(d) { return d.total; })]);
//line function for averageLine
var averageline = d3.svg.line()
.x(function(d) { return x(d.Name) + x.rangeBand()/2; })
.y(function(d) { return y1(d.Average); });
//this will make the y axis to the right
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width-100) + " ,0)")
.style("fill", "red")
.call(yAxisRight);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Population");
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d.Name) + ",0)"; });
//adding the rect for group chart
state.selectAll("rect")
.data(function(d) { return d.group; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
svg.append("path") // Add the valueline path.
.attr("d", averageline(data));
//add the legend
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
EDIT
Yes you can make the line curvy by interpolate:
var averageline = d3.svg.line()
.x(function(d) { return x(d.Name) + x.rangeBand()/2; })
.y(function(d) { return y1(d.Average); }).interpolate("basis");
Read this
Working code here
Hope this helps!