Title: How do I split the y-axis of the graph using d3.axis.tickFormat?
Tags: html;json;d3.js;visualization;bar-chart
Question: <!DOCTYPE html&gt;
<meta charset=&quot;utf-8&quot;&gt;
<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;
</style&gt;
<div id=&quot;legend&quot;&gt;
<h3&gt;Cholera No Of Deaths &amp; Cases</h3&gt;
<body&gt;
<script src=&quot;http://d3js.org/d3.v3.js&quot;&gt;</script&gt;
<script src=&quot;legend.js&quot;&gt;</script&gt;
<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)
});
</script&gt;</div&gt;
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?
[{&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;}]
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.

Here is the accepted answer: Are you looking for something like this?
http://jsfiddle.net/LC5YT/
If so you are going to need to create a second scale for your y axis that corresponds to the second set of data. That way you maintain both mappings. Note that I just substituted your call for JSON with the actual data.  Just replace the data.foreach(... with your original call for JSON.
Also, to clean code I would try to modularize your chart into functions that mirror Mike Bostock's reusable chart pattern. It will make your code much more readable.
Comment for this answer: Considering that these comments are off topic I would advise you open a new question.
Comment for this answer: Is there anyway for me to insert dots for each values in the y-axis and to add in mouseover function for each data values in the y-axis?
Comment for this answer: Is it possible for me to change the chart to look something like this? http://nvd3.org/examples/linePlusBar.html


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:07/22/14', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><json><d3.js><visualization><bar-chart>', 'Title': 'How do I split the y-axis of the graph using d3.axis.tickFormat?', 'ViewCount': 1062, 'id': 24878772, 'user_AboutMe': '', 'user_AccountId': 4707257.0, 'user_DisplayName': '宿命的な孤独', 'user_Reputation': 325.0, 'user_Views': 67.0, 'user_id': 3808948.0}}