Styjun

I am creating a histogram in d3. After manipulating a larger dataset, I am left with the following dataset, which are scores ranging from 0 to 10.

m_data = [6, 9, 5, 6, 7, 5, 8, 7, 4, 7, 4, 3, 5, 8, 5, 4, 8, 7, 6, 9, 4, 6, 8]

The problem is that the bins created from our "binmaker" do not bind data from m_data to respective bins.

We create bins using m_data. We use 10 ticks (0-10). Very little information is floating around surrounding specific problems for histograms in D3 v5.

var dataP = d3.json("classData.json");
dataP.then(function(data)

 drawChart(data);

)

var drawChart = function(data)


 // dimensions //
 var screen =
 
 width: 500,
 height: 400
 

 var margins =
 
 top:10,
 bottom:40,
 left:40,
 right:100
 
 var width = screen.width-margins.left-margins.right;
 var height = screen.height-margins.top-margins.bottom;

 var day = 7;

 // data manipulation //
 var m_data = data.map(function(d) return d.quizes[day+1].grade; );
 console.log(m_data);
 //create scales
 var xScale = d3.scaleLinear()
 .domain([0,10])
 .range([0,width])
 .nice();

 // create histogram and binmaker
 var binMaker = d3.histogram()
 .domain([xScale.domain()])
 .thresholds(xScale.ticks(10));
 var bins = binMaker(m_data); // how this is created? //
 // bins.shift();
 // bins.pop();

 // console.log("bin 0: " + bins[0].x0);
 console.log('bins',bins);

 var yScale = d3.scaleLinear()
 .domain([0, d3.max(bins, function(d) return d.length; )])
 .range([height, 0]);

 // create svg
 var svg = d3.select("svg").attr("width",width)
 .attr("height",height);
 svg.append('g').call(d3.axisLeft(yScale));
 svg.append('g').attr("transform","translate(0,"+height+")").call(d3.axisBottom(xScale));
 var plotLand = svg.append('g')
 .classed("plot",true)
 .attr("transform","translate("+margins.left+","+margins.top+")");

 // create dom elems for bins
 plotLand.selectAll('rect')
 .data(bins)
 .enter()
 .append("rect")
 .attr("x",function(d) return xScale(d.x0);)
 .attr("width",function(d)
 
 return xScale(d.x1)-xScale(d.x0);
 )
 .attr("y",function(d)return yScale(d.length);)
 .attr('height',function(d)
 
 return height - yScale(d.length);
 )

After creating our bins for the histogram, we run into the problem where all of our bins have length: 0; ourm_data values are not placed into their respective bins.

If you set the domain of the histogram generator it has to be an array:

The bin domain is defined as an array [min, max], where min is the minimum observable value and max is the maximum observable value.

However, you have this:

var binMaker = d3.histogram()
 .domain([xScale.domain()])

As xScale.domain() is itself an array:

[0,10]

You'll end up with:

var binMaker = d3.histogram()
 .domain([[0, 10])

Which obviously won't work. So, just do:

var binMaker = d3.histogram()
 .domain(xScale.domain())
 //no square brackets--^

Here is the demo:

m_data = [6, 9, 5, 6, 7, 5, 8, 7, 4, 7, 4, 3, 5, 8, 5, 4, 8, 7, 6, 9, 4, 6, 8];
var xScale = d3.scaleLinear()
 .domain([0, 10])
 .nice();
var binMaker = d3.histogram()
 .domain(xScale.domain())
 .thresholds(xScale.ticks(10));
var bins = binMaker(m_data);
console.log(bins);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>