JSFiddle - React, Tailwind, and code Playground

by zoldello

HTML

<!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;
		}
		
	
		.monthText {
			fill: #6B6B6B;
			font-size: 13px;
			font-family: 'Courgette', sans-serif;
		}
	</style>
  </head>
  <body>

	<div id="chart"></div>
	
    <script>
		////////////////////////////////////////////////////////////
		//////////////////////// Set-up ////////////////////////////
		////////////////////////////////////////////////////////////

		var screenWidth = window.innerWidth;

		var margin = {left: 20, top: 20, right: 20, bottom: 20},
			width = Math.min(screenWidth, 500) - margin.left - margin.right,
			height = Math.min(screenWidth, 500) - margin.top - margin.bottom;
					
		var svg = d3.select("#chart").append("svg")
					.attr("width", (width + margin.left + margin.right))
					.attr("height", (height + margin.top + margin.bottom))
				  .append("g").attr("class", "wrapper")
					.attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

		////////////////////////////////////////////////////////////
		//////////////////// Scales & Data /////////////////////////
		////////////////////////////////////////////////////////////

		//The start date number and end date number of the months in a year
		var monthData = [
			{month: "January", 	startDateID: 0, 	endDateID: 30},
			{month: "February", startDateID: 31, 	endDateID: 58},
			{month: "March", 	startDateID: 59, 	endDateID: 89},
			{month: "April", 	startDateID: 90, 	endDateID: 119},
			{month: "May", 		startDateID: 120, 	endDateID: 150},
			{month: "June", 	startDateID: 151, 	endDateID: 180},
			{month: "July", 	startDateID: 181,...