JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>

CSS

.hull {
  fill: red;
  stroke: red;
  stroke-width: 32px;
  stroke-linejoin: round;
  opacity:0.2;
}

JavaScript

var data = [[140,130],[140,150],[140,180], [150,250]];
var radius = 5;
var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 600).append("g");
var circleEnter = svg.selectAll("circle").data(data).enter().append("circle").attr("cy", function(d) {
  return d[1]
}).attr("cx", function(d) {
  return d[0]
}).attr("r", function(d) {
  return radius;
}).style("fill", "steelblue");

var hull = svg.append("path")
    .attr("class", "hull");
hull.datum(d3.geom.hull(data)).attr("d", function(d) { return "M" + d.join("L") + "Z"; });