We Keep Coding

D3 Bollinger Band Issue

I want to generate bollinger band using D3 library. I tried following code but unfortunately its throwing following error -
VM224 d3.v3.js:670 Error: attribute d: Expected number,
"M0,NaNL890,NaN"
What could be the cause of this error?
Code -
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var n = 20; // n-period of moving average
var k = 2; // k times n-period standard deviation above/below moving average
var parseDate = d3.time.format("%m/%d/%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")
.tickSize(3, 0);
var line = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close);
});
var ma = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.ma);
});
var lowBand = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.low);
});
var highBand = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.high);
});
var bandsArea = d3.svg.area()
.x(function(d) {
return x(d.date);
})
.y0(function(d) {
return y(d.low);
})
.y1(function(d) {
return y(d.high);
});
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 = [
[
"9/9/2012",
1000
],
[
"9/14/2013",
100
]
];
data.forEach(function(d) {
d.date = parseDate(d[0]);
d.close = parseInt(d[1]);
var bandsData = getBollingerBands(n, k, data);
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([d3.min(bandsData, function(d) {
return d.low;
}),
d3.max(bandsData, function(d) {
return d.high;
})
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("path")
.datum(bandsData)
.attr("class", "area bands")
.attr("d", bandsArea);
svg.append("path")
.datum(bandsData)
.attr("class", "line bands")
.attr("d", lowBand);
svg.append("path")
.datum(bandsData)
.attr("class", "line bands")
.attr("d", highBand);
svg.append("path")
.datum(bandsData)
.attr("class", "line ma bands")
.attr("d", ma);
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
function getBollingerBands(n, k, data) {
var bands = []; //{ ma: 0, low: 0, high: 0 }
for (var i = n - 1, len = data.length; i < len; i++) {
var slice = data.slice(i + 1 - n, i);
var mean = d3.mean(slice, function(d) {
return d.close;
});
var stdDev = Math.sqrt(d3.mean(slice.map(function(d) {
return Math.pow(d.close - mean, 2);
})));
bands.push({
date: data[i].date,
ma: mean,
low: mean - (k * stdDev),
high: mean + (k * stdDev)
});
}
return bands;
}
Fiddle

See working jsfiddle
First problem was, this being Bollinger Bands, that it needed more than the 2 data points you supplied it. When passing n=20 to getBollingerBands() it means it'll want to extract a mean value out of 20 consecutive data points. Since there were only 2, it yielded a blank array, which in turn caused NaN values to make it into the <path>.
I updated that data array to be a whole lot longer, as needed.
The other issue was that instead of this:
data.forEach(function(d) {
d.date = parseDate(d[0]);
d.close = parseInt(d[1]);
})
you had the function passed to forEach extend all the way down to include all the rendering code (eg svg.append("path")), which meant it was trying to render the whole thing one per data point (i.e. potentially hundreds of times).

How to append path from data inside nested structure in d3.js?

I am new using d3.js. I like to represent a multiline chart. In the x axis the years, in the y axis the quantity of patents every country has. Every line should be a different country.
I have a csv file with the following information:
PATENT,GYEAR,GDATE,APPYEAR,COUNTRY
3070801,1963,1096,,"BE"
3070802,1963,1096,,"US"
3070802,1963,1096,,"US"
3070802,1963,1096,,"US"
3070802,1963,1096,,"US"
3070803,1964,1096,,"US"
3070804,1964,1096,,"US"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
...
I use a nested structure like the following:
var countries = d3.nest()
.key(function(d) { return d.COUNTRY; })
.key(function(d) { return d.GYEAR; })
.rollup(function(v) { return { "total": v.length} })
.map(data);
This structure give me the information in the following way:
BE: Object
1963: Object
total: 1
1964: Object
total: 6
US: Object
1963: Object
total: 4
1964: Object
total: 2
My script:
<script>
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) {...}) //not so sure how to obtain the x and y
.y(function(d) {... });
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("data3", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function (key) {
return key !== "GYEAR";
}));
data.forEach(function(d) {
d.GYEAR = parseDate(String(d.GYEAR));
});
var countries = d3.nest()
.key(function(d) { return d.COUNTRY; })
.key(function(d) { return d.GYEAR; })
.rollup(function(v) { return { "total": v.length} })
.map(data);
x.domain(d3.extent(data, function (d) {
return d.GYEAR;
}));
y.domain([0,10]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '1.5px'})
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '1.5px'})
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Cantidad");
var city = svg.selectAll(".country")
.data(countries)
.enter().append("g")
.attr("class", "country");
//How to append path?
city.append("path")
.attr("class", "line")
.attr("d", function(d) {...})
.style("stroke", function(d) {...});
});
</script>
How can I construct my var line? How can I append the path?
Thanks in advance.

