d3.js line graph axis not displaying data correctly - javascript

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

Related

why does it fail saying that d3 is not defined when served as string in webbrowser

I am trying to launch a WPF webbrowser from a string. I have a java script file referenced in the head section that points to a file on my drive. It looks good to me but still fails. Any ideas?
String served to webbrowser:
<!DOCTYPE html>
<meta charset="utf - 8">
<head>
<script src="file:///C:/Users/ksobon/AppData/Roaming/Dynamo/Dynamo%20Revit/1.0/packages/extra/d3/d3.v3.min.js"></script>
<link rel="stylesheet" href="file:///C:/Users/ksobon/AppData/Roaming/Dynamo/Dynamo%20Revit/1.0/packages/extra/bootstrap/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="linelinechart1" align="center">
<script>
function renderLineChart() {
var data = [{"name":"24-Apr-07","value":93.24},{"name":"25-Apr-07","value":95.35},{"name":"26-Apr-07","value":98.84},{"name":"27-Apr-07","value":99.92},{"name":"30-Apr-07","value":99.8},{"name":"1-May-07","value":99.47},{"name":"2-May-07","value":100.39},{"name":"3-May-07","value":100.4},{"name":"4-May-07","value":100.81},{"name":"7-May-07","value":103.92},{"name":"8-May-07","value":105.06},{"name":"9-May-07","value":106.88},{"name":"10-May-07","value":107.34},{"name":"11-May-07","value":108.74},{"name":"14-May-07","value":109.36},{"name":"15-May-07","value":107.52},{"name":"16-May-07","value":107.34},{"name":"17-May-07","value":109.44},{"name":"18-May-07","value":110.02},{"name":"21-May-07","value":111.98},{"name":"22-May-07","value":113.54},{"name":"23-May-07","value":112.89},{"name":"24-May-07","value":110.69},{"name":"25-May-07","value":113.62},{"name":"29-May-07","value":114.35},{"name":"30-May-07","value":118.77},{"name":"31-May-07","value":121.19},{"name":"1-Jun-07","value":118.4},{"name":"4-Jun-07","value":121.33}];
var tickValues = data.map(function (d){return d.name;});
var step = Math.floor(tickValues.length / 5);
var indexes = d3.range(0,tickValues.length, step);
if (indexes.indexOf(tickValues.length - 1) == -1){
indexes.push(tickValues.length - 1);
}
var tickArray = d3.permute(tickValues, indexes);
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 547 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(data.map(function (d) { return d.name; }))
.rangePoints([0, width], 2);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues(tickArray);
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 svg = d3.select("#linelinechart1").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function (d) {
d.name = d.name;
d.value = +d.value;});
y.domain([0, 200]);
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", line)
.attr("stroke", "#FA0000")
.attr("stroke-width", 2)
.attr("fill", "none");
}
renderLineChart();
</script>
</div>
</div>
Previously the reference to d3.min.js was placed after the <script> tag and before renderLineChart() function call and it worked just fine.

So it appears that the answer is within the string formatting where a space in a file path name was replaced with %20 and rendered such path unreadable. I used Uri.UnescapeDataString() to clean that up and it works great. Thanks!

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

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.

Filtering out weekend days from time series line chart in D3.js

I have multi-year, daily dataset that looks like this:
date close
2013-09-17 178
2013-09-16 185
2013-09-15 20
2013-09-14 10
2013-09-13 190
2013-09-12 157
2013-09-11 150
2013-09-10 189
2013-09-09 183
2013-09-08 11
2013-09-07 20
I generated a line chart using this example, but would like filter out weekend days:
<!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>
<body>
<script src="http://d3js.org/d3.v3.js"></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("%Y-%m-%d").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 + ")");
d3.csv("data.csv", function(error, data) {
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>
This example from Crossfilter.js seems to achieve weekend filtering—but only for a small portion of the dataset. Ideally, I would be able to filter by day using checkboxes (e.g. weekdays or Mondays only) across the entire dataset.

I'm working on d3.js. Why this code doesn't work correctly?

That's the CSV file: http://goo.gl/ZVVjD
I've this problem only for bar chart. The line chart works fine. I don't know how to modify this one.
Please,help me to understand where I'm wrong.
<!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="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 formatPercent = d3.format("04d");
//var formatPercent = d3.format(".0%");
var parseDate = d3.time.format("%d-%b-%y-%H:%M:%S").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")
//.tickFormat(formatPercent);
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("data.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
//d.energy = parseInt(d.energy);
d.energy = +d.energy;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.energy; })]);
//y.domain(d3.extent(data, function(d) { return d.energy; }));
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("Energy");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.date); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.energy); })
.attr("height", function(d) { return height - y(d.energy); });
});
</script>
Thank you very much!

I don't believe x.rangeBand() works for time scales. Try replacing it with with a fixed pixel value of 2 or 3.

Categories