html,body,svg { height:100% }

SVG using JS

by keithphw

HTML

<div id="bigDiv">
<svg id='distributionsSVG' viewBox="0 0  6 7" xmlns="http://www.w3.org/2000/svg" style="border:solid 2px rgba(100, 100, 255, 0.25)">
<!--This innerHTML is all replaced in the JavaScript code-->
  <path d="M 10,30 L 20,20  90,60" stroke="blue" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill-opacity="0"/>
  <!-- If you do not specify the stroke color the line will not be visible -->
  <circle cx="0" cy="0" r="0.05"/>
  <rect x="-0.5" width="1" height="1" rx="15" />
  <polygon points="250,60 100,400 400,400" class="triangle" />
</svg>
</div>

CSS

html,body,svg { height:100% }

JavaScript

let distributionsSVG = document.getElementById("distributionsSVG");
let innerHTML = '';
let lineWidth = 0.01;
let radius = lineWidth*4;
let dashLength = lineWidth*4;
let fontSizeInPixels = radius*2.5;
let charWidth = fontSizeInPixels/4*2//radius*2;
let charHeight = charWidth*1.3;
let spaceBelowXAxisMultiplierOfCharHeight = 1.5;
let textRotationInDegrees = 55;
let lineAttributesPDFPath = 'stroke="blue" stroke-width="'+lineWidth+'" stroke-linecap="round" stroke-linejoin="round" fill-opacity="0"';
let lineAttributesDropDownDashed = 'stroke="black" stroke-dasharray="'+dashLength+'" stroke-width="'+lineWidth+'" stroke-linecap="round" stroke-linejoin="round" fill-opacity="0"';
let lineAttributesXYAxis = 'stroke="black" stroke-width="'+lineWidth+'" stroke-linecap="round" stroke-linejoin="round" fill-opacity="0"';
let topOfYAxisModeMultiplier = 1.2;

let muLGDR = 0.1;
let sigmaLGDR = 0.4652;
let P0 = 1.5;

let translateY = 0.4;
let translateYIncrement = 1.4;
let flipAndTranslateY = 'scale(1 -1) translate(0 -7) ';
//let flipAndTranslateY = '';
innerHTML += '<g id="bigGroup" transform="'+flipAndTranslateY+'translate(2.15 0.8) ">';


{
innerHTML += '<g id="LGDR" transform="translate(0 '+translateY+')">';
let xAxisTitle = 'LGDR = ln(P1/P0) = ln(1+NDR)';
translateY += translateYIncrement;
let mu = muLGDR;
let sigma = sigmaLGDR;
// To get the graph in the g (group), use: 
// let priceGraphPathElement = document.querySelector("#price #graph"); 
// https://stackoverflow.com/questions/15757105/how-to-getelementbyid-in-a-specific-div-block-js-or-jquery
innerHTML += '<path id="graph" d="';
let count = 0;
let leftXGraph = -2;
let rightXGraph = 2;
for (let x = leftXGraph; x < rightXGraph; x+=0.01){
  if (count == 0){
  	innerHTML += "M "
  }
  if (count == 1){
  	innerHTML += "L "
  }
  innerHTML += " "+x;
  let y = normalPDF(x, mu, sigma);//1/(x*sigma*Math.sqrt(2*Math.PI))*Math.exp(-1*Math.pow(Math.log(x)-mu,2)/(2*sigma*sigma));
  innerHTML += ", "+y+" ";
	count++;
}
innerHTML += '"...