All geek questions in one place

D3.js - How to highlight the largest and smallest (minimum and maximum) columns in a histogram?

I am a Designer just starting to fool around with some d3 tutorials, and of course I was just stuck at some point. I was wondering which one is best to highlight the largest and smallest columns in the histogram. I would like them to differ in color, like "red" for a smaller "green" for the largest. Anyone can help me.

This is what I got so far:

<body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var t = 1297110663, // start time (seconds since epoch) v = 70, // start value (subscribers) data = d3.range(30).map(next); // starting dataset function next() { return { time: ++t, value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5))) }; } setInterval(function() { data.shift(); data.push(next()); redraw(); }, 1500); var w = 11, h = 120; var x = d3.scale.linear() .domain([0, 1]) .range([0, w]); var y = d3.scale.linear() .domain([0, 100]) .range([0, h]); var chart = d3.select("body").append("svg") .attr("width", w * (data.length +3)) .attr("height", h); chart.selectAll("rect") .data(data) .enter().append("rect") .attr("x", function(d, i) { return x(i) ; }) .attr("y", function(d) { return h - y(d.value) - .5; }) .attr("width", w) .attr("height", function(d) { return y(d.value); }) .style("fill", "#ccc") .style("stroke", "white") chart.select("rect") .style("fill", "red"); chart.append("line") .attr("x1", 0) .attr("x2", w * (data.length)) .attr("y1", h - .5) .attr("y2", h - .5) .style("stroke", "black"); </script>

Thank you very much in advance

+6
source share
1 answer

You can use:

 d3.max(data, function(d) { return d.value; });

together with the corresponding d3.min function to get the volume (there is also d3.extent that returns [min, max] ).

Then you could say:

 chart.select("rect") .filter(function(d) { return d.value === max; }) .classed("max", true);

which will add the max class to any row with a maximum value. Do the same for min and you are good.

You should also save your choice, for example:

 var bars = chart.selectAll("rect") .data(data); //use later, like bars.enter()... bars.filter()...
+4
source

Source: https://habr.com/ru/post/951004/

More articles:


All Articles