score:2

Accepted answer

Couple obvious issues:

  1. Your X values are strings but you are using a scaleLinear. That's for numbers; try scaleBand.
  2. With that fixed, you aren't setting your x domain properly.

Here's those two fixes:

var data = [
	{
		"date": "Jan",
		"value": 1507
	},
	{
		"date": "Feb",
		"value": 1600
	},
	{
		"date": "Mar",
		"value": 1281
	},
	{
		"date": "Apr",
		"value": 1898
	},
	{
		"date": "May",
		"value": 1749
	},
	{
		"date": "June",
		"value": 1270
	},
	{
		"date": "July",
		"value": 1712
	},
	{
		"date": "Aug",
		"value": 1270
	},
	{
		"date": "Sept",
		"value": 1257
	},
	{
		"date": "Oct",
		"value": 1257
	},
	{
		"date": "Nov",
		"value": 1257
	},
	{
		"date": "Dec",
		"value": 1257
	}
];


///////////////////////////// Create SVG

var w = 400;
var h = 250;

var margin = {
  top: 20,
  bottom: 20,
  left: 40,
  right: 20
}

var width = w - margin.left - margin.right
var height = h - margin.top - margin.bottom

var svg = d3.select("body").append("svg")
  .attr("id", "svg")
  .attr("width", w)
  .attr("height", h)

var chart = svg.append('g')
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  

///////////////////////////// Create Scale  

var x = d3.scaleBand()
  .range([0, width])
  

var y = d3.scaleLinear()
  .rangeRound([height, 0])


///////////////////////////// Create Line

var line = d3.line()

  .x(function(d) { 
    console.log(d.date)
    console.log(x.domain())
    return x(d.date)
  })

  .y(function(d) { 
    console.log(d.value)
    console.log(y.domain())
    return y(d.value)
  })

  x.domain(data.map(function(d) { 
    return d.date
  }));

  y.domain([0, d3.max(data, function(d) { 
    return d.value 
  })]);

chart.append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("stroke-width", 1.5)
  .attr("d", line);


///////////////////////////// Create Axis
  
var xAxis = chart.append('g')
  .classed('x-axis', true)
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))

var yAxis = chart.append('g')
  .classed('y-axis', true)
  .call(d3.axisLeft(y))  
  
<script src="https://d3js.org/d3.v4.min.js"></script>


Related Query

More Query from same tag