title: How do I split the y-axis of the graph using d3.axis.tickFormat?
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;style&gt;
  
  body {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .x.axis path {
    display: black;
  }
  
  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
  
  }
  
      #legend {
          margin-left:220px;
      }
  &lt;/style&gt;
  &lt;div id=&quot;legend&quot;&gt;
      &lt;h3&gt;Cholera No Of Deaths &amp; Cases&lt;/h3&gt;
   
  &lt;body&gt;
  &lt;script src=&quot;http://d3js.org/d3.v3.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;legend.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  
      var margin = { top: 30, right: 40, bottom: 30, left: 50 },
          width = 600 - margin.left - margin.right,
          height = 270 - margin.top - margin.bottom;
  
      var parseDate = d3.time.format(&quot;%Y&quot;).parse;
  
      var x = d3.time.scale()
          .range([0, width]);
  
      var y = d3.scale.linear()
          .range([height, 0]);
  
      var xAxis = d3.svg.axis()
          .scale(x)
          .orient(&quot;bottom&quot;).ticks(5);
  
      var yAxis = d3.svg.axis()
          .scale(y)
          .orient(&quot;left&quot;).ticks(5);
  
      var line = d3.svg.line()
          .x(function (d) { return x(d.year); })
          .y(function (d) { return y(d.value); });
  
      var line2 = d3.svg.line()
      .x(function (d) { return x(d.year); })
      .y(function (d) { return y(d.value2); });
  
      var svg = d3.select(&quot;body&quot;).append(&quot;svg&quot;)
          .attr(&quot;width&quot;, width + margin.left + margin.right)
          .attr(&quot;height&quot;, height + margin.top + margin.bottom)
        .append(&quot;g&quot;)
          .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
  
      d3.json(&quot;country.json&quot;, function (error, data) {
          data.forEach(function (d) {
              d.year = parseDate(d.year.toString());
              d.value = +d.value;
              d.value2 = +d.value2;
          });
  
      
  
          x.domain(d3.extent(data, function (d) { return d.year; }));
          y.domain([0, d3.max(data, function (d) { return Math.max(d.value, d.value2); })]);
  
          svg.append(&quot;g&quot;)
              .attr(&quot;class&quot;, &quot;x axis&quot;)
              .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
              .call(xAxis)
  
          svg.append(&quot;text&quot;)      // text label for the x axis
            .attr(&quot;x&quot;, 265)
            .attr(&quot;y&quot;, 240)
            .style(&quot;text-anchor&quot;, &quot;middle&quot;)
            .text(&quot;Years&quot;);
  
               
  
          svg.append(&quot;g&quot;)
              .attr(&quot;class&quot;, &quot;y axis&quot;)
              .call(yAxis)
            .append(&quot;text&quot;)
              .attr(&quot;transform&quot;, &quot;rotate(-90)&quot;)
              .attr(&quot;y&quot;, 6)
              .attr(&quot;dy&quot;, &quot;.71em&quot;)
              .style(&quot;text-anchor&quot;, &quot;end&quot;)
              .text(&quot;Number Of Cholera Cases&quot;);
  
          svg.append(&quot;path&quot;)
              .datum(data)
              .attr(&quot;class&quot;, &quot;line&quot;)
               .style(&quot;stroke&quot;, &quot;red&quot;)
              .attr(&quot;d&quot;, line(data));
  
          svg.append(&quot;path&quot;)
              .datum(data)
              .attr(&quot;class&quot;, &quot;line&quot;)
             
              .attr(&quot;d&quot;, line2(data));
  
          legend = svg.append(&quot;g&quot;)
        .attr(&quot;class&quot;, &quot;legend&quot;)
        .attr(&quot;transform&quot;, &quot;translate(50,30)&quot;)
        .style(&quot;font-size&quot;, &quot;12px&quot;)
        .call(d3.legend)
  
          setTimeout(function () {
              legend
                .style(&quot;font-size&quot;, &quot;20px&quot;)
                .attr(&quot;data-style-padding&quot;, 10)
                .call(d3.legend)
          }, 1000)
  
      });
  
  &lt;/script&gt;&lt;/div&gt;
  </code></pre>
  <p>The value for two of my y-axis have a big difference and I would like to split the y-axis halfway so that the graph will not have so much gap in between. I know that using d3.axis.tickFormat may help the problem but I have no idea where should this method be called at. Is there anyway for me to split the y-axis value half way?</p>
  <pre><code>[{&quot;country&quot;:&quot;Singapore&quot;,&quot;year&quot;: &quot;1960&quot;, &quot;value&quot;:&quot;887&quot;, &quot;value2&quot;: &quot;199&quot;},
  {&quot;country&quot;:&quot;Singapore&quot;,&quot;year&quot;: &quot;1965&quot;, &quot;value&quot;:&quot;218&quot;, &quot;value2&quot;: &quot;55&quot;},
  {&quot;country&quot;:&quot;Singapore&quot;,&quot;year&quot;: &quot;1993&quot;, &quot;value&quot;:&quot;37046&quot;, &quot;value2&quot;: &quot;931&quot;},
  {&quot;country&quot;:&quot;Singapore&quot;,&quot;year&quot;: &quot;1994&quot;, &quot;value&quot;:&quot;38735&quot;, &quot;value2&quot;: &quot;118&quot;},
  {&quot;country&quot;:&quot;Singapore&quot;,&quot;year&quot;: &quot;1995&quot;, &quot;value&quot;:&quot;19903&quot;, &quot;value2&quot;: &quot;624&quot;},
  {&quot;country&quot;:&quot;Singapore&quot;,&quot;year&quot;: &quot;1997&quot;, &quot;value&quot;:&quot;4170&quot;, &quot;value2&quot;: &quot;125&quot;},
  {&quot;country&quot;:&quot;Singapore&quot;,&quot;year&quot;: &quot;1998&quot;, &quot;value&quot;:&quot;10000&quot;, &quot;value2&quot;: &quot;0&quot;}]
  </code></pre>
  <p>As you can see from the JSON file, the difference between value and value2 is very large and I would like to be able to split the y-axis half way.</p>
  <p><img src="https://i.stack.imgur.com/FfpP9.jpg" alt="The line chart that I have created" /></p>