// plot a histogram from mpg data in a .csv file
function parserzz(d) {
d.vmeas = +(d.vmeas*1E9)-175;
return d;
}
function vhistzz(csvdata) {
var binsize = 1;
var minbin = -3500;
var maxbin = 3000;
var numbins = (maxbin - minbin) / binsize;
// whitespace on either side of the bars in units of MPG
var binmargin = 0;
var margin = {top: 10, right: 30, bottom: 40, left: 50};
var width = 400 - margin.left - margin.right;
var height = 200 - margin.top - margin.bottom;
// Set the limits of the x axis
var xmin = minbin - 100
var xmax = maxbin + 100
histdata = new Array(numbins);
for (var i = 0; i < numbins; i++) {
histdata[i] = { numfill: -1, meta: "" };
}
// Fill histdata with y-axis values and meta data
csvdata.forEach(function(d) {
var bin = Math.floor((d.vmeas - minbin) / binsize);
if ((bin.toString() != "NaN") && (bin < histdata.length)) {
histdata[bin].numfill += 1;
histdata[bin].meta += "
" + "en" + " | " + d.vmeas.toFixed(3) + " nVDC |
";
}
});
// This scale is for determining the widths of the histogram bars
// Must start at 0 or else x(binsize a.k.a dx) will be negative
var x = d3.scale.linear()
.domain([0, (xmax - xmin)])
.range([0, width]);
// Scale for the placement of the bars
var x2 = d3.scale.linear()
.domain([xmin, xmax])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(histdata, function(d) {
return d.numfill;
})])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x2)
.ticks(10)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.ticks(10)
.orient("left");
var tip = d3.tip()
.attr('class', 'd3-tip')
.direction('e')
.offset([0, 20])
.html(function(d) {
return '";
});
// put the graph in the "mpg" div
var svg = d3.select("#a34410B").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 + ")");
svg.call(tip);
// set up the bars
var bar = svg.selectAll(".bar")
.data(histdata)
.enter().append("g")
.attr("class", "bar")
.style("fill", "#0a7")
.style("opacity","0.6")
.attr("transform", function(d, i) { return "translate(" +
x2(i * binsize + minbin) + "," + y(d.numfill) + ")"; })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
// add rectangles of correct size at correct location
bar.append("rect")
.attr("x", x(binmargin))
.attr("width", "6")
.style("fill", "#0a7")
.attr("height", function(d) { return height - y(d.numfill); });
// add the x axis and x-label
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.style("font-size","10px")
.style("fill", "#f00")
.call(xAxis);
svg.append("text")
.attr("class", "xlabel")
.style("fill", "#0a7")
.attr("text-anchor", "middle")
.attr("x", width / 1.1)
.attr("y", height + margin.bottom - 70)
.text("nVDC");
// add the y axis and y-label
svg.append("g")
.attr("class", "y axis")
.style("font-size","12px")
.attr("transform", "translate(5,0)")
.style("fill", "#0a7")
.call(yAxis);
svg.append("text")
.attr("class", "ylabel")
.attr("y", 0 - margin.left) // x and y switched due to rotation
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.attr("transform", "rotate(-90)")
.style("text-anchor", "middle")
.text("34410A #samples");
}
// Read in .csv data and make graph
d3.csv("/static/data/short_dcv/NANDBlog/34410A_10NPLC_10V.csv", parserzz,
function(error, csvdata) {
vhistzz(csvdata);
});