Circular Yearly Chart

This chart is made using svg

by KgomDr

HTML

<!--

This 14 version is now working

-->


<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Months on an Arc</title>

    <!-- D3.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

    <!-- Month names -->
    <link href="https://fonts.googleapis.com/css?family=Courgette" rel='stylesheet' type='text/css'>

    <style>
        #chart {
            text-align: center;
        }

        .donutArc {
            fill: white;
            stroke: #AAAAAA;
        }

        .donutText {
            fill: #6B6B6B;
            font-size: 13px;
            font-family: 'Courgette', sans-serif;
        }

        .weekArcsWithStrings:hover {
            stroke: #646464;
            stroke-width: 4px;
            /* stroke-dasharray: 2,2; */
            stroke-linejoin: round;
        }
    </style>
    <body>
</body>

JavaScript

var d1 = new Date();
        d1.setFullYear(2019, 0, 1);
        var DataString = [{
            "Year": "2019",
            "Months": [{
                "January": [{ "Name": "Dance", "From": "1-1-2019", "To": "1-1-2019" }
                ],
                "February": [],
                "March": [],
                "April": [],
                "May": [],
                "June": [],
                "July": [],
                "August": [],
                "September": [],
                "October": [],
                "November": [],
                "December": []
            }]
        },
        {
            "Year": "2018",
            "Months": [{
                "January": [{ "Name": "Dance-2018", "From": "9-1-2018", "To": "9-1-2018" }
                    //,{ "Name": "Sing-2018", "From": "19-1-2018", "To": "29-1-2018" }
                ],
                "February": [],
                "March": [],
                "April": [],
                "May": [],
                "June": [],
                "July": [],
                "August": [],
                "September": [],
                "October": [],
                "November": [],
                "December": []
            }]
        }];
    </script>
</head>

<body>
    <input type="button" value="-" onclick="anticlockwise();" />
    <input type="button" value="+" onclick="clockwise();" />
    <div id="chart"></div>

    <script>
        ////////////////////////////////////////////////////////////
        //////////////////////// Set-up ////////////////////////////
        ////////////////////////////////////////////////////////////

        //The start date number and end date number of the months in a year
        var monthData = [
            { month: "January", year: "a", startDateID: 1, endDateID: 31 },
            { month: "February", year: "b", startDateID: 1, endDateID: 28 },
            { month: "March", year: "c", startDateID: 1, endDateID: 31 },
            { month: "April", year: "d",...