D3.js Charts - Positive & Negative Line Charts

Draw 2 line charts with dots & tooltips. Having Positive & Negative values

by austinnoronha

HTML

<!DOCTYPE html>

<body>
</body>

CSS

.bar.positive {
  fill: steelblue;
}

.bar.negative {
  fill: brown;
}

.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;
}

JavaScript

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);