I need to count the longest strip of blue bars until we attach the bar chart obtained using the code below: 
For example, if I am approaching the first bar (which turns red), the longest bar should show 0, the second tilt (and also red) also 0. When you hover over the third bar, which is blue, it should show 1. and while we do not hang around line 18 it should show the longest bar as 2. Since 20 years, where there are more than two consecutive blues bars, it says 3. Even if I hover over line # 21, it should still show the longest bar as 3. and he must continue to show it until h appears tyre or more blue stripes.
body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: orange; } .bar:hover { fill: cyan ; } .x.axis path { display: none; } .grid .tick { stroke: lightgrey; opacity: 0.7; } .grid path { stroke-width: 0; } .d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: cyan; border-radius: 2px; } /* Creates a small triangle extender for the tooltip */ .d3-tip:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\25BC"; position: absolute; text-align: center; } /* Style northward tooltips differently */ .d3-tip.n:after { margin: -1px 0 0 0; top: 100%; left: 0; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> <script> var margin = {top: 40, right: 20, bottom: 50, left: 70}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var formatPercent = d3.format(".0%"); var x = d3.scale.ordinal() .rangeRoundBands([0, width], .5); 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>Time Used:</strong> <span style='color:cyan'>" + d.frequency + "</span>" + "<br/>" + "<strong>Longest Streak:</strong> <span>" + (d.criteria.match(/lightblue/g) || []).length+"</span>"; }) 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 + ")"); svg.call(tip); function make_y_axis() { return d3.svg.axis() .scale(y) .orient("left") .ticks(10) } d3.tsv("pass_fail_bars_data.tsv", type, function (error, data) { x.domain(data.map(function(d) { return d.problem_number; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 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("x", -height / 3) .attr("y", -50) .attr("dy", ".71em") .style("text-anchor", "end") .text("Time Used (Seconds)"); svg.append("g") .attr("class", "grid") .call(make_y_axis() .tickSize(-width, 0, 0) .tickFormat("") ) svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("transform", "rotate(0)") .attr("x", width / 2) .attr("y", 40) .attr("dx", "1em") .style("text-anchor", "middle") .text("Problem #") .attr("fill", "blue"); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function (d) { return x(d.problem_number); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function (d) { return height - y(d.frequency); }) .style("fill", function(d) { return d.criteria; }) .on('mouseover', tip.show) .on('mouseout', tip.hide) }); function type(d) { d.frequency = +d.frequency; return d; } </script>
Currently, only the current value of the blue bar is displayed. That is, if I am on the blue bar, it only counts this bar and shows the long bar as 1. What is true in this case, but when I am on bar # 20, then it also displays the "long bar" as 1, when it should display as 3.
Any suggestion How can I change this code further to get the desired result?
Here is the data I use "pass_fail_bars_data.tsv"
problem_number frequency criteria 1 08167 "red" 2 01492 "red" 3 02780 "lightblue" 4 04253 "red" 5 12702 "red" 6 02288 "lightblue" 7 02022 "red" 8 06094 "red" 9 06973 "lightblue" 10 00153 "lightblue" 11 00747 "red" 12 04025 "red" 13 02517 "lightblue" 14 06749 "red" 15 07507 "lightblue" 16 01929 "red" 17 00098 "red" 18 05987 "lightblue" 19 06333 "lightblue" 20 09056 "lightblue" 21 02758 "red" 22 01037 "lightblue" 23 02465 "lightblue" 24 00150 "red" 25 01971 "lightblue" 26 00074 "lightblue"