For generating line function you can do:
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) {console.log(x(d.year));return x(d.year)}) // x will be year
.y(function(d) {console.log(y(d.total));return y(d.total)}); //y will be total
For rollup function get all the data:
var countries = d3.nest()
.key(function(d) { return d.COUNTRY; })
.key(function(d) { return d.GYEAR.getFullYear(); })
.rollup(function(v){
var pat = 0;
var yr = 0;
var country = ""
v.forEach(function(r){
pat += parseInt(r.PATENT);
yr = r.GYEAR;
country = r.COUNTRY
});
//store all the info like patent year country
return { "total": v.length, patent:pat, year:yr, country: country}
})
.map(data);
For setting values for Line:
var city = svg.selectAll(".country")
.data([countries.BE, countries.US])//this will genrate 2 lines for the two datset.
.enter().append("g")
.attr("class", "country");
//How to append path?
city.append("path")
.attr("class", "line")
.attr("d", function(d) {
var d_array = []
//for all the years make it an array
for (key in d) {
d_array.push(d[key])
}
return line(d_array);
})
.style("stroke", function(d) {
var country = "";
//the first object will tell the country
for (key in d) {
country = d[key].country;
break;
}
return color(country)
});
EDIT
For putting the countries in general form:
Instead of doing this:
.data([countries.BE, countries.US]),
Do this to get the array:
var country_data = [];
for (key in countries) {
country_data.push(countries[key])
}
and later do
.data(country_data),
Working code here
Cleaner code here
Hope this helps!

D3 multi line chart mouseover issue

