JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="container"></div>

CSS

.domain, path.line{
    fill: none;
    stroke: black;
}

JavaScript

var matrix = [
 [14,76,45,55,66,55,244],
 [33,22,11,900,32,63,13,36,2333]
];

d3.graph={};
d3.graph.line = function module(w, h) {
	var svg;
	var margin = {top: 10, right: 20, bottom: 20, left: 40},
	    width = w - margin.left - margin.right,
	    height = h - margin.top - margin.bottom;

	function chart(_selection) {
       _selection.each(function(_data) {
		  	var x = d3.scale.linear().domain([1, _data[0].length]).range([0, width]);
			var y = d3.scale.linear().domain(d3.extent(d3.merge(_data))).range([height, 0]);
			
			var xAxis = d3.svg.axis().scale(x).ticks(5).orient("bottom");		
			var yAxis = d3.svg.axis().scale(y).ticks(5).orient("left");
	
			var line = d3.svg.line()
			    .x(function(d,i) { return x(i+1); })
			    .y(function(d) { return y(d); }).interpolate("basis");
			
			if (!svg){
				svg = d3.select(this).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 + ")");
					
				svg.append("g")
				      .attr("class", "x-axis")
					  .attr("transform", "translate(0," + height + ")")

				svg.append("g")
				      .attr("class", "y-axis")
			}
				
		    var lineGroup = svg.selectAll("path.line")
				.data(_data);
            lineGroup.enter().append('path').classed('line', true);
            lineGroup.attr('d', line).transition(750)
.delay(function(d, i) { return i * 10; });
            lineGroup.exit().remove();
						
           d3.select(".x-axis").call(xAxis);
           d3.select(".y-axis").call(yAxis);
		});
	}
	return chart;
}

var mult_line = d3.graph.line(500, 250);
d3.select("#container").datum(matrix).call(mult_line);