Why d3 bins using thresholds only produce 1 bin

JavaScript
1

So, I have an example datasets with 5 data in it. Here’s the example dataset that I have:

const dataset = [
  {
    date: "24-05-2023",
    total_income: 2000000,
  },
  {
    date: "25-05-2023",
    total_income: 175000,
  },
  {
    date: "26-05-2023",
    total_income: 175000,
  },
  {
    date: "27-05-2023",
    total_income: 175000,
  },
  {
    date: "29-05-2023",
    total_income: 175000,
  },
];

I’ve set up my chart dimensions here:

const width = 600;
let dimensions = {
  width: width,
  height: width * 0.6,
  margin: {
    top: 30,
    right: 10,
    bottom: 50,
    left: 50,
  },
};
dimensions.boundedWidth =
  dimensions.width - dimensions.margin.left - dimensions.margin.right;
dimensions.boundedHeight =
  dimensions.height - dimensions.margin.top - dimensions.margin.bottom;

And tried to make a bar chart with this code:

const wrapper = d3
  .select("#wrapper")
  .append("svg")
  .attr("width", dimensions.width)
  .attr("height", dimensions.height);

const bounds = wrapper
  .append("g")
  .style(
    "transform",
    `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`
  );

const dateMap = dataset.map((item) => item.date);
const xScale = d3
  .scaleBand()
  .domain(dateMap)
  .range([0, dimensions.boundedWidth])
  .paddingInner(0.1);

const bin = d3
  .bin()
  .domain(xScale.domain())
  .value((d) => d.total_income)
  .thresholds(5);

const bins = bin(dataset);

But when I tried to log the bins variable value like this:

console.log(bins)

It only return an array with 1 item in it:

[
    {
        x0: '24-05-2023',
        x1: '25-05-2023'
    }
]

And i don’t understand why. A guidance would be appreciated :slight_smile:

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.