JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<!DOCTYPE html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("d3-selection"),require("d3-drag")):"function"==typeof define&&define.amd?define(["exports","d3-selection","d3-drag"],n):n(t.d3=t.d3||{},t.d3,t.d3)}(this,function(t,n,r){"use strict";function e(t,n){return n={exports:{}},t(n,n.exports),n.exports}function o(){function t(t){function u(){p=[],h="",_.attr("d",null),m.attr("d",null),r.nodes().forEach(function(t){t.__lasso.possible=!1,t.__lasso.selected=!1,t.__lasso.hoverSelect=!1,t.__lasso.loopSelect=!1;var n=t.getBoundingClientRect();t.__lasso.lassoPoint=[Math.round(n.left+n.width/2),Math.round(n.top+n.height/2)]}),s&&r.on("mouseover.lasso",function(){this.__lasso.hoverSelect=!0}),i.start()}function l(){var t,n;"touchmove"===d3.event.sourceEvent.type?(t=d3.event.sourceEvent.touches[0].clientX,n=d3.event.sourceEvent.touches[0].clientY):(t=d3.event.sourceEvent.clientX,n=d3.event.sourceEvent.clientY);var s=d3.mouse(this)[0],u=d3.mouse(this)[1];""===h?(h=h+"M "+s+" "+u,v=[t,n],d=[s,u],b.attr("cx",s).attr("cy",u).attr("r",7).attr("display",null)):h=h+" L "+s+" "+u,p.push([t,n]);var l=Math.sqrt(Math.pow(t-v[0],2)+Math.pow(n-v[1],2)),f="M "+s+" "+u+" L "+d[0]+" "+d[1];_.attr("d",h),m.attr("d",f),a=l<=e,a&&o?m.attr("display",null):m.attr("display","none"),r.nodes().forEach(function(t){t.__lasso.loopSelect=!(!a||!o)&&c(p,t.__lasso.lassoPoint)<1,t.__lasso.possible=t.__lasso.hoverSelect||t.__lasso.loopSelect}),i.draw()}function f(){r.on("mouseover.lasso",null),r.nodes().forEach(function(t){t.__lasso.selected=t.__lasso.possible,t.__lasso.possible=!1}),_.attr("d",null),m.attr("d",null),b.attr("display","none"),i.end()}var h,v,d,p,g=t.append("g").attr("class","lasso"),_=g.append("path").attr("class","drawn"),m=g.append("path").attr("class","loop_close"),b=g.append("circle").attr("class","origin"),M=d3.drag().on("start",u).on("drag",l).on("end",f);n.call(M)}var...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
 @import url("https://fonts.googleapis.com/css?family=Lato:300");
 text {
     font-family: "Open Sans Condensed";
}
 .axis path {
     stroke: black;
}
 .tick line {
     visibility: hidden;
}
 .border {
     margin-top: 9px;
     margin-left: 29px;
     border: .5px solid black;
     width: 325px;
     height: 335px;
     position: absolute;
}
 .lasso path {
     stroke: rgb(80,80,80);
     stroke-width:2px;
}
 .lasso .drawn {
     fill-opacity:.05 ;
}
 .lasso .loop_close {
     fill:none;
     stroke-dasharray: 4, 4;
}
 .lasso .origin {
     fill:#3399FF;
     fill-opacity:.5;
}
 .not_possible {
     fill:rgb(200,200,200);
}
 .textBox rect {
     fill: steelblue;
}
 text.selection {
     font-size: 12px;
     fill: #FFF;
     letter-spacing: 0.1em;
     font-weight: 300;
}