//Create a SVG
var selection = "div#svg",
    svgWidth = $(selection).width(),
    svgHeight = $(selection).height(),
    svg = d3.select("div#svg").append("svg")
        .attr("width", svgWidth)
        .attr("height", svgHeight);

//Create a responsive SVG
var svg = d3.select(html_tag_attr).append("svg")
    .attr("viewBox", "0 0 "+ svgWidth +" "+ svgHeight)
    .attr("perserveAspectRatio", "xMinYMid");

//Create a line chart
var line = d3.line()
    .x(function(d){ return d.date; })
    .y(function(d){ return d.value; })
    .curve(d3.curveBasis);

svg.append("path")
  .attr("d", line(dataLineChart))
  .attr("fill", "none")
  .attr("stroke", "red");
  
//Create an horizontal axis
var xScale = d3.scaleLinear()
    .domain([minDomain, maxDomain])
    .range([minRange, maxRange]);

var xAxis = d3.axisBottom(xScale);
svg.append("g").call(xAxis);
//NOTE axisBottom does not mean that axis will be placed at the bottom of the graphic but that ticks of the acis will be placed below the line of the axis
//... to place the axis to the bottom of the graphic, you need to replace the line above by the line below
svg.append("g")
  .attr("transform", function(){ return "translate(" + 0 + ", " + height-padding +")"; })
  .call(xAxis);
  
//yAxis with values from bottom to top of the axis
var yScale = d3.scaleLinear().range([height, 0]);
yScale.domain([0, d3.max(dataLineChart, function(d){ return d.y; })]);

svg.append("g")
  .attr("transform", "translate(" + margin.left + ", " + (0 - margin.bottom) + ")")
  .call(d3.axisLeft(yScale));