MM vs DS using Mark Rothko layout

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MM vs DS using Mark Rothko layout</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  <script>
    // https://www.resultados.gob.ar/balotage/dat99/DPR99999A.htm
    var ds = 12198441, mm = 12903301, total = ds + mm, 
        w = 400, h = 400;

var alto = d3.scaleLinear().domain([0, total]).range([0, h]);
    
    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
    
    svg.append("rect")
     .attr("fill","#ffda00")
     .attr("stroke-width",1)
     .attr("stroke","white")
     .attr("x",5)
     .attr("y",0)
     .attr("width",w - 10)
     .attr("height",alto(mm));
    
    svg.append("rect")
     .attr("fill","#538ed5")
     .attr("stroke","white")
     .attr("stroke-width",1)
     .attr("x",5)
     .attr("y",alto(mm))
     .attr("width",w - 10)
     .attr("height",alto(ds));
    
    svg.append("line")
     .attr("x1",0)
     .attr("x2",w)
     .attr("y1",w/2)
     .attr("y2",w/2)
     .attr("stroke-width",0.8)
     .attr("stroke","black");

</script>    
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js