JSFiddle - React, Tailwind, and code Playground

by prayerslayer

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<svg id="svg" class="svg vizboard-visualization-root"  xmlns="http://www.w3.org/2000/svg" width="400" height="400">
		</svg>
<!--
		<div class="visualization ">
			<div class="visualization-element"></div>
			<div class="visualization-element"></div>
			<div class="visualization-element"></div>
		</div>-->
		<div class="overlay"></div>

CSS

rect.bar {
			    fill: orange;
			    cursor: move;
			    stroke: blue;
			}

			div.visualization {
				width: 400px;
				height: 100px;
				border: 1px solid green;
			}

			.selected {
				fill: red;
				stroke: black;
				background-color: red;
			}

			.clickable {
				cursor: pointer;
			}

			div.visualization-element {
				width: 30px;
				float:left;
				margin: 5px;
				height: 50px;
				background-color: blue;
			}

			div.overlay {
			    background-color: gray;
			    border: 1px solid red;
			    width: 400px;
			    height: 500px;
			    position: relative;
			    opacity: 0.5;
			    top: -400px;
			}

JavaScript

$(document).ready( function() {
			    
			    var svg = d3.select("svg");
			    var barwidth = 30,
			        barheight= 30;
			    var dataset = [1, 2, 3, 3, 4, 5, 6];
			    
			    svg
			        .selectAll("rect")
			        .data( dataset )
			        .enter()
			        .append("rect")
			            .attr("class", "bar")
			            .attr("x", function(d, i) {return i*(barwidth+1);})
			            .attr("y", function(d, i) {return 6*barheight-d*barheight;})
			            .attr("id", function( d ) {return "bar-" + d; })
			            .attr("width", barwidth)
			            .attr("height", function(d) {return d*barheight;})
			            .call(function() {
			                $("rect.bar").on("click", function() {
			                    alert("OMG");
			                });
			            });

			    // overlay
			    $( "div.overlay" ).on( "mousemove", function( evt ) {
			    	console.log( evt.pageX, evt.pageY );
			    	var found = false,
			    		element = null,
			    		that = this,
			    		defer = jQuery.Deferred();

			    	$( ".vizboard-visualization-root" ).children().each( function( i, child ) {
			    		var $child = $(child),
			    			// this is necessary because .width() targets HTML and .attr("width") SVG!
			    			width = parseInt( $child.attr("width") || $child.width() ),
			    			height= parseInt( $child.attr("height") || $child.height() ),
							offset = $child.offset();
			    		
			    		if ( !found &&
			    			// check bounds 
			    			 offset.left <= evt.pageX && evt.pageX <= offset.left + width &&
			    			 offset.top <= evt.pageY && evt.pageY <= offset.top + height ) {
			    			// yay found it
			    			found = true;
			    			element = child;
			    			defer.resolve( element );
			    		}
			    	});

			    	defer.done( function( element ) {
			    		console.log( d3.select(element) );
			    		d3.select(element).style("fill", "red" );
                        d3.select(that).style("pointer", "cursor");
			    	}).fail(...