CODEWITHSUNDEEP
javascriptd3.jschartsnvd3.js
Mr. BigglesWorth
Mr. BigglesWorth

Reputation: 1540

Different tick sizes on the Y axis of a D3js line graph

I haven't found any examples of this so far, but I was hoping the readers at Stack have run into this situation before.

We have a Y axis where the range from 0-200 isn't very interesting. We'd like to "squish" this area of the y axis and have the gap become larger as the Y axis values grow so that the top end of the spectrum shows a lot more movement in the line graph.

This would mean that the ticks on the Y axis would grow as they went up in range and allow the graph to show larger differences near the top end of the spectrum.

I can see that Y doesnt take a function, but has anyone done something like this and if so does anyone have any working examples?

If its not possible with D3 has anyone done something similar with highcharts?

Upvotes: 2

Views: 898

Answers (1)

Pinguin Dirk
Pinguin Dirk

Reputation: 1433

NOTE

Please make sure that the ideas in the graph are still clear if you use such a scale. Be aware that the lines are only built based on start and end point and are not "kinked" when traversing the break in the axis. When writing the answer I wasn't aware that you have a line graph and values below 200.

ANSWER

Assuming that you want to use a linear scale, you could e.g. try the following:

newScale = d3.scale.linear().domain([0,200,1000]).range([0,100,1000])

An axis could e.g. look like this:

var xAxis = d3.svg.axis()
  .scale(newScale)
  .orient('bottom');
d3.select("#someSVG").append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0, " + 123 + ')')
  .call(xAxis);

Consequently, you'd get:

enter image description here

Looking at your codepen, you might want to try:

var y = d3.scale.linear().range([height,height * 9 / 10, 0]);

and then use as domain:

y.domain([0, 200, d3.max(data, function (d) {
        return d.close;
    })]);

so in this example, you allocate 1/10th of the height to the first 200.

enter image description here

Upvotes: 3

Related Questions