Function is not correctly plotted + cosmetic questions d3js - javascript

I have two questions. I am trying to plot a function with d3.js. I have already come far, but I have two problems.
My code currently; https://jsfiddle.net/v0du66ey/
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 50, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
padding = 50;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
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 + ")");
var data = [];
for (var k = 0; k < 100; k++) {
data.push({x: k, y: k});
}
var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
// Define x domain
x.domain([-10, 10]);
// Define y domain
y.domain([-10, 10]);
// Add x axis
svg.append("g")
.attr("class","x axis")
.attr("transform","translate(0," + height + ")")
.call(xAxis)
// Add y axis
svg.append("g")
.attr("class","y axis")
.call(yAxis);
// Add x grid
svg.append("g")
.attr("class","grid")
.attr("transform","translate(0," + height + ")")
.call(xAxis
.tickSize(-height,-height,0)
.tickFormat("")
);
// Add y grid
svg.append("g")
.attr("class","grid")
.call(yAxis
.tickSize(-width,-width,0)
.tickFormat("")
);
// Add x axis label
svg.append("text")
.attr("transform", "translate(" + (width / 2) + "," + (height + margin.bottom) + ")")
.style("font-size","15")
.style("text-anchor", "middle")
.text("x axis");
// Add y axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y",0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("font-size","15")
.style("text-anchor", "middle")
.text("y axis");
svg.append("path")
.attr("class", "line")
.attr("d",line(data));
</script>
As you can see the function which I have defined, y = x. Is not correctly plotted along its entire domain. It goes for x from -10 to approx 2.5 and y from 10 to approx 7.5. What goes wrong here? I do not namely see it.
Furthermore I have a cosmetic question. I am trying to create a border around the whole plot on the axis and trying to get the ticks bars to point to the inside of the graph instead of outside. In other words, I want to have it more looking like, a Matlab plot,


About cosmetic question: you need to set innerTickSize(), outerTickSize() and tickPadding() on your axises with a negative numbers.
About main question:
as far as you have scales you should set line's x and y data as a result of scale functions.
so your line code will look like this:
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); })
.interpolate("linear");
Here is jsfiddle with updated sample http://jsfiddle.net/n3Lndkum/

Related

Is there a way to parse times and be able to plot them directly using javascript and d3?

