D3 How to get the number of 'rows' from tsv data? - d3.js

Question

First time using D3 and I'm stuck on something I think should be simple:
I'm trying to make a percentage width bar chart SVG and I'd like to set the width of each bar to be the number of 'bars' it will be creating.
svg.selectAll(".bar")
.data(function(d) {return d.values;})
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.browser); })
.attr("width", function(d) { return (100 / d.browser.length);})
.attr("y", function(d) { return y(d.time); })
.attr("height", function(d) { return height - y(d.time); })
.attr("fill", function(d) {return "#"+d.colour;})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
The key part that isn't working being this: .attr("width", function(d) { return (100 / d.browser.length);})
Which doesn't work. Here is a sample of my TSV data:
test browser time colour
1 - attr selector Chrome 65 fad009
1 - attr selector Firefox 125 dd8e27
1 - attr selector Opera 72 cc0f16
1 - attr selector IE9 140 27b7ed
1 - attr selector Android-4 120 80bd01
2 - attr qualified Chrome 64 fad009
2 - attr qualified Firefox 132 dd8e27
2 - attr qualified Opera 78 cc0f16
2 - attr qualified IE9 120 27b7ed
2 - attr qualified Android-4 145 80bd01
Both column 1 and 2 are constants in that they are only ever one of 5 values and whilst I can hard-code 20% in there I'd like to set it properly so that is I add another set of results it still spaces correctly.
My JS-fu is weak so feel free to patronise me like you were teaching a child ;)
Any thoughts?
Further to request for for code:
// Adapted from http://bl.ocks.org/officeofjane/7315455
var margin = {top: 45, right: 20, bottom: 20, left: 200},
width = 850 - margin.left - margin.right,
height = 90 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.1);
// Scales. Note the inverted domain fo y-scale: bigger is up!
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 tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>" + d.test + "\t" + d.browser + "</strong><br/><span style='color:#fff'>" + d.time + " ms</span>";
});
// csv loaded asynchronously
d3.tsv("data2.tsv", type, function(data) {
// Data is nested by country
var selectorTests = d3.nest()
.key(function(d) { return d.test; })
.entries(data);
// Compute the minimum and maximum year and percent across symbols.
x.domain(data.map(function(d) { return d.browser; }));
y.domain([0, d3.max(selectorTests, function(s) { return s.values[0].time; })]);
// Add an SVG element for each country, with the desired dimensions and margin.
var svg = d3.select("#selectors").selectAll("svg")
.data(selectorTests)
.enter().append("svg")
.attr({
"width": "100%",
"height": "100%"
})
.attr("viewBox", "0 0 " + width + " " + height )
.attr("preserveAspectRatio", "xMidYMid meet")
.attr("pointer-events", "all")
.append("g").attr("transform", "translate(0,0)");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.append("text")
.attr("x", "0")
.attr("y", '-100%')
.attr("dy", ".71em")
.attr("text-anchor", "start")
.attr("font-size", "1.1em")
.text(function(d) { return d.key;});
// Accessing nested data: https://groups.google.com/forum/#!topic/d3-js/kummm9mS4EA
svg.selectAll(".bar")
.data(function(d) {return d.values;})
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.browser); })
.attr("width", data.length)
.attr("y", function(d) { return y(d.time); })
.attr("height", function(d) { return height - y(d.time); })
.attr("fill", function(d) {return "#"+d.colour;})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
svg.call(tip);
});
function type(d) {
d.time = +d.time;
return d;
}
If I just use data.length I get '10' which is the total number of 'entries' (apologies I probably have completely incorrect terminology here) - I want/expect to see '5' as that is the number of bars that get created with each instance give the data. Hope that makes sense?

Answer 1

I think it's useful to visualize how you're data is being formatted and "passed around":
d3.nest returns your data in this format:
[
{key: "1 - attr selector", values: [
{test: "1 - attr selector", browser: "Chrome", time: 65, colour: "fad009"},
{test: "1 - attr selector", browser: "Firefox", time: 125, colour: "dd8e27"},
...
]},
{key: "2 - attr qualified", values: [
{test: "2 - attr qualified", browser: "Chrome", time: 64, colour: "fad009"},
{test: "2 - attr qualified", browser: "Firefox", time: 132, colour: "dd8e27"},
....
]},
...
]
Then you have two subsequent calls to data: one in the svg definition and another one in the first code snippet you posted. After the first one the d element will be of the form
{key: "1 - attr selector", values: [
{test: "1 - attr selector", browser: "Chrome", time: 65, colour: "fad009"},
{test: "1 - attr selector", browser: "Firefox", time: 125, colour: "dd8e27"},
...
]}
And this is where you should call d.values.length to get the number of browsers for that specific test.
After the second call to data, where you do .data(function(d) {return d.values;}) each d element is in the form
{test: "1 - attr selector", browser: "Chrome", time: 65, colour: "fad009"}
And you see that at this point calling d.browser.length will return the length of the string with the browser name - not really what you want.
You have to get the number of browser before calling data for the second time, but you have to use it after calling it - that's the problem. You need to get the parent datum.
I hope I made the problem clear to you.
Talking about solutions, there are several. I'm not sure but d3.select(this.parentNode).datum().length or d3.select(this).node().parentNode.__data__.length or something similar instead of d.browser.length could work. Or you could remember the length in a variable (better, an array: each test could have a different number of browsers it was tested on) out of the selection and then use it.