I found a reference to the issue I am facing in this link
'nemesv' has provided with a solution to the actual issue.
var myApp = angular.module('app', []);
myApp.directive("lineChart", function() {
return {
restrict: 'E',
scope: {
data: '=',
id: '#'
},
link: function (scope, element, attrs) {
scope.$watch( 'data', function ( data ) {
d3.select("#"+attrs.id).select("svg").remove();
if (data) {
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = element[ 0 ].parentElement.offsetWidth - margin.left - margin.right,
height = element[ 0 ].parentElement.offsetHeight - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var bisectDate = d3.bisector(function(d) { return d[0]; }).left;
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")
.innerTickSize(-height)
.ticks(4)
.outerTickSize(0)
.tickPadding(5)
.tickFormat(function(d) { return d3.time.format('%d/%m %H:%M')(new Date(d)); });
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);
var line = d3.svg.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
var svg = d3.select(element[0]).append("svg")
.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 '+ element[ 0 ].parentElement.offsetWidth +' '+ element[ 0 ].parentElement.offsetHeight )
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var minX = d3.min(data, function (item) { return d3.min(item.values, function (d) { return d[0]; }); });
var maxX = d3.max(data, function (item) { return d3.max(item.values, function (d) { return d[0]; }); });
var minY = d3.min(data, function (item) { return d3.min(item.values, function (d) { return d[1]; }); });
var maxY = d3.max(data, function (item) { return d3.max(item.values, function (d) { return d[1]; }); });
x.domain([minX, maxX]);
y.domain([0, maxY]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var domaine = svg.selectAll(".domaine")
.data(data)
.enter().append("g")
.attr("class", "domaine");
domaine.append("path")
.attr("class", "line")
.attr("d", function (d) {
return line(d.values);
})
.style("stroke", function (d) {
return d.color;
});
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
for(var i=0;i<data.length;i++){
focus.append("g")
.attr("class", "focus"+i)
.append("circle")
.attr("r", 4.5);
svg.select(".focus"+i)
.append("text")
.attr("x", 9)
.attr("dy", ".35em");
}
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]);
var series = data.map(function(e) {
var i = bisectDate(e.values, x0, 1),
d0 = e.values[i - 1],
d1 = e.values[i];
return x0 - d0[0] > d1[0] - x0 ? d1 : d0;
});
for(var i=0; i<series.length;i++){
var selectedFocus = svg.selectAll(".focus"+i);
selectedFocus.attr("transform", "translate(" + x(series[i][0]) + "," + y(series[i][1]) + ")");
selectedFocus.select("text").text(series[i][1]);
}
}
}
});
}
};
});
function MainCtrl($scope) {
$scope.lineData = [{"key": "users","color": "#16a085","values": [[1413814800000,4034.418],[1413815400000,5604.155000000001],[1413816000000,6343.079],[1413816600000,7308.226],[1413817200000,9841.185],[1413817800000,6571.891],[1413818400000,4660.6005000000005],[1413819000000,4555.4795],[1413819600000,5963.723],[1413820200000,9179.9595]]},{"key": "users 2","color": "#d95600","values": [[1413814800000,3168.183],[1413815400000,1530.8435],[1413816000000,2416.071],[1413816600000,1274.309],[1413817200000,1105.0445],[1413817800000,2086.0299999999997],[1413818400000,712.642],[1413819000000,1676.725],[1413819600000,3721.46],[1413820200000,2887.7975]]}];
}
Presently, if I hover over one line, I can see another dot hovering over the other line as well - i.e. mouseover is working simultaneously on both the lines. Could this mouseover/tooltip be done separately on each line i.e. when I hover over one line, focus circle will appear for only that line?

How to modify color stroke in multiple charts with d3js nest() data

I'm trying to add line color condition by axis value
attr("stroke","red") if date > 'Jan 2008' I have tried to modify var line with this code below, but it didn't work. Any recommendation would be appreciated.
> var line = d3.svg.line()
> .x(function(d) { return x(d.date); })
> .y(function(d) { return y(d.price); })
> .attr( "stroke", function(d) { if (d.date > 'Jan 2008' { return "red"}; })
from d3 code below or fullcode and dataset from this link : http://bl.ocks.org/mbostock/1157787
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0;
}
.line {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
.area {
fill: #e7e7e7;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 8, right: 10, bottom: 2, left: 10},
width = 960 - margin.left - margin.right,
height = 69 - margin.top - margin.bottom;
var parseDate = d3.time.format("%b %Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.price); });
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });
d3.csv("stocks.csv", type, function(error, data) {
// Nest data by symbol.
var symbols = d3.nest()
.key(function(d) { return d.symbol; })
.entries(data);
// Compute the maximum price per symbol, needed for the y-domain.
symbols.forEach(function(s) {
s.maxPrice = d3.max(s.values, function(d) { return d.price; });
});
// Compute the minimum and maximum date across symbols.
// We assume values are sorted by date.
x.domain([
d3.min(symbols, function(s) { return s.values[0].date; }),
d3.max(symbols, function(s) { return s.values[s.values.length - 1].date; })
]);
// Add an SVG element for each symbol, with the desired dimensions and margin.
var svg = d3.select("body").selectAll("svg")
.data(symbols)
.enter().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 + ")");
// Add the area path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "area")
.attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); });
// Add the line path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "line")
.attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); });
// Add a small label for the symbol name.
svg.append("text")
.attr("x", width - 6)
.attr("y", height - 6)
.style("text-anchor", "end")
.text(function(d) { return d.key; });
});
function type(d) {
d.price = +d.price;
d.date = parseDate(d.date);
return d;
}
</script>