How can I make a scatterplot plotting time of day against date, which looks like this in using javascript and d3? The problem I am having is formatting the time of day data and axis. Input of the date is in the y column format below.
Sample data:
Day Time
5-Feb-16 21:35:00
5-Feb-16 19:15:00
11-Dec-15 21:42:00
21-Jul-15 11:00:00
Code below inspired by:
http://bl.ocks.org/d3noob/38744a17f9c0141bcd04
What I have so far:
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.Day); })
.y(function(d) { return y(d.Time); });
// Adds the svg canvas
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 + ")");
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
console.log(d.Time);
d.Day = parseDate(d.Day);
d.Time = +d.Time;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.Day; }));
y.domain([0, d3.max(data, function(d) { return d.Time; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.Day); })
.attr("cy", function(d) { return y(d.Time); });
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
My output:
Is there a way to parse times and be able to plot them directly using javascript and d3? Or do I need to convert them to decimal numbers like 12:30 = 12.5 to plot them?

If you're using time in the y scale, you should parse the Time column as well:
var parseDate = d3.time.format("%d-%b-%y").parse;
var parseTime = d3.time.format("%H:%M:%S").parse;
Here is your code with just 4 points (the ones of the CSV you copy/pasted in your question):
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 80
},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
var parseTime = d3.time.format("%H:%M:%S").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.time.scale().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left");
// Define the line
var valueline = d3.svg.line()
.x(function(d) {
return x(d.Day);
})
.y(function(d) {
return y(d.Time);
});
// Adds the svg canvas
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 + ")");
// Get the data
var data = d3.csv.parse(d3.select("#csv").text());
data.forEach(function(d) {
d.Day = parseDate(d.Day);
d.Time = parseTime(d.Time);
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.Day;
}));
y.domain([parseTime("00:00:01"), parseTime("23:59:59")]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) {
return x(d.Day);
})
.attr("cy", function(d) {
return y(d.Time);
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
pre {
display: none;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
<script src="//d3js.org/d3.v3.min.js"></script>
<pre id="csv">Day,Time
5-Feb-16,21:35:00
1-Feb-16,19:15:00
11-Dec-15,21:42:00
21-Jul-15,11:00:00</pre>

d3.js x axis specific number of string ticks

I am trying to generate a area chart with a x axis set to fixed number of ticks (10) where each tick is a string value from the data set used for the chart. I can't figure out what I am doing wrong here:
<!DOCTYPE html>
<meta charset="utf - 8">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
body {
font: 10px Arial;
}
.axis path {
fill: none;
stroke: grey;
shape-rendering: crispEdges;
}
.axis text {
font-family: Arial;
font-size: 10px;
}
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
</head>
<div class="row">
<div class="col-md-12" id="areaareaChart1" align="center">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
function renderAreaChart() {
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 1600 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangePoints([0, width], 1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(10)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function (d) { return x(d.name); })
.y(function (d) { return y(d.value); });
var area = d3.svg.area()
.x(function (d) { return x(d.name); })
.y0(height)
.y1(function (d) { return y(d.value); });
var svg = d3.select("#areaareaChart1").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 data = [{"name":"23-May-08","value":181.17},{"name":"27-May-08","value":186.43},{"name":"28-May-08","value":187.01},{"name":"29-May-08","value":186.69},{"name":"30-May-08","value":188.75},{"name":"2-Jun-08","value":186.1},{"name":"3-Jun-08","value":185.37},{"name":"4-Jun-08","value":185.19},{"name":"5-Jun-08","value":189.43},{"name":"6-Jun-08","value":185.64},{"name":"9-Jun-08","value":181.61},{"name":"10-Jun-08","value":185.64},{"name":"11-Jun-08","value":180.81},{"name":"12-Jun-08","value":173.26},{"name":"13-Jun-08","value":172.37},{"name":"16-Jun-08","value":176.84},{"name":"17-Jun-08","value":181.43},{"name":"18-Jun-08","value":178.75},{"name":"19-Jun-08","value":180.9},{"name":"20-Jun-08","value":175.27},{"name":"23-Jun-08","value":173.16},{"name":"24-Jun-08","value":173.25},{"name":"25-Jun-08","value":177.39},{"name":"26-Jun-08","value":168.26},{"name":"27-Jun-08","value":170.09},{"name":"30-Jun-08","value":167.44},{"name":"1-Jul-08","value":174.68},{"name":"2-Jul-08","value":168.18},{"name":"3-Jul-08","value":170.12},{"name":"7-Jul-08","value":175.16},{"name":"8-Jul-08","value":179.55},{"name":"9-Jul-08","value":174.25},{"name":"10-Jul-08","value":176.63},{"name":"11-Jul-08","value":172.58},{"name":"14-Jul-08","value":173.88},{"name":"15-Jul-08","value":169.64},{"name":"16-Jul-08","value":172.81},{"name":"17-Jul-08","value":171.81},{"name":"18-Jul-08","value":165.15},{"name":"21-Jul-08","value":166.29},{"name":"22-Jul-08","value":162.02},{"name":"23-Jul-08","value":166.26},{"name":"24-Jul-08","value":159.03},{"name":"25-Jul-08","value":162.12},{"name":"28-Jul-08","value":154.4},{"name":"29-Jul-08","value":157.08},{"name":"30-Jul-08","value":159.88},{"name":"31-Jul-08","value":158.95},{"name":"1-Aug-08","value":156.66},{"name":"4-Aug-08","value":153.23},{"name":"5-Aug-08","value":160.64},{"name":"6-Aug-08","value":164.19},{"name":"7-Aug-08","value":163.57},{"name":"8-Aug-08","value":169.55},{"name":"11-Aug-08","value":173.56},{"name":"12-Aug-08","value":176.73},{"name":"13-Aug-08","value":179.3},{"name":"14-Aug-08","value":179.32},{"name":"15-Aug-08","value":175.74},{"name":"18-Aug-08","value":175.39},{"name":"19-Aug-08","value":173.53},{"name":"20-Aug-08","value":175.84},{"name":"21-Aug-08","value":174.29},{"name":"22-Aug-08","value":176.79},{"name":"25-Aug-08","value":172.55},{"name":"26-Aug-08","value":173.64},{"name":"27-Aug-08","value":174.67},{"name":"28-Aug-08","value":173.74},{"name":"29-Aug-08","value":169.53},{"name":"2-Sep-08","value":166.19},{"name":"3-Sep-08","value":166.96},{"name":"4-Sep-08","value":161.22},{"name":"5-Sep-08","value":160.18},{"name":"8-Sep-08","value":157.92},{"name":"9-Sep-08","value":151.68},{"name":"10-Sep-08","value":151.61},{"name":"11-Sep-08","value":152.65},{"name":"12-Sep-08","value":148.94},{"name":"15-Sep-08","value":140.36},{"name":"16-Sep-08","value":139.88},{"name":"17-Sep-08","value":127.83},{"name":"18-Sep-08","value":134.09},{"name":"19-Sep-08","value":140.91},{"name":"22-Sep-08","value":131.05},{"name":"23-Sep-08","value":126.84},{"name":"24-Sep-08","value":128.71},{"name":"25-Sep-08","value":131.93},{"name":"26-Sep-08","value":128.24},{"name":"29-Sep-08","value":105.26},{"name":"30-Sep-08","value":113.66},{"name":"1-Oct-08","value":109.12},{"name":"2-Oct-08","value":100.1},{"name":"3-Oct-08","value":97.07},{"name":"6-Oct-08","value":98.14},{"name":"7-Oct-08","value":89.16},{"name":"8-Oct-08","value":89.79},{"name":"9-Oct-08","value":88.74},{"name":"10-Oct-08","value":96.8},{"name":"13-Oct-08","value":110.26},{"name":"14-Oct-08","value":104.08},{"name":"15-Oct-08","value":97.95},{"name":"16-Oct-08","value":101.89},{"name":"17-Oct-08","value":97.4},{"name":"20-Oct-08","value":98.44},{"name":"21-Oct-08","value":91.49},{"name":"22-Oct-08","value":96.87},{"name":"23-Oct-08","value":98.23},{"name":"24-Oct-08","value":96.38},{"name":"27-Oct-08","value":92.09},{"name":"28-Oct-08","value":99.91},{"name":"29-Oct-08","value":104.55},{"name":"30-Oct-08","value":111.04},{"name":"31-Oct-08","value":107.59},{"name":"3-Nov-08","value":106.96},{"name":"4-Nov-08","value":110.99},{"name":"5-Nov-08","value":103.3},{"name":"6-Nov-08","value":99.1},{"name":"7-Nov-08","value":98.24},{"name":"10-Nov-08","value":95.88},{"name":"11-Nov-08","value":94.77},{"name":"12-Nov-08","value":90.12},{"name":"13-Nov-08","value":96.44},{"name":"14-Nov-08","value":90.24},{"name":"17-Nov-08","value":88.14},{"name":"18-Nov-08","value":89.91},{"name":"19-Nov-08","value":86.29},{"name":"20-Nov-08","value":80.49},{"name":"21-Nov-08","value":82.58},{"name":"24-Nov-08","value":92.95},{"name":"25-Nov-08","value":90.8},{"name":"26-Nov-08","value":95},{"name":"27-Nov-08","value":95},{"name":"28-Nov-08","value":92.67},{"name":"1-Dec-08","value":88.93},{"name":"2-Dec-08","value":92.47},{"name":"3-Dec-08","value":95.9},{"name":"4-Dec-08","value":91.41},{"name":"5-Dec-08","value":94},{"name":"8-Dec-08","value":99.72},{"name":"9-Dec-08","value":100.06},{"name":"10-Dec-08","value":98.21},{"name":"11-Dec-08","value":95},{"name":"12-Dec-08","value":98.27},{"name":"15-Dec-08","value":94.75},{"name":"16-Dec-08","value":95.43},{"name":"17-Dec-08","value":89.16},{"name":"18-Dec-08","value":89.43},{"name":"19-Dec-08","value":90},{"name":"22-Dec-08","value":85.74},{"name":"23-Dec-08","value":86.38},{"name":"24-Dec-08","value":85.04},{"name":"25-Dec-08","value":85.04},{"name":"26-Dec-08","value":85.81},{"name":"29-Dec-08","value":86.61},{"name":"30-Dec-08","value":86.29},{"name":"31-Dec-08","value":85.35},{"name":"1-Jan-09","value":85.35},{"name":"2-Jan-09","value":90.75},{"name":"5-Jan-09","value":94.58},{"name":"6-Jan-09","value":93.02},{"name":"7-Jan-09","value":91.01},{"name":"8-Jan-09","value":92.7},{"name":"9-Jan-09","value":90.58},{"name":"12-Jan-09","value":88.66},{"name":"13-Jan-09","value":87.71},{"name":"14-Jan-09","value":85.33},{"name":"15-Jan-09","value":83.38},{"name":"16-Jan-09","value":82.33},{"name":"20-Jan-09","value":78.2},{"name":"21-Jan-09","value":82.83},{"name":"22-Jan-09","value":88.36},{"name":"23-Jan-09","value":88.36},{"name":"26-Jan-09","value":89.64},{"name":"27-Jan-09","value":90.73},{"name":"28-Jan-09","value":94.2},{"name":"29-Jan-09","value":93},{"name":"30-Jan-09","value":90.13},{"name":"2-Feb-09","value":91.51},{"name":"3-Feb-09","value":92.98},{"name":"4-Feb-09","value":93.55},{"name":"5-Feb-09","value":96.46},{"name":"6-Feb-09","value":99.72},{"name":"9-Feb-09","value":102.51},{"name":"10-Feb-09","value":97.83},{"name":"11-Feb-09","value":96.82},{"name":"12-Feb-09","value":99.27},{"name":"13-Feb-09","value":99.16},{"name":"17-Feb-09","value":94.53},{"name":"18-Feb-09","value":94.37},{"name":"19-Feb-09","value":90.64},{"name":"20-Feb-09","value":91.2},{"name":"23-Feb-09","value":86.95},{"name":"24-Feb-09","value":90.25},{"name":"25-Feb-09","value":91.16},{"name":"26-Feb-09","value":89.19},{"name":"27-Feb-09","value":89.31},{"name":"2-Mar-09","value":87.94},{"name":"3-Mar-09","value":88.37},{"name":"4-Mar-09","value":91.17},{"name":"5-Mar-09","value":88.84},{"name":"6-Mar-09","value":85.3},{"name":"9-Mar-09","value":83.11},{"name":"10-Mar-09","value":88.63},{"name":"11-Mar-09","value":92.68},{"name":"12-Mar-09","value":96.35},{"name":"13-Mar-09","value":95.93},{"name":"16-Mar-09","value":95.42},{"name":"17-Mar-09","value":99.66},{"name":"18-Mar-09","value":101.52},{"name":"19-Mar-09","value":101.62},{"name":"20-Mar-09","value":101.59},{"name":"23-Mar-09","value":107.66},{"name":"24-Mar-09","value":106.5},{"name":"25-Mar-09","value":106.49},{"name":"26-Mar-09","value":109.87},{"name":"27-Mar-09","value":106.85},{"name":"30-Mar-09","value":104.49},{"name":"31-Mar-09","value":105.12},{"name":"1-Apr-09","value":108.69},{"name":"2-Apr-09","value":112.71},{"name":"3-Apr-09","value":115.99},{"name":"6-Apr-09","value":118.45},{"name":"7-Apr-09","value":115},{"name":"8-Apr-09","value":116.32},{"name":"9-Apr-09","value":119.57},{"name":"10-Apr-09","value":119.57},{"name":"13-Apr-09","value":120.22},{"name":"14-Apr-09","value":118.31},{"name":"15-Apr-09","value":117.64},{"name":"16-Apr-09","value":121.45},{"name":"17-Apr-09","value":123.42},{"name":"20-Apr-09","value":120.5},{"name":"21-Apr-09","value":121.76},{"name":"22-Apr-09","value":121.51},{"name":"23-Apr-09","value":125.4},{"name":"24-Apr-09","value":123.9},{"name":"27-Apr-09","value":124.73},{"name":"28-Apr-09","value":123.9},{"name":"29-Apr-09","value":125.14},{"name":"30-Apr-09","value":125.83},{"name":"1-May-09","value":127.24},{"name":"4-May-09","value":132.07},{"name":"5-May-09","value":132.71},{"name":"6-May-09","value":132.5},{"name":"7-May-09","value":129.06},{"name":"8-May-09","value":129.19},{"name":"11-May-09","value":129.57},{"name":"12-May-09","value":124.42},{"name":"13-May-09","value":119.49},{"name":"14-May-09","value":122.95},{"name":"15-May-09","value":122.42},{"name":"18-May-09","value":126.65},{"name":"19-May-09","value":127.45},{"name":"20-May-09","value":125.87},{"name":"21-May-09","value":124.18},{"name":"22-May-09","value":122.5},{"name":"26-May-09","value":130.78},{"name":"27-May-09","value":133.05},{"name":"28-May-09","value":135.07},{"name":"29-May-09","value":135.81},{"name":"1-Jun-09","value":139.35},{"name":"2-Jun-09","value":139.49},{"name":"3-Jun-09","value":140.95},{"name":"4-Jun-09","value":143.74},{"name":"5-Jun-09","value":144.67},{"name":"8-Jun-09","value":143.85},{"name":"9-Jun-09","value":142.72},{"name":"10-Jun-09","value":140.25},{"name":"11-Jun-09","value":139.95},{"name":"12-Jun-09","value":136.97},{"name":"15-Jun-09","value":136.09},{"name":"16-Jun-09","value":136.35},{"name":"17-Jun-09","value":135.58},{"name":"18-Jun-09","value":135.88},{"name":"19-Jun-09","value":139.48},{"name":"22-Jun-09","value":137.37},{"name":"23-Jun-09","value":134.01},{"name":"24-Jun-09","value":136.22},{"name":"25-Jun-09","value":139.86},{"name":"26-Jun-09","value":142.44},{"name":"29-Jun-09","value":141.97},{"name":"30-Jun-09","value":142.43},{"name":"1-Jul-09","value":142.83},{"name":"2-Jul-09","value":140.02},{"name":"3-Jul-09","value":140.02},{"name":"6-Jul-09","value":138.61},{"name":"7-Jul-09","value":135.4},{"name":"8-Jul-09","value":137.22},{"name":"9-Jul-09","value":136.36},{"name":"10-Jul-09","value":138.52},{"name":"13-Jul-09","value":142.34},{"name":"14-Jul-09","value":142.27},{"name":"15-Jul-09","value":146.88},{"name":"16-Jul-09","value":147.52},{"name":"17-Jul-09","value":151.75},{"name":"20-Jul-09","value":152.91},{"name":"21-Jul-09","value":151.51},{"name":"22-Jul-09","value":156.74},{"name":"23-Jul-09","value":157.82},{"name":"24-Jul-09","value":159.99},{"name":"27-Jul-09","value":160.1},{"name":"28-Jul-09","value":160},{"name":"29-Jul-09","value":160.03},{"name":"30-Jul-09","value":162.79},{"name":"31-Jul-09","value":163.39},{"name":"3-Aug-09","value":166.43},{"name":"4-Aug-09","value":165.55},{"name":"5-Aug-09","value":165.11},{"name":"6-Aug-09","value":163.91},{"name":"7-Aug-09","value":165.51},{"name":"10-Aug-09","value":164.72},{"name":"12-Aug-09","value":165.31},{"name":"13-Aug-09","value":168.42},{"name":"14-Aug-09","value":166.78},{"name":"17-Aug-09","value":159.59},{"name":"18-Aug-09","value":164},{"name":"19-Aug-09","value":164.6},{"name":"20-Aug-09","value":166.33},{"name":"21-Aug-09","value":169.22},{"name":"24-Aug-09","value":169.06},{"name":"25-Aug-09","value":169.4},{"name":"26-Aug-09","value":167.41},{"name":"27-Aug-09","value":169.45},{"name":"28-Aug-09","value":170.05},{"name":"31-Aug-09","value":168.21},{"name":"1-Sep-09","value":165.3},{"name":"2-Sep-09","value":165.18},{"name":"3-Sep-09","value":166.55},{"name":"4-Sep-09","value":170.31},{"name":"8-Sep-09","value":172.93},{"name":"9-Sep-09","value":171.14},{"name":"10-Sep-09","value":172.56},{"name":"11-Sep-09","value":172.16},{"name":"14-Sep-09","value":173.72},{"name":"15-Sep-09","value":175.16},{"name":"16-Sep-09","value":181.87},{"name":"17-Sep-09","value":184.55},{"name":"18-Sep-09","value":185.02},{"name":"21-Sep-09","value":184.02},{"name":"22-Sep-09","value":184.48},{"name":"23-Sep-09","value":185.5},{"name":"24-Sep-09","value":183.82},{"name":"25-Sep-09","value":182.37},{"name":"28-Sep-09","value":186.15},{"name":"29-Sep-09","value":185.38},{"name":"30-Sep-09","value":185.35},{"name":"1-Oct-09","value":180.86},{"name":"2-Oct-09","value":184.9},{"name":"5-Oct-09","value":186.02},{"name":"6-Oct-09","value":190.01},{"name":"7-Oct-09","value":190.25},{"name":"8-Oct-09","value":189.27},{"name":"9-Oct-09","value":190.47},{"name":"12-Oct-09","value":190.81},{"name":"13-Oct-09","value":190.02},{"name":"14-Oct-09","value":191.29},{"name":"15-Oct-09","value":190.56},{"name":"16-Oct-09","value":188.05},{"name":"19-Oct-09","value":189.86},{"name":"20-Oct-09","value":198.76},{"name":"21-Oct-09","value":204.92},{"name":"22-Oct-09","value":205.2},{"name":"23-Oct-09","value":203.94},{"name":"26-Oct-09","value":202.48},{"name":"27-Oct-09","value":197.37},{"name":"28-Oct-09","value":192.4},{"name":"29-Oct-09","value":196.35},{"name":"30-Oct-09","value":188.5},{"name":"2-Nov-09","value":189.31},{"name":"3-Nov-09","value":188.75},{"name":"4-Nov-09","value":190.81},{"name":"5-Nov-09","value":194.03},{"name":"6-Nov-09","value":194.34},{"name":"9-Nov-09","value":201.46},{"name":"10-Nov-09","value":202.98},{"name":"11-Nov-09","value":203.25},{"name":"12-Nov-09","value":201.99},{"name":"13-Nov-09","value":204.45},{"name":"16-Nov-09","value":206.63},{"name":"17-Nov-09","value":207},{"name":"18-Nov-09","value":205.96},{"name":"19-Nov-09","value":200.51},{"name":"20-Nov-09","value":199.92},{"name":"23-Nov-09","value":205.88},{"name":"24-Nov-09","value":204.44},{"name":"25-Nov-09","value":204.19},{"name":"26-Nov-09","value":204.19},{"name":"27-Nov-09","value":200.59},{"name":"30-Nov-09","value":199.91},{"name":"1-Dec-09","value":196.97},{"name":"2-Dec-09","value":196.23},{"name":"3-Dec-09","value":196.48},{"name":"4-Dec-09","value":193.32},{"name":"7-Dec-09","value":188.95},{"name":"8-Dec-09","value":189.87},{"name":"9-Dec-09","value":197.8},{"name":"10-Dec-09","value":196.43},{"name":"11-Dec-09","value":194.67},{"name":"14-Dec-09","value":196.98},{"name":"15-Dec-09","value":194.17},{"name":"16-Dec-09","value":195.03},{"name":"17-Dec-09","value":191.86},{"name":"18-Dec-09","value":195.43},{"name":"21-Dec-09","value":198.23},{"name":"22-Dec-09","value":200.36},{"name":"23-Dec-09","value":202.1},{"name":"24-Dec-09","value":209.04},{"name":"25-Dec-09","value":209.04},{"name":"28-Dec-09","value":211.61},{"name":"29-Dec-09","value":209.1},{"name":"30-Dec-09","value":211.64},{"name":"31-Dec-09","value":210.73},{"name":"1-Jan-10","value":210.73},{"name":"4-Jan-10","value":214.01},{"name":"5-Jan-10","value":214.38},{"name":"6-Jan-10","value":210.97},{"name":"7-Jan-10","value":210.58},{"name":"8-Jan-10","value":211.98},{"name":"11-Jan-10","value":210.11},{"name":"12-Jan-10","value":207.72},{"name":"13-Jan-10","value":210.65},{"name":"14-Jan-10","value":209.43},{"name":"15-Jan-10","value":205.93},{"name":"18-Jan-10","value":205.93},{"name":"19-Jan-10","value":215.04},{"name":"20-Jan-10","value":211.72},{"name":"21-Jan-10","value":208.07},{"name":"22-Jan-10","value":197.75},{"name":"25-Jan-10","value":203.08},{"name":"26-Jan-10","value":205.94},{"name":"27-Jan-10","value":207.88},{"name":"28-Jan-10","value":199.29},{"name":"29-Jan-10","value":192.06},{"name":"1-Feb-10","value":194.73},{"name":"2-Feb-10","value":195.86},{"name":"3-Feb-10","value":199.23},{"name":"4-Feb-10","value":192.05},{"name":"5-Feb-10","value":195.46},{"name":"8-Feb-10","value":194.12},{"name":"9-Feb-10","value":196.19},{"name":"10-Feb-10","value":195.12},{"name":"11-Feb-10","value":198.67},{"name":"12-Feb-10","value":200.38},{"name":"15-Feb-10","value":200.38},{"name":"16-Feb-10","value":203.4},{"name":"17-Feb-10","value":202.55},{"name":"18-Feb-10","value":202.93},{"name":"19-Feb-10","value":201.67},{"name":"22-Feb-10","value":200.42},{"name":"23-Feb-10","value":197.06},{"name":"24-Feb-10","value":200.66},{"name":"25-Feb-10","value":202},{"name":"26-Feb-10","value":204.62},{"name":"1-Mar-10","value":208.99},{"name":"2-Mar-10","value":208.85},{"name":"3-Mar-10","value":209.33},{"name":"4-Mar-10","value":210.71},{"name":"5-Mar-10","value":218.95},{"name":"8-Mar-10","value":219.08},{"name":"9-Mar-10","value":223.02},{"name":"10-Mar-10","value":224.84},{"name":"11-Mar-10","value":225.5},{"name":"12-Mar-10","value":226.6},{"name":"15-Mar-10","value":223.84},{"name":"16-Mar-10","value":224.45},{"name":"17-Mar-10","value":224.12},{"name":"18-Mar-10","value":224.65},{"name":"19-Mar-10","value":222.25},{"name":"22-Mar-10","value":224.75},{"name":"23-Mar-10","value":228.36},{"name":"24-Mar-10","value":229.37},{"name":"25-Mar-10","value":226.65},{"name":"26-Mar-10","value":230.9},{"name":"29-Mar-10","value":232.39},{"name":"30-Mar-10","value":235.84},{"name":"31-Mar-10","value":235},{"name":"1-Apr-10","value":235.97},{"name":"2-Apr-10","value":235.97},{"name":"5-Apr-10","value":238.49},{"name":"6-Apr-10","value":239.54},{"name":"7-Apr-10","value":240.6},{"name":"8-Apr-10","value":239.95},{"name":"9-Apr-10","value":241.79},{"name":"12-Apr-10","value":242.29},{"name":"13-Apr-10","value":242.43},{"name":"14-Apr-10","value":245.69},{"name":"15-Apr-10","value":248.92},{"name":"16-Apr-10","value":247.4},{"name":"19-Apr-10","value":247.07},{"name":"20-Apr-10","value":244.59},{"name":"21-Apr-10","value":259.22},{"name":"22-Apr-10","value":266.47},{"name":"23-Apr-10","value":270.83},{"name":"26-Apr-10","value":269.5},{"name":"27-Apr-10","value":262.04},{"name":"28-Apr-10","value":261.6},{"name":"29-Apr-10","value":268.64},{"name":"30-Apr-10","value":261.09},{"name":"3-May-10","value":266.35},{"name":"4-May-10","value":258.68},{"name":"5-May-10","value":255.98},{"name":"6-May-10","value":246.25},{"name":"7-May-10","value":235.86},{"name":"10-May-10","value":253.99},{"name":"11-May-10","value":256.52},{"name":"12-May-10","value":262.09},{"name":"13-May-10","value":258.36},{"name":"14-May-10","value":253.82},{"name":"17-May-10","value":254.22},{"name":"18-May-10","value":252.36},{"name":"19-May-10","value":248.34},{"name":"20-May-10","value":237.76},{"name":"21-May-10","value":242.32},{"name":"24-May-10","value":246.76},{"name":"25-May-10","value":245.22},{"name":"26-May-10","value":244.11},{"name":"27-May-10","value":253.35},{"name":"28-May-10","value":256.88},{"name":"31-May-10","value":256.88},{"name":"1-Jun-10","value":260.83},{"name":"2-Jun-10","value":263.95},{"name":"3-Jun-10","value":263.12},{"name":"4-Jun-10","value":255.96},{"name":"7-Jun-10","value":250.94},{"name":"8-Jun-10","value":249.33},{"name":"9-Jun-10","value":243.2},{"name":"10-Jun-10","value":250.51},{"name":"11-Jun-10","value":253.51},{"name":"20-Dec-10","value":322.21},{"name":"21-Dec-10","value":324.2},{"name":"22-Dec-10","value":325.16},{"name":"23-Dec-10","value":323.6},{"name":"27-Dec-10","value":324.68},{"name":"28-Dec-10","value":325.47},{"name":"29-Dec-10","value":325.29},{"name":"30-Dec-10","value":323.66},{"name":"31-Dec-10","value":322.56},{"name":"3-Jan-11","value":329.57},{"name":"4-Jan-11","value":331.29},{"name":"5-Jan-11","value":334},{"name":"6-Jan-11","value":333.73},{"name":"7-Jan-11","value":336.12},{"name":"10-Jan-11","value":342.46},{"name":"11-Jan-11","value":341.64},{"name":"12-Jan-11","value":344.42},{"name":"13-Jan-11","value":345.68},{"name":"14-Jan-11","value":348.48},{"name":"18-Jan-11","value":340.65},{"name":"19-Jan-11","value":338.84},{"name":"20-Jan-11","value":332.68},{"name":"21-Jan-11","value":326.72},{"name":"24-Jan-11","value":337.45},{"name":"25-Jan-11","value":341.4},{"name":"26-Jan-11","value":343.85},{"name":"27-Jan-11","value":343.21},{"name":"28-Jan-11","value":336.1},{"name":"31-Jan-11","value":339.32},{"name":"1-Feb-11","value":345.03},{"name":"2-Feb-11","value":344.32},{"name":"3-Feb-11","value":343.44},{"name":"4-Feb-11","value":346.5},{"name":"7-Feb-11","value":351.88},{"name":"8-Feb-11","value":355.2},{"name":"9-Feb-11","value":358.16},{"name":"10-Feb-11","value":354.54},{"name":"11-Feb-11","value":356.85},{"name":"14-Feb-11","value":359.18},{"name":"15-Feb-11","value":359.9},{"name":"16-Feb-11","value":363.13},{"name":"17-Feb-11","value":358.3},{"name":"18-Feb-11","value":350.56},{"name":"22-Feb-11","value":338.61},{"name":"23-Feb-11","value":342.62},{"name":"24-Feb-11","value":342.88},{"name":"25-Feb-11","value":348.16},{"name":"28-Feb-11","value":353.21},{"name":"1-Mar-11","value":349.31},{"name":"2-Mar-11","value":352.12},{"name":"3-Mar-11","value":359.56},{"name":"4-Mar-11","value":360},{"name":"7-Mar-11","value":355.36},{"name":"8-Mar-11","value":355.76},{"name":"9-Mar-11","value":352.47},{"name":"10-Mar-11","value":346.67},{"name":"11-Mar-11","value":351.99},{"name":"14-Mar-11","value":353.56},{"name":"15-Mar-11","value":345.43},{"name":"16-Mar-11","value":330.01},{"name":"17-Mar-11","value":334.64},{"name":"18-Mar-11","value":330.67},{"name":"21-Mar-11","value":339.3},{"name":"22-Mar-11","value":341.2},{"name":"23-Mar-11","value":339.19},{"name":"24-Mar-11","value":344.97},{"name":"25-Mar-11","value":351.54},{"name":"28-Mar-11","value":350.44},{"name":"29-Mar-11","value":350.96},{"name":"30-Mar-11","value":348.63},{"name":"31-Mar-11","value":348.51},{"name":"1-Apr-11","value":344.56},{"name":"4-Apr-11","value":341.19},{"name":"5-Apr-11","value":338.89},{"name":"6-Apr-11","value":338.04},{"name":"7-Apr-11","value":338.08},{"name":"8-Apr-11","value":335.06},{"name":"11-Apr-11","value":330.8},{"name":"12-Apr-11","value":332.4},{"name":"13-Apr-11","value":336.13},{"name":"14-Apr-11","value":332.42},{"name":"15-Apr-11","value":327.46},{"name":"18-Apr-11","value":331.85},{"name":"19-Apr-11","value":337.86},{"name":"20-Apr-11","value":342.41},{"name":"21-Apr-11","value":350.7},{"name":"25-Apr-11","value":353.01},{"name":"26-Apr-11","value":350.42},{"name":"27-Apr-11","value":350.15},{"name":"28-Apr-11","value":346.75},{"name":"29-Apr-11","value":350.13},{"name":"2-May-11","value":346.28},{"name":"3-May-11","value":348.2},{"name":"4-May-11","value":349.57},{"name":"5-May-11","value":346.75},{"name":"6-May-11","value":346.66},{"name":"9-May-11","value":347.6},{"name":"10-May-11","value":349.45},{"name":"11-May-11","value":347.23},{"name":"12-May-11","value":346.57},{"name":"13-May-11","value":340.5},{"name":"16-May-11","value":333.3},{"name":"17-May-11","value":336.14},{"name":"18-May-11","value":339.87},{"name":"19-May-11","value":340.53},{"name":"20-May-11","value":335.22},{"name":"23-May-11","value":334.4},{"name":"24-May-11","value":332.19},{"name":"25-May-11","value":336.78},{"name":"26-May-11","value":335},{"name":"27-May-11","value":337.41},{"name":"31-May-11","value":347.83},{"name":"1-Jun-11","value":345.51},{"name":"2-Jun-11","value":346.1},{"name":"3-Jun-11","value":343.44},{"name":"6-Jun-11","value":338.04},{"name":"7-Jun-11","value":332.04},{"name":"8-Jun-11","value":332.24},{"name":"9-Jun-11","value":331.49},{"name":"10-Jun-11","value":325.9},{"name":"13-Jun-11","value":326.6},{"name":"14-Jun-11","value":332.44},{"name":"15-Jun-11","value":326.75},{"name":"16-Jun-11","value":325.16},{"name":"17-Jun-11","value":320.26},{"name":"20-Jun-11","value":315.32},{"name":"21-Jun-11","value":325.3},{"name":"22-Jun-11","value":322.61},{"name":"23-Jun-11","value":331.23},{"name":"24-Jun-11","value":326.35},{"name":"27-Jun-11","value":332.04},{"name":"28-Jun-11","value":335.26},{"name":"29-Jun-11","value":334.04},{"name":"30-Jun-11","value":335.67},{"name":"1-Jul-11","value":343.26},{"name":"5-Jul-11","value":349.43},{"name":"6-Jul-11","value":351.76},{"name":"7-Jul-11","value":357.2},{"name":"8-Jul-11","value":359.71},{"name":"11-Jul-11","value":354},{"name":"12-Jul-11","value":353.75},{"name":"13-Jul-11","value":358.02},{"name":"14-Jul-11","value":357.77},{"name":"15-Jul-11","value":364.92},{"name":"13-Oct-11","value":408.43},{"name":"14-Oct-11","value":422},{"name":"17-Oct-11","value":419.99},{"name":"18-Oct-11","value":422.24},{"name":"19-Oct-11","value":398.62},{"name":"20-Oct-11","value":395.31},{"name":"21-Oct-11","value":392.87},{"name":"24-Oct-11","value":405.77},{"name":"25-Oct-11","value":397.77},{"name":"26-Oct-11","value":400.6},{"name":"27-Oct-11","value":404.69},{"name":"28-Oct-11","value":404.95},{"name":"31-Oct-11","value":404.78},{"name":"1-Nov-11","value":396.51},{"name":"2-Nov-11","value":397.41},{"name":"3-Nov-11","value":403.07},{"name":"4-Nov-11","value":400.24},{"name":"7-Nov-11","value":399.73},{"name":"8-Nov-11","value":406.23},{"name":"9-Nov-11","value":395.28},{"name":"10-Nov-11","value":385.22},{"name":"11-Nov-11","value":384.62},{"name":"14-Nov-11","value":379.26},{"name":"15-Nov-11","value":388.83},{"name":"16-Nov-11","value":384.77},{"name":"17-Nov-11","value":377.41},{"name":"18-Nov-11","value":374.94},{"name":"21-Nov-11","value":369.01},{"name":"22-Nov-11","value":376.51},{"name":"23-Nov-11","value":366.99},{"name":"25-Nov-11","value":363.57},{"name":"28-Nov-11","value":376.12},{"name":"29-Nov-11","value":373.2},{"name":"30-Nov-11","value":382.2},{"name":"1-Dec-11","value":387.93},{"name":"2-Dec-11","value":389.7},{"name":"5-Dec-11","value":393.01},{"name":"6-Dec-11","value":390.95},{"name":"7-Dec-11","value":389.09},{"name":"8-Dec-11","value":390.66},{"name":"9-Dec-11","value":393.62},{"name":"12-Dec-11","value":391.84},{"name":"13-Dec-11","value":388.81},{"name":"14-Dec-11","value":380.19},{"name":"15-Dec-11","value":378.94},{"name":"16-Dec-11","value":381.02},{"name":"19-Dec-11","value":382.21},{"name":"20-Dec-11","value":395.95},{"name":"21-Dec-11","value":396.44},{"name":"22-Dec-11","value":398.55},{"name":"23-Dec-11","value":403.43},{"name":"27-Dec-11","value":406.53},{"name":"28-Dec-11","value":402.64},{"name":"29-Dec-11","value":405.12},{"name":"30-Dec-11","value":405},{"name":"3-Jan-12","value":411.23},{"name":"10-Apr-12","value":628.44},{"name":"11-Apr-12","value":626.2},{"name":"12-Apr-12","value":622.77},{"name":"13-Apr-12","value":605.23},{"name":"16-Apr-12","value":580.13},{"name":"17-Apr-12","value":609.7},{"name":"18-Apr-12","value":608.34},{"name":"19-Apr-12","value":587.44},{"name":"20-Apr-12","value":572.98},{"name":"23-Apr-12","value":571.7},{"name":"24-Apr-12","value":560.28},{"name":"25-Apr-12","value":610},{"name":"26-Apr-12","value":607.7},{"name":"27-Apr-12","value":603},{"name":"30-Apr-12","value":583.98},{"name":"1-May-12","value":582.13}];
data.forEach(function (d) {
d.name = d.name;
d.value = +d.value;
});
x.domain(data.map(function (d) { return d.name; }));
y.domain(d3.extent(data, function (d) { return d.value; }));
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("Label");
svg.append("path")
.datum(data)
.attr("d", area)
.attr("fill", "#FF0000");
}
renderAreaChart();
</script>
</div>
</div>

See the bold part, the count is only a hint value.
A stateless method that returns approximately count representative values from the scale's input domain. If count is not specified, it defaults to 10. The returned tick values are uniformly spaced, have human-readable values (such as multiples of powers of 10), and are guaranteed to be within the extent of the input domain. Ticks are often used to display reference lines, or tick marks, in conjunction with the visualized data. The specified count is only a hint; the scale may return more or fewer values depending on the input domain.
If you want to display the number of ticks exactly as you wanted, you can use the API tickValues.
https://github.com/mbostock/d3/wiki/SVG-Axes#tickValues

d3 javascript change range of the y axis

I'm a beginner with d3 javascript and I don't know how to change the y axis on this grouped bar chart:
http://bl.ocks.org/mbostock/3887051 Data + code can be found here
This is the code of the site & the data of the grouped bar chart:
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis() //creating a generic axis function//
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
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 + ")");
d3.csv("gender_ratio.csv", function(error, data) {
var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "Perioden"; });
data.forEach(function(d) {
d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]*1000}; });
});
x0.domain(data.map(function(d) { return d.Perioden; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
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 Perioden = svg.selectAll(".Perioden")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.Perioden) + ",0)"; });
Perioden.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); });
var legend = svg.selectAll(".legend")
.data(ageNames.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; });
});
</script>
Data:
State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672
FL,1140516,1938695,925060,1607297,4782119,4746856,3187797
IL,894368,1558919,725973,1311479,3596343,3239173,1575308
PA,737462,1345341,679201,1203944,3157759,3414001,1910571

