CODEWITHSUNDEEP
javascriptd3.js
Corey James Carney
Corey James Carney

Reputation: 167

Drawing bar charts vertically after each other d3.js

so what I'm trying to do is draw a bar chart below a bar chart i already have created.

so this is the scale i have initially used

  this.visScale = d3.scaleBand()
      .domain(['Q1', 'Q2', 'Q3', 'Q4', 'OT'])
      .range([this.dims.margins.left, this.dims.width - this.dims.margins.right])
      .paddingInner(0.1);

This splits the SVG into 5 pieces theoretically, but the problem is it doesn't expand vertically just horizontally.

I've tried to change the range multiple time, but to no avail.

this is a sketch of what I'm trying to achieve.

enter image description here

Any more info required, just ask.

Upvotes: 5

Views: 200

Answers (1)

Corey James Carney
Corey James Carney

Reputation: 167

So i managed to solve it myself.

 this.visScale = d3.scaleBand()
  .domain([1, 2, 3, 4]) // q1, q2, q3, q4
  .range([this.dims.margins.top, this.dims.height - this.dims.margins.bottom])
  .paddingInner(0.05)
  .paddingOuter(0);

this.xScale = d3.scaleBand()
  .domain([1, 2, 3, 4])
  .paddingInner(0.05)
  .paddingOuter(0)
  .range([this.dims.margins.left, this.dims.width - this.dims.margins.right]);

this.scoreScale = d3.scaleLinear()
  .domain([-5, 10])
  .range([0, this.visScale.bandwidth()]);

this gives this includes vertical axis's such as score scale, but we can specify by numbers, 1 - 4 which will change the y position.

Upvotes: 2

Related Questions