d3 multiple y axis for multiple bar chart

I have built a chart like this example
http://bl.ocks.org/mbostock/4679202
here I would like to have y-axis labels for each series
the below code is my code to generate graph
since its a stacked layout. it feels a little complex for me imagine the y-axis transform attribute for each series
var margin = {top: 10, right: 5, bottom: -6, left: 5};
var width = $(div).width(),
height = $(div).height() - margin.top - margin.bottom;
var svg = d3.select(div).append('svg')
.attr('width',width)
.attr('height',height)
.append("g")
.attr("transform", "translate("+margin.left+"," + margin.top + ")");;
var nest = d3.nest()
.key(function(d) { return d.group; });
var stack = d3.layout.stack()
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; })
.out(function(d, y0) { d.valueOffset = y0; });
var dataByGroup = nest.entries(data);
stack(dataByGroup);
var x = d3.scale.ordinal()
.rangeRoundBands([0, width-7], .25, 0);
var y0 = d3.scale.ordinal()
.rangeRoundBands([height-15, 0], .2);
var timeFormat = d3.time.format("%c");
var MinuteNameFormat = d3.time.format("%H:%M");
var y1 = d3.scale.linear();
var formatDate = function(d,i) {if(i%3 == 0){var date = new Date(parseInt(d)); return MinuteNameFormat(date);}else{return "";} };
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.minutes,15)
.tickFormat(formatDate);
var yAxis = d3.svg.axis()
.scale(y1)
.orient("Left")
.ticks(0)
.tickFormat(formalLabel);
x.domain(dataByGroup[0].values.map(function(d) { return d.date; }));
y0.domain(dataByGroup.map(function(d) { return d.key; }));
y1.domain([0, d3.max(data, function(d) { return d.value; })]).range([y0.rangeBand(), 0]);
var tooltip = d3.select(div)
.append("div")
.style("position", "absolute")
.style("z-index", "10").attr("class","tooltip")
.style("visibility", "hidden")
.style("background","#fff")
.style("border","1px solid #CCC")
.style("font-size", "11px")
.style("padding","11px")
.text("a simple tooltip");
var group = svg.selectAll(".group")
.data(dataByGroup)
.enter().append("g")
.attr("class", "group")
.attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });
group.filter(function(d, i) { return !i; }).append("g")
.attr("class", "y axis")
.attr("transform", "translate(0," + y0.rangeBand() + ")")
.call(yAxis);
var tipText
var bars = group.selectAll("rect")
.data(function(d) { return d.values; })
.enter().append("g");
bars.append("rect")
.style("fill", function(d,i) { return getColor(d.ip); })
.attr("x", function(d) { return x(d.date); })
.attr("y", function(d) { return y1(d.value); })
.attr("width",x.rangeBand()) //x.rangeBand()
.attr("height", function(d) { return y0.rangeBand() - y1(d.value); });
group.filter(function(d, i) { return !i; }).append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y0.rangeBand() + ")")
.call(xAxis);
this is the code for my d3 graph
can anyone suggest ??

This is entirely possible, but it would clutter you graph if you have more than 2 y-axis, one on the left side and one on the right.
Here is an example: http://bl.ocks.org/benjchristensen/2579619
You declare an axis with this code:
var yAxis = d3.svg.axis()
.scale(y1)
.orient("Left")
.ticks(0)
.tickFormat(formalLabel);
You just need to put 1 of this for each element, and you also need to declare a new y1,y2,y3... etc for each element. And finally you need to make sure each data is bound to a different axis y1,y2,y3... etc
Hope this helps.