If your x-axis is regular old numeric data, you should be using a linear scale not an ordinal. Ordinal is meant for discrete values (think a, b, c or x, y, z or tom, dick, harry) while linear is meant for continuous data (think 1,2,3 or 50, 100, 150):
var x = d3.scale.linear()
.range([0, width])
.domain([1650, 1700]);
In d3 speak, range is the pixel span of your data (from min to max), while domain is the user-space span of your data (the min and max of your data values). The scale that's returned then maps your user space data to it's pixel space position.
Below is a heavily commented example of a simple d3 bar graph:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
// sample data with x and y values
// d3 likes arrays of objects
var data = [
{
x: 1660,
y: 1
},{
x: 1670,
y: 2
},{
x: 1680,
y: 3
},{
x: 1690,
y: 4
}
];
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0,width]) // our pixel span
.domain([1650, 1700]); // our user space data span
var y = d3.scale.linear()
.range([height, 0]) // same thing as x, pixel span
.domain([0,5]); // user space space
// marry the scale to the axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
// set up our svg tag
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 + ")");
// draw x axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// draw y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// get a nice bar width
// it is the width of our axis divided by the number of ticks
var barWidth = (width / xAxis.ticks()[0]);
// draw the bars
var state = svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("width", barWidth)
.attr("x", function(d) { return x(d.x) - (barWidth / 2); }) // center it on tick
.attr("y", function(d) { return y(d.y); }) // y is the top of the bar
.attr("height", function(d) { return height - y(d.y); }); // and height goes to axis
</script>
</body>
</html>

