D3js make y axis height 100

var tokenPricesArray = [
    {"date":"18-Sep-18", "bitcoin_dominance":"55.55"},
    {"date":"19-Sep-18", "bitcoin_dominance":"65.55"},
];

// Milestones vs. Price
  
  // Set the dimensions of the canvas / graph
  var margin = {
   top: 20,
   right: 30,
   bottom: 30,
   left: 40
  },
  width = 825 - margin.left - margin.right,
  height = 450 - margin.top - margin.bottom;

  var paddingForText = 15;

  // Parse the date
  var parseDate = d3.timeParse("%d-%b-%y");

  // Set the ranges
  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  // Define the axes
  var xAxis = d3.axisBottom(x).ticks(3);

  var yAxis = d3.axisLeft(y).ticks(10);

  // Define the line
  var valueline = d3.line()
   .x(function(d) {
    return x(d.date);
   })
   .y(function(d) {
    return y(d.bitcoin_dominance);
   });

  // Adds the svg canvas
  var svg = d3.select("#priceWithMilestones")
   .append("svg")
   .style("background-color", "#ffffff")
   //.attr("width", width + margin.left + margin.right)
   //.attr("height", height + margin.top + margin.bottom)
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 825 450")
   .attr("id", "priceWithEverything")
   .append("g")
   .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");
    
  var aspect = width / height,
   chart = d3.select('#priceWithMilestones');
  d3.select(window)
    .on("resize", function() {
   var targetWidth = chart.node().getBoundingClientRect().width;
   chart.attr("width", targetWidth);
   chart.attr("height", targetWidth / aspect);
    });

  data = tokenPricesArray;
  
  tokenPricesArray.sort(function(a,b){
   var c = new Date(a.date);
   var d = new Date(b.date);
   return c-d;
  });
  
  // Get the data
  data.forEach(function(d) {
   d.date = parseDate(d.date);
   d.bitcoin_dominance = +d.bitcoin_dominance;
  });

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) {
   return d.date;
  }));
  y.domain([0, 100]);

  // Add the valueline path.
  svg.append("path")
   .data([data])
   .attr("class", "line")
   .attr("stroke", "steelblue")
   .attr("fill", "none")
   .attr("d", valueline);

  svg.append("g").selectAll("circle")
   .data(data.filter(function(d){return d.notes}))
   .enter()
   .append("circle")
   .attr("r", 4)
   .attr("cx", function(d) {
    return x(d.date)
   })
   .attr("cy", function(d) {
    return y(d.bitcoin_dominance)
   })
   .classed("milestone-circle", true)
   .attr("fill", "none")
   //.attr("stroke", "#BA85FF")
   .attr("stroke", "#000000");

  svg.append("g").selectAll("text")
   .data(data)
   .enter()
   .append("text")
   .attr("x", function(d) {
    return x(d.date) - paddingForText
   })
   .attr("y", function(d) {
    return y(d.bitcoin_dominance) + paddingForText
   })
   //.attr("fill", "white")
   // .text(function(d) {
    // return d.notes
   // })
   // .classed("milestone-circle", true)
   // .style("font-family", "Roboto")
   // .style("font-size", "14px")
   ;

  // Add the X Axis
  svg.append("g")
   .attr("class", "xaxis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis);

  // Add the Y Axis
  svg.append("g")
   .attr("class", "yaxis")
   .call(yAxis);

body {font-family: Roboto;}
#priceWithMilestones {position: relative;}
.title {position: absolute; top: 0; text-align: center; width: 100%; }
.legend {position: absolute; top: 400px; right: 0; }

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<div id="priceWithMilestones">
<div class="title"><h1>Marketcap Dominance</h1></div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

</script>