CODEWITHSUNDEEP
d3.jsbar-chart
calios
calios

Reputation: 535

d3 floating grouped bar with ranged values in a timeline

im trying to understand what tools i need to use as im new to d3 and didnt find any thing related...

i need a area chart that is like bars but can float and be on multiple values both on the x and y axis.

in this example the values are days but it might be hours/months etc...

need to know the direction i need to go.. / the right term to search...

enter image description here

Upvotes: 0

Views: 233

Answers (1)

lemming
lemming

Reputation: 1873

There's no significant difference between drawing this chart and a normal bar chart.

  • And you need to define some scales that will map the values in your data to co-ordinates on your chart.
  • You need to draw some rect shapes.

So, in the above example you would define a time scale that, given an input date, will map that to a certain x co-ordinate on your chart. You can then use that to determine both the x co-ordinate for where the left-hand-side of a rectangle will be, and to work out how wide the rectangle needs to be.

const xScale = d3.scaleTime()
  .domain([d3.min(dateValuesInMyDataset, d => d.date), d3.max(dateValuesInMyDataset, d => d.date)])
  .range([0, widthOfMyChart]);

The above xScale if given the earliest date in your dataset would return the value 0, because this is the x co-ordinate representing that date.

Similarly, you would want to construct a linear scale which defines how to map the numerical range of values in your dataset, to the y co-ordinates in your chart. Then you can use the scale to determine the y value and height of all of the rectangles in your chart.

There are lots of good examples of this on ObservableHQ.com that you can browse and see the code for.

Upvotes: 1

Related Questions