Unable to generate grid lines

I have been trying to obtain grid lines in my chart I have been going through d3 tips and tricks by d3noob. Help me if my code is wrong
Style
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid.tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
Code
<body>
<!-- load the d3.js library -->
<script src="d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
Var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.interpolate("bundle")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close);
});
// Adds the svg canvas
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 + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([0, d3.max(data, function(d) {
return d.close;
})]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text") // text label for the x axis
.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Date");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Value vs Date Graph");
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""))
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""))
});
</script>
</body>
data.csv
date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98

Could be the problem is caused in the first line of code, where var is shown as Var. See if that helps
Var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},

You're missing a space in your CSS:
.grid.tick {
stroke: lightgrey;
opacity: 0.7;
}
should be
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
or if you want to be more precise
g.grid g.tick line {
stroke: lightgrey;
opacity: 0.7;
}
The axis function creates <g> elements with a class "tick". You're drawing these inside a <g> element with class "grid". However, without the space the CSS selector .grid.tick only applies when both classes are on the same element.

d3.js line graph axis not displaying data correctly

I can't figure out why the data won't display correctly. I think it has something to do with the scale of the axis but I can't find any solutions. There is a line being drawn but it's to small to see. The example I was using had a time scale of several years where as I am only doing one week.
Below is the code.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = 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 line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
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 + ")");
var data = [{"close":71,"date":"9-Apr-13"},{"close":14,"date":"9-Apr-13"},{"close":10,"date":"9-Apr-13"},{"close":109,"date":"9-Apr-13"},{"close":62,"date":"9-Apr-13"},{"close":61,"date":"9-Apr-13"},{"close":62,"date":"9-Apr-13"},{"close":32,"date":"9-Apr-13"},{"close":19,"date":"9-Apr-13"}];
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
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("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
</script>
</body>
</html>

Based on the data you've provided, there is only one instance of time: Apr 9, 2013. Since there is no difference between min and max, the x axis won't display.
If you change one date to Apr 11, It looks right.
Bear in mind that your css says
.x.axis path {
display: none;
}
so the actual line for the x axis won't display no matter what

Categories