Draw Line chart with positive & negative values

Question

I am trying to draw a Dovish & Hawkish line chart diagram.

Example:

However, it's throwing an error.

I took the example from a bar chart, that draws the bars with a positive and negative value. Then I have used the code only related to draw the xScale/yScale and the lines for xAxis/yAxis.

JSFiddle can be found here.

Gerardo Furtado Gerardo Furtado · Accepted Answer · 2017-06-22T09:24:12

The problem here is that you are using an ordinal scale for the x axis:

var x = d3.scale.ordinal()
    .domain(d3.range(data.length))

Which has this domain:

[0, 1, 2, 3, 4, 5, 6, 7]

However, you're passing the datum to the line generator:

var line = d3.svg.line()
    .x(function(d) { return x(d);})
    //datum here -------------^

Instead of that, pass the index of the datum:

var line = d3.svg.line()
    .x(function(d, i) { return x(i);})
    //index here ----------------^

Here is your updated code:

var data = [-0.1, -0.5, -0.32, 0.2, 1, 0.5, -0.3, -1.0];

var margin = {
    top: 30,
    right: 10,
    bottom: 10,
    left: 30
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data)));

var y = d3.scale.linear()
  .domain([-y0, y0])
  .range([height, 0])
  .nice();

var x = d3.scale.ordinal()
  .domain(d3.range(data.length))
  .rangeRoundBands([0, width], .2);

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.svg.line()
  .x(function(d, i) {
    return x(i);
  })
  .y(function(d) {
    return y(d);
  });


var dataSum = d3.sum(data, function(d) {
  return d;
});


svg.append("g")
  .attr("class", "x axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "y axis")
  .append("line")
  .attr("y1", y(0))
  .attr("y2", y(0))
  .attr("x1", 0)
  .attr("x2", width);

svg.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", line);

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line{
    fill: none;
    stroke: blue;
    stroke-width: 2px;
  }

  .tick text{
    font-size: 12px;
  }

  .tick line{
    opacity: 0.2;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

PS: You don't need that awkward line in the middle of the chart. You can create a proper axis:

var data = [-0.1, -0.5, -0.32, 0.2, 1, 0.5, -0.3, -1.0];

var margin = {
    top: 30,
    right: 10,
    bottom: 10,
    left: 30
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data)));

var y = d3.scale.linear()
  .domain([-y0, y0])
  .range([height, 0])
  .nice();

var x = d3.scale.ordinal()
  .domain(d3.range(data.length))
  .rangeRoundBands([0, width], .2);

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.svg.line()
  .x(function(d, i) {
    return x(i);
  })
  .y(function(d) {
    return y(d);
  });

var dataSum = d3.sum(data, function(d) {
  return d;
});

svg.append("g")
  .attr("class", "x axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(0," + y(0) + ")")
  .call(xAxis)

svg.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", line);

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: blue;
  stroke-width: 2px;
}

.tick text {
  font-size: 12px;
}

.tick line {
  opacity: 0.2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Draw Line chart with positive & negative values

1 Answers