D3.js liquid chart v4

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<!DOCTYPE html>
<html>
	<head>
		<title>LiquidChart III</title>

		<!--libs-->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://d3js.org/d3.v4.min.js"></script>

		<!--js-->
		<script>
			
			$(document).ready(function() {
			    function uuid() {
			      var buf = new Uint32Array(4);
			      window.crypto.getRandomValues(buf);
			      var idx = -1;
			      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
			          idx++;
			          var r = (buf[idx>>3] >> ((idx%8)*4))&15;
			          var v = c === 'x' ? r : ((r&0x3)|(0x8));
			          return v.toString(16);
			      });
			    }

			    function liquidFillGaugeDefaultSettings(){
			      return {
			        minValue: 0, // The gauge minimum value.
			        maxValue: 100, // The gauge maximum value.
			        circleThickness: 0.05, // The outer circle thickness as a percentage of it's radius.
			        circleFillGap: 0.05, // The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.
			        circleColor: "#178BCA", // The color of the outer circle.
			        waveHeight: 0.05, // The wave height as a percentage of the radius of the wave circle.
			        waveCount: 1, // The number of full waves per width of the wave circle.
			        waveRiseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height.
			        waveAnimateTime: 18000, // The amount of time in milliseconds for a full wave to enter the wave circle.
			        waveRise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height.
			        waveHeightScaling: true, // Controls wave size scaling at low and high fill percentages. When true, wave height reaches it's maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the...