JSFiddle - React, Tailwind, and code Playground

by Darth Vader

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="demoGridContainer" style="clear: both; margin: '0 auto; display:none'; width: 100% ">
	<div style="width: 400px; height: 200px;" class="mapContainer" >
	</div>
</div>

JavaScript

/**
 * Function that enables creating legends using SVG/D3.
 *
 */
function createLegendH(colors, colorLabels, options) {
	console.log("Entered Legend function with arguments", colors, colorLabels, options);


	var defaultOptions = {
		target: ".mapContainer",
		orientation: "horizontal",
		overflow: "hidden",
		css: "",
		style: "line-height: 10px; font-size: 10px; ",
		rect: {
			width: 10,
			height: 10,
			css: ""
		}
	};

	var length = colors.length;
	if(length <=0 ) {
		console.log("Cannot create legend from a zero length set. Please check the arguments.", colorLabels, options);
	}


	var legendOptions = $.extend(defaultOptions, options);
	var uniqueIdentifier = Math.random().toString(36).substring(2, 9);

	var $legendContainer = $("<div>", {
		id: uniqueIdentifier,
		style: "margin: 0 auto;"
	});

	$(legendOptions.target).append($legendContainer);

	var margin = {
		top : 10,
		left : 10,
		bottom : 10,
		right : 10
	};

	var width = parseInt(d3.select('#' + uniqueIdentifier).style('width'));//, width = width - margin.left - margin.right;

	console.log("Actual width", width);

	var svg = d3.select("#" + uniqueIdentifier)
				.append("svg");

	var legend = svg.append("g")
	  					.attr("class", "avs-legend-group");
	  					/*.attr("width", width)*/
	  					/*.attr("height", 300);*/

	var totalWidth = 0;
	var totalHeight = 0;
	console.log("Final Options", legendOptions);

	var currentX = 10;
	var currentY = 10;
	for(var index=0; index<colors.length; index++) {
		var data = {"color": colors[index], "label": colorLabels[index]};


		var rect = legend.insert("rect")
		.attr("x", currentX)
		.attr("y", currentY)
		.attr("height", legendOptions.rect.height)
		.attr("width", legendOptions.rect.width)
		.style("fill", data.color);


		currentX +=(5 + parseInt(rect.node().getBBox().width));

	    var textNode = legend.insert("text")
		  .attr("x", currentX)
	      .attr("y", function() { return currentY + 9;})
		  .text(data.label)
	      .classed("avs-legend-text",...