JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<svg>
    
</svg>

CSS

svg {
  font: 10px sans-serif;
}
.y.axis path {
  display: none
}

.y.axis line {
  stroke: #000;
  stroke-opacity: .5;
  shape-rendering: crispEdges;
}

.y.axis .zero line {
  stroke: #000;
  stroke-opacity: 1;
}

JavaScript

var data1 = {
  '0': {
    income_tax: 4046,
    capital_gains: 324
  },
  '42000': {
    income_tax: 6490,
    education: -1300
  },
  '60000': {
    income_tax: 9754,
    capital_gains: 4322
  }
};


var svg = d3.select('svg')
.attr({
  width: 400,
  height: 300,
  style: 'border: 1px solid #f00'
}),
    graphWidth = 250,

	graph = svg.append('svg:g')
			.attr('transform', 'translate(100 400)'),
    xAxis = graph.append('svg:g')
			.attr('transform', 'translate(.5 .5)')
            .classed({
                'axis': true
            }),
    yAxis = svg.append('svg:g')
            
			.classed({
                'axis': true,
                'y': true
            })
            .attr({
              transform: 'translate(100 0)'  
            }),
    yScale = d3.scale.linear()
				.domain([0, 10000])
				.range([250, 50]),
    xAxisLine = xAxis.append('line')
				.attr({
                  x1: 0,
                  y1: 0,
                  x2: graphWidth,
                  y2: 0,
                  stroke: '#000'
				}),
    yAxisObj = d3.svg.axis()
    			.scale(yScale)
    			.orient("left");

yAxis.call(yAxisObj)

function render(data) {
  
  console.log(data);

  var max = 0,
      min = 0,
      sumPos, sumNeg, i, j,
      newData = {};
  
  for (i in data) {
    sumPos = sumNeg = 0;
    newData[i] = {raw: {}};
    for (j in data[i]) {
      newData[i].raw[j] = data[i][j];
      if (data[i][j] > 0) {
        sumPos += data[i][j];
      } else {
        sumNeg += data[i][j];
      }
    }
    newData[i].sum = sumPos + sumNeg;
    if (sumPos > max) {
      max = sumPos;
    }
    if (sumNeg < min) {
      min = sumNeg;
    }
  }
  
  // Set the yScale, to extend past all pieces
  yScale = yScale.domain([min, max]);
  
  var zeroY = yScale(0);
  
  graph.transition().attr({
    transform: 'translate(100 ' + (+zeroY) + ')'
  });
  
  yAxis.transition().call(yAxisObj);;;;;;;;;;;
  
  
}

render(data1);