StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POError with filter in d3.js
primarykey
Id
17163294
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
6
CommunityOwnedDate
CreationDate
2013-06-18T07:47:34.920
FavoriteCount
0
LastActivityDate
2013-06-18T08:45:17.667
LastEditDate
2017-05-23T11:50:01.317
LastEditorUserId
-1
OwnerUserId
2409375
ParentId
0
PostTypeId
1
Score
0
ViewCount
1014
LastEditorDisplayName
text
Body
<p>This is regarding, a previously answered question. <a href="https://stackoverflow.com/questions/10615290/select-data-from-a-csv-before-loading-it-with-javascript-d3-library">Select data from a CSV before loading it with javascript (d3 library)</a></p> <p>With respect to box plot example in d3.js, I tried using the filter function on the csv file to filter the data based on type. and its giving an error saying Uncaught TypeError: Cannot call method 'map' of undefined.</p> <p>Problem: If type is Boiler it working properly, But if the type is given as chiller it is giving the above error. Please someone help me debug this problem. Thanks in advance.</p> <p>Filter Function:</p> <pre><code>d3.csv("morley.csv", function(csv) { var data = []; csv = csv.filter(function(row) { return row['type'] == 'Chiller'; }) </code></pre> <p>CSV formatt:</p> <pre><code>AID Month Volatality type 1 11 1000 Boiler 1 12 980 Boiler 2 1 960 Chiller 2 2 940 Chiller 2 3 960 Chiller 2 4 940 Chiller 2 5 880 Chiller 2 6 800 Chiller 2 7 850 Chiller 2 8 880 Chiller 2 9 900 Chiller 2 10 840 Chiller 2 11 830 Chiller 2 12 790 Chiller </code></pre> <p>Box function:</p> <pre><code> (function() { // Inspired by http://informationandvisualization.de/blog/box-plot d3.box = function() { var width = 1, height = 1, duration = 0, domain = null, value = Number, whiskers = boxWhiskers, quartiles = boxQuartiles, tickFormat = null; // For each small multiple… function box(g) { g.each(function(d, i) { d = d.map(value).sort(d3.ascending); var g = d3.select(this), n = d.length, min = d[0], max = d[n - 1]; // Compute quartiles. Must return exactly 3 elements. var quartileData = d.quartiles = quartiles(d); // Compute whiskers. Must return exactly 2 elements, or null. var whiskerIndices = whiskers && whiskers.call(this, d, i), whiskerData = whiskerIndices && whiskerIndices.map(function(i) { return d[i]; }); // Compute outliers. If no whiskers are specified, all data are "outliers". // We compute the outliers as indices, so that we can join across transitions! var outlierIndices = whiskerIndices ? d3.range(0, whiskerIndices[0]).concat(d3.range(whiskerIndices[1] + 1, n)) : d3.range(n); // Compute the new x-scale. var x1 = d3.scale.linear() .domain(domain && domain.call(this, d, i) || [min, max]) .range([height, 0]); // Retrieve the old x-scale, if this is an update. var x0 = this.__chart__ || d3.scale.linear() .domain([0, Infinity]) .range(x1.range()); // Stash the new scale. this.__chart__ = x1; // Note: the box, median, and box tick elements are fixed in number, // so we only have to handle enter and update. In contrast, the outliers // and other elements are variable, so we need to exit them! Variable // elements also fade in and out. // Update center line: the vertical line spanning the whiskers. var center = g.selectAll("line.center") .data(whiskerData ? [whiskerData] : []); center.enter().insert("line", "rect") .attr("class", "center") .attr("x1", width / 2) .attr("y1", function(d) { return x0(d[0]); }) .attr("x2", width / 2) .attr("y2", function(d) { return x0(d[1]); }) .style("opacity", 1e-6) .transition() .duration(duration) .style("opacity", 1) .attr("y1", function(d) { return x1(d[0]); }) .attr("y2", function(d) { return x1(d[1]); }); center.transition() .duration(duration) .style("opacity", 1) .attr("y1", function(d) { return x1(d[0]); }) .attr("y2", function(d) { return x1(d[1]); }); center.exit().transition() .duration(duration) .style("opacity", 1e-6) .attr("y1", function(d) { return x1(d[0]); }) .attr("y2", function(d) { return x1(d[1]); }) .remove(); // Update innerquartile box. var box = g.selectAll("rect.box") .data([quartileData]); box.enter().append("rect") .attr("class", "box") .attr("x", 0) .attr("y", function(d) { return x0(d[2]); }) .attr("width", width) .attr("height", function(d) { return x0(d[0]) - x0(d[2]); }) .transition() .duration(duration) .attr("y", function(d) { return x1(d[2]); }) .attr("height", function(d) { return x1(d[0]) - x1(d[2]); }); box.transition() .duration(duration) .attr("y", function(d) { return x1(d[2]); }) .attr("height", function(d) { return x1(d[0]) - x1(d[2]); }); // Update median line. var medianLine = g.selectAll("line.median") .data([quartileData[1]]); medianLine.enter().append("line") .attr("class", "median") .attr("x1", 0) .attr("y1", x0) .attr("x2", width) .attr("y2", x0) .transition() .duration(duration) .attr("y1", x1) .attr("y2", x1); medianLine.transition() .duration(duration) .attr("y1", x1) .attr("y2", x1); // Update whiskers. var whisker = g.selectAll("line.whisker") .data(whiskerData || []); whisker.enter().insert("line", "circle, text") .attr("class", "whisker") .attr("x1", 0) .attr("y1", x0) .attr("x2", width) .attr("y2", x0) .style("opacity", 1e-6) .transition() .duration(duration) .attr("y1", x1) .attr("y2", x1) .style("opacity", 1); whisker.transition() .duration(duration) .attr("y1", x1) .attr("y2", x1) .style("opacity", 1); whisker.exit().transition() .duration(duration) .attr("y1", x1) .attr("y2", x1) .style("opacity", 1e-6) .remove(); // Update outliers. var outlier = g.selectAll("circle.outlier") .data(outlierIndices, Number); outlier.enter().insert("circle", "text") .attr("class", "outlier") .attr("r", 5) .attr("cx", width / 2) .attr("cy", function(i) { return x0(d[i]); }) .style("opacity", 1e-6) .transition() .duration(duration) .attr("cy", function(i) { return x1(d[i]); }) .style("opacity", 1); outlier.transition() .duration(duration) .attr("cy", function(i) { return x1(d[i]); }) .style("opacity", 1); outlier.exit().transition() .duration(duration) .attr("cy", function(i) { return x1(d[i]); }) .style("opacity", 1e-6) .remove(); // Compute the tick format. var format = tickFormat || x1.tickFormat(8); // Update box ticks. var boxTick = g.selectAll("text.box") .data(quartileData); boxTick.enter().append("text") .attr("class", "box") .attr("dy", ".3em") .attr("dx", function(d, i) { return i & 1 ? 6 : -6 }) .attr("x", function(d, i) { return i & 1 ? width : 0 }) .attr("y", x0) .attr("text-anchor", function(d, i) { return i & 1 ? "start" : "end"; }) .text(format) .transition() .duration(duration) .attr("y", x1); boxTick.transition() .duration(duration) .text(format) .attr("y", x1); // Update whisker ticks. These are handled separately from the box // ticks because they may or may not exist, and we want don't want // to join box ticks pre-transition with whisker ticks post-. var whiskerTick = g.selectAll("text.whisker") .data(whiskerData || []); whiskerTick.enter().append("text") .attr("class", "whisker") .attr("dy", ".3em") .attr("dx", 6) .attr("x", width) .attr("y", x0) .text(format) .style("opacity", 1e-6) .transition() .duration(duration) .attr("y", x1) .style("opacity", 1); whiskerTick.transition() .duration(duration) .text(format) .attr("y", x1) .style("opacity", 1); whiskerTick.exit().transition() .duration(duration) .attr("y", x1) .style("opacity", 1e-6) .remove(); }); d3.timer.flush(); } box.width = function(x) { if (!arguments.length) return width; width = x; return box; }; box.height = function(x) { if (!arguments.length) return height; height = x; return box; }; box.tickFormat = function(x) { if (!arguments.length) return tickFormat; tickFormat = x; return box; }; box.duration = function(x) { if (!arguments.length) return duration; duration = x; return box; }; box.domain = function(x) { if (!arguments.length) return domain; domain = x == null ? x : d3.functor(x); return box; }; box.value = function(x) { if (!arguments.length) return value; value = x; return box; }; box.whiskers = function(x) { if (!arguments.length) return whiskers; whiskers = x; return box; }; box.quartiles = function(x) { if (!arguments.length) return quartiles; quartiles = x; return box; }; return box; }; function boxWhiskers(d) { return [0, d.length - 1]; } function boxQuartiles(d) { return [ d3.quantile(d, .25), d3.quantile(d, .5), d3.quantile(d, .75) ]; } })(); </code></pre> <p>Main html code:</p> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .box { font: 10px sans-serif; } .box line, .box rect, .box circle { fill: #fff; stroke: #000; stroke-width: 1.5px; } .box .center { stroke-dasharray: 3,3; } .box .outlier { fill: none; stroke: #ccc; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="box.js"></script> <script> var margin = {top: 10, right: 50, bottom: 20, left: 50}, width = 120 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var min = Infinity, max = -Infinity; var chart = d3.box() .whiskers(iqr(1.5)) .width(width) .height(height); d3.csv("b1.csv", function(error, csv) { var data = []; csv.forEach(function(x) { var e = Math.floor(x.Expt - 1001), r = Math.floor(x.Run - 1), s = Math.floor(x.Speed), d = data[e]; console.log(e); console.log(d); if (!d) d = data[e] = [s]; else d.push(s); if (s > max) max = s; if (s < min) min = s; }); chart.domain([min, max]); var svg = d3.select("body").selectAll("svg") .data(data) .enter().append("svg") .attr("class", "box") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.bottom + margin.top) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(chart); setInterval(function() { svg.datum(randomize).call(chart.duration(1000)); }, 2000); }); function randomize(d) { if (!d.randomizer) d.randomizer = randomizer(d); return d.map(d.randomizer); } function randomizer(d) { var k = d3.max(d) * .02; return function(d) { return Math.max(min, Math.min(max, d + k * (Math.random() - .5))); }; } // Returns a function to compute the interquartile range. function iqr(k) { return function(d, i) { var q1 = d.quartiles[0], q3 = d.quartiles[2], iqr = (q3 - q1) * k, i = -1, j = d.length; while (d[++i] < q1 - iqr); while (d[--j] > q3 + iqr); return [i, j]; }; } </script> </code></pre>
Tags
<javascript><jquery><d3.js><boxplot>
Title
Error with filter in d3.js
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USuser2409375
plurals
PostLinksPostIdRelatedPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.