Passing scaled data to x and y axises in D3.js? - javascript

I've used the following code to visualize the data I have in csv file. I'v scaled the data to dynamically fit within the svg element, but the x and y axises still display the pre-scaled values even that I passed the scale function to both. Does anybody know how to fix that?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
var padding = 80;
var dataset = []
var generateVisualization = function(){
//Create scale functions
var xScale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding]);
var yScale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d[1]; }), d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.append("g")
.attr("id", "circles")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", 2);
//Create X axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding + 5) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding - 5) + ",0)")
.call(yAxis);
};
d3.csv("OuputMatrix2.csv", function(error, d) {
dataset = d.map(function(d) { return [ +d["x"], +d["y"] ];
});
generateVisualization();});
</script>
</body>
</html>
The following is a screenshot of the output:
https://www.dropbox.com/s/2th83r4r42nn4el/Screenshot%202014-11-11%2015.45.55.png?dl=0

Related

Fixed center with dynamic axis scaling

EDIT:
I have edited my code. Now you can directly run the code inside stackoverflow.
Last day, I started with D3 and having some problems in fixing the dynamic axis. I am new to D3 :)
I am trying to build the following.
I am trying to plot some 2d streaming data with D3. Data comes in through web sockets. So, as the data comes in I plot the new points. I have been somewhat succesful in that but my axis are not behaving as expected.
As the new data comes in, I rescale my x and y axis. Forexample if (20,100) comes in the following plot then I will scale my y-axis to accomadate 100. But if you look closely the point where x and y axis meet is not on 0. Initially it was on (0,0) but after rescaling it went way below. How can I fix the center a (0,0) while dynamically rescaling my axis ?
Can you please help me. Here is my code.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override this later */
background-color: teal;
}
/* Format X and Y Axis */
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<svg width="960" height="500"></svg>
<br/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var dataset = []; // Initialize empty array
var numDataPoints = 15; // Number of dummy data points
for(var i=0; i<numDataPoints; i++) {
dataset.push([getRandomInt(-80,80), getRandomInt(-60,60)]); // Add new number to array
}
var width = 1020;
var height = 840;
var xScale = d3.scale.linear().domain([d3.min(dataset, function(d) { return d[0]; } ), d3.max(dataset, function(d) { return d[0]; })])
.range([20, width - 20 * 2])
.nice();
var yScale = d3.scale.linear().domain([d3.min(dataset, function(d) { return d[1]; } ), d3.max(dataset, function(d) { return d[1]; })])
.range([height - 20, 20])
.nice();
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
var svg = d3.select("svg")
.attr("height",height)
.attr("width", width)
.append("g")
.attr("transform","translate(20,20)")
.attr("width", width- 40)
.attr("height", height- 40);
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + yScale(0) + ")")
//.attr("transform", "translate(0," + (height - 20) + ")")
//.style("position", "fixed")
.call(xAxis);
//y-axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + xScale(0) + ",0)")
//.attr("transform", "translate(" + 20 + ",0)")
//.style("position", "fixed")
.call(yAxis);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle") // Add circle svg
.attr("cx", function(d) {
return xScale(d[0]); // Circle's X
})
.attr("cy", function(d) { // Circle's Y
return yScale(d[1]);
})
.attr("r", 2)
.call(updatePlotWithSocketData);
function updatePlotWithSocketData() {
console.log(dataset.length);
for(var i=0; i<numDataPoints; i++) {
dataset.push([getRandomInt(-200,200), getRandomInt(-100,100)]); // Add new number to array
}
// Update scale domains
xScale.domain([d3.min(dataset, function(d) { return d[0]; } ), d3.max(dataset, function(d) { return d[0]; })]);
yScale.domain([d3.min(dataset, function(d) { return d[1]; } ), d3.max(dataset, function(d) { return d[1]; })]);
xScale.range([20, width - 20 * 2]).nice();
yScale.range([height - 20, 20]).nice();
// Update old points to the new scale
svg.selectAll("circle")
.transition()
.duration(1000)
.attr("cx", function(d) {
return xScale(d[0]); // Circle's X
})
.attr("cy", function(d) {
return yScale(d[1]); // Circle's Y
});
// Update circles
svg.selectAll("circle")
.data(dataset) // Update with new data
.enter()
.append("circle")
.transition() // Transition from old to new
.duration(1000) // Length of animation
.each("start", function() { // Start animation
d3.select(this) // 'this' means the current element
.attr("fill", "red") // Change color
.attr("r", 5); // Change size
})
.delay(function(d, i) {
return i / dataset.length * 500; // Dynamic delay (i.e. each item delays a little longer)
})
.attr("cx", function(d) {
return xScale(d[0]); // Circle's X
})
.attr("cy", function(d) {
return yScale(d[1]); // Circle's Y
})
.each("end", function() { // End animation
d3.select(this) // 'this' means the current element
.transition()
//.duration(500)
.attr("fill", "black") // Change color
.attr("r", 2); // Change radius
});
/* force.on("tick", function() {
nodes[0].x = width / 2;
nodes[1].y = height / 2;
}); */
/* var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left"); */
svg.selectAll(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
// Update Y Axis
svg.selectAll(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
setTimeout(updatePlotWithSocketData, 3000);
}
// Socker code
/*
var socket;
var registered = false;
function startDataReceptionFromSocket() {
console.log("opening socket");
//on http server use document.domain instead od "localhost"
//Start the websocket client
socket = new WebSocket("ws://localhost:8887/");
//When the connection is opened, login.
socket.onopen = function() {
console.log("Opened socket.");
//register the user
};
socket.onmessage = function(a) {
//process the message here
console.log("received message socker => : " + a.data);
var message = JSON.parse(a.data);
console.log("message =>" + message.message);
var numbers = message.message.split(" ")
dataset.push([numbers[0],numbers[1]]);
updatePlotWithSocketData();
}
socket.onclose = function() { console.log("Closed socket."); };
socket.onerror = function() { console.log("Error during transfer."); };
}
// On document load, open the socket connection
(function() {
startDataReceptionFromSocket();
})();*/
</script>

It seems to me that the solution is setting the translate again when you update the axes.
Right now, in your code, the domains (for the x and y scales) are changing, but the axes are translated using the original xScale(0) and yScale(0) positions. This demo reproduces the problem:
var margin = 10;
var width = 250, height = 250;
var svg = d3.select("#mydiv")
.append("svg")
.attr("width", width)
.attr("height", height);
var xScale = d3.scale.linear()
.range([margin, width - margin])
.domain([-10, 10]);
var yScale = d3.scale.linear()
.range([margin, height - margin])
.domain([-10, 10]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
svg.append("g").attr("class", "x axis")
.attr("transform", "translate(0," + yScale(0) + ")")
.call(xAxis);
svg.append("g").attr("class", "y axis")
.attr("transform", "translate(" + xScale(0) + ",0)")
.call(yAxis);
d3.select("#btn").on("click", randomize);
function randomize(){
xScale.domain([Math.floor(Math.random()*50)*(-1),Math.floor(Math.random()*50)]);
yScale.domain([Math.floor(Math.random()*50)*(-1),Math.floor(Math.random()*50)]);
svg.selectAll(".x.axis")
.transition()
.call(xAxis);
svg.selectAll(".y.axis")
.transition()
.call(yAxis);
}
.axis path, .axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button id="btn">Randomize</button>
<div id="mydiv"></div>
Now the solution. The next demo has the same code, but updating the positions like this:
svg.selectAll(".x.axis")
.transition()
.duration(1000)
.attr("transform", "translate(0," + yScale(0) + ")")
.call(xAxis);
svg.selectAll(".y.axis")
.transition()
.duration(1000)
.attr("transform", "translate(" + xScale(0) + ",0)")
.call(yAxis);
Check the demo:
var margin = 10;
var width = 250, height = 250;
var svg = d3.select("#mydiv")
.append("svg")
.attr("width", width)
.attr("height", height);
var xScale = d3.scale.linear()
.range([margin, width - margin])
.domain([-10, 10]);
var yScale = d3.scale.linear()
.range([margin, height - margin])
.domain([-10, 10]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
svg.append("g").attr("class", "x axis")
.attr("transform", "translate(0," + yScale(0) + ")")
.call(xAxis);
svg.append("g").attr("class", "y axis")
.attr("transform", "translate(" + xScale(0) + ",0)")
.call(yAxis);
d3.select("#btn").on("click", randomize);
function randomize(){
xScale.domain([Math.floor(Math.random()*50)*(-1),Math.floor(Math.random()*50)]);
yScale.domain([Math.floor(Math.random()*50)*(-1),Math.floor(Math.random()*50)]);
svg.selectAll(".x.axis")
.transition()
.duration(1000)
.attr("transform", "translate(0," + yScale(0) + ")")
.call(xAxis);
svg.selectAll(".y.axis")
.transition()
.duration(1000)
.attr("transform", "translate(" + xScale(0) + ",0)")
.call(yAxis);
}
.axis path, .axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button id="btn">Randomize</button>
<div id="mydiv"></div>

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: syntax error and blank page

I would like to reproduce the graph on the attached picture. I based my code on 2 tutorials found on internet. Below is my code. When I run it I just get a blank page with the following error message:
SyntaxError: missing ) after argument list, line 49 Update fixed. See new code below
Also this is what my .csv file content look like:
course_id,userid_DI,registered,viewed,explored,certified,final_cc_cname_DI,LoE_DI,YoB,gender,grade,start_time_DI,last_event_DI,nevents,ndays_act,nplay_video,nchapters,nforum_posts,roles,incomplete_flag
LavalX/CB22x/2013_Spring,MHxPC130442623,1,0,0,0,United States,NA,NA,NA,0,2012-12-19,2013-11-17,,9,,,0,,1
LavalX/CS50x/2012,MHxPC130442623,1,1,0,0,United States,NA,NA,NA,0,2012-10-15,,,9,,1.0,0,,1
LavalX/CB22x/2013_Spring,MHxPC130275857,1,0,0,0,Canada,NA,NA,NA,0,2013-02-08,2013-11-17,,16,,,0,,1
LavalX/CS50x/2012,MHxPC130275857,1,0,0,0,United States,NA,NA,NA,0,2012-09-17,,,16,,,0,,1
LavalX/ER22x/2013_Spring,MHxPC130275857,1,0,0,0,France,NA,NA,NA,0,2012-12-19,,,16,,,0,,1
Anyone could help? Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Graphs</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
var padding = 30;
// Get the data
d3.csv("HMXPC13_DI_v2_5-14-14_court.csv", function(error, dataset) {
data.forEach(function(d) {
d.registered = +d.registered;
d.start_time_DI = +d.start_time_DI;
});
}
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
});
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>
</body>
</html>
Update: this is the new code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Graphs</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 1000;
var h = 600;
var padding = 30;
// Get the data
d3.csv("HMXPC13_DI_v2_5-14-14_court.csv", function(error, dataset) {
dataset.forEach(function(d) {
d.registered = +d.registered;
d.start_time_DI = +d.start_time_DI;
});
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
});
</script>
</body>
</html>

Looks like you are missing a closing parenthesis and semi-colon at some point at least:
// Get the data
d3.csv("HMXPC13_DI_v2_5-14-14_court.csv", function(error, dataset) {
data.forEach(function(d) {
d.registered = +d.registered;
d.start_time_DI = +d.start_time_DI;
});
});
Check out the last line above and compare it to your code example.

d3.js Multi-line graph with zoom : line error

It is my version of "Multi-line graph 4: Toggle" from http://bl.ocks.org/d3noob/e99a762017060ce81c76 but I ran into some problems pls help.
At first the initial graph is correct,
after the zooms, the line would become one which used data for both line and rotated.
I think it is the zoomed functions is not doing right, when I used "d.value" the browser would say "d. is not define"
Here are the codes:
// https://github.com/mbostock/d3/wiki/Ordinal-Scales#category10
var colors = d3.scale.category10();
var margin = {top: 20, right: 30, bottom: 80, left: 85},
width = 900 - margin.left - margin.right,
height = 570 - margin.top - margin.bottom;
// Kind of defining the length and the directions of the axis
var x = d3.scale.linear()
.range([0, width]);
// Since the origin is on the left corner, the y axis of the svg system points down
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.tickPadding(10) // Distance between axis and tick note
.tickSubdivide(true)
.tickFormat(d3.format(".0"))
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickPadding(10)
.tickSize(-width)
.tickSubdivide(true)
.tickFormat(d3.format(".3e")) // https://github.com/mbostock/d3/wiki/Formatting#d3_format
.orient("left");
var valueline = d3.svg.line()
.x(function(d) { return x(d.samples); })
.y(function(d) { return y(d.measurements); });
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([0.1, 50])
.on("zoom", zoomed);
// Adding svg canvas
var svg = d3.select("body").append("svg")
.call(zoom)
.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
data=[{"SAMPLES":"1","MEASUREMENTS":"2","ID":"ch1"},{"SAMPLES":"2","MEASUREMENTS":"3","ID":"ch1"},{"SAMPLES":"1","MEASUREMENTS":"4","ID":"ch2"},{"SAMPLES":"3","MEASUREMENTS":"5","ID":"ch1"},{"SAMPLES":"2","MEASUREMENTS":"6","ID":"ch2"}];
data.forEach(function(d) {
d.samples = +d.SAMPLES;
d.measurements = +d.MEASUREMENTS;
});
console.log(data);
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.samples; }));
y.domain([0, d3.max(data, function(d) { return d.measurements; })]);
// Creating X axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Drawing notations
svg.append("g")
.attr("class", "x axis")
.append("text")
.attr("class", "axis-label")
.attr("x", (width - margin.left)/2)
.attr("y", height + margin.top + 45)
.text('Samples');
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "y axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", (-margin.left) + 10)
.attr("x", -height/2)
.text('Volts');
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
// Nest the entries by channel id (ID)
var dataNest = d3.nest()
.key(function(d) {return d.ID;})
.entries(data);
// set the colour scale
var color = d3.scale.category10();
// Auto spacing for the legend
legendSpace = width/dataNest.length;
// Loop through each IDs / key to draw the lines and the legend labels
dataNest.forEach(function(d,i) {
svg.append("path")
.attr("class", "line")
.attr("clip-path", "url(#clip)")
.style("stroke", function() { // Add the colours dynamically
return d.color = color(d.key);
})
.attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
.attr("d", valueline(d.values))
.style("stroke", function(){return d.color = color(d.key);});
// Adding legends
svg.append("text")
// Setting coordinates and classes
.attr("x", (legendSpace/2)+i*legendSpace)
.attr("y", height + (margin.bottom/2)+ 5)
.attr("class", "legend")
// Setting colors
.style("fill",function(){
return d.color = color(d.key);
})
// Setting 'click' events
.on("click", function(){
// Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
.transition().duration(600)
.style("opacity", newOpacity);
// Update whether or not the elements are active
d.active = active;
})
.text(function() {
if (d.key == '28-00043b6ef8ff') {return "Inlet";}
if (d.key == '28-00043e9049ff') {return "Ambient";}
if (d.key == '28-00043e8defff') {return "Outlet";}
else {return d.key;}
})
})
// Zoom specific updates
function zoomed() {
svg.select(".x.axis")
.transition().duration(500)
.call(xAxis);
svg.select(".y.axis")
.transition().duration(500)
.call(yAxis);
svg.selectAll('path.line')
.transition().duration(500)
.attr('d', valueline(data));
}
body {
font: 12px Arial;
margin: 50px;
}
.axis path {
fill: none;
stroke: #bbb;
stroke-width: 2;
shape-rendering: crispEdges;
}
.axis text {
fill: #555;
}
.axis line {
fill: none;
stroke-width: 1;
stroke: #e7e7e7;
shape-rendering: crispEdges;
}
.axis .axis-label {
font-size: 14px;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}

You need to bind your paths to your data, so you can call valueLine with the correct data for the path when zooming.
Use d3 data and enter functions when adding a new path:
// choose all .line objects and append a path which is not already binded
// by comparing its data to the current key
svg.selectAll(".line").data([d], function (d) {
return d.key;
})
.enter().append("path")
.attr("class", "line")
Then when you zoom, change the d attribute path by calling valueLine with the path's correct values:
svg.selectAll('path.line')
.transition().duration(500)
.attr('d', function(d) {
return valueline(d.values)
});
Plunker

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