JSFiddle - React, Tailwind, and code Playground

by fretwiz

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.control {
  color: white;
  font-size: 10px;
  
}

.expand,.view {
  visibility: hidden;
}

JavaScript

var vis = d3.select("body").append("svg")
var pi = Math.PI;
    
var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(70)
    .startAngle(0) //converting from degs to radians
    .endAngle(pi) //just radians
    
var canvas = vis.attr("width", "400").attr("height", "400").append("g");
		
    
 // Added height and width so arc is visible
		canvas.append("circle")
    .attr("r", "70px")
    .attr("fill","blue")
    .attr("cx",400/2)
    .attr("cy",400/2)
    .on("click", function(d){
    	console.log("View");
    })
    .on("mouseover", function(){		  	d3.select(this).style("fill", "blue");
    console.log(d3.select(this.parentNode).select(".view").style("visibility","visible"));
    })
    .on("mouseout", function(){
    		d3.select(this).style("fill", "blue");
        console.log(d3.select(this.parentNode).select(".view").style("visibility","hidden"));
     });
    
    canvas.append("path")
    .attr("d", arc)
    .attr("fill", "blue")
    .attr("transform", "translate(200,200)")
    .on("click",function(d){
    	 console.log("Expand");
       
    })
    .on("mouseover", function(){		  	d3.select(this).style("fill", "blue");
    console.log(d3.select(this.parentNode).select(".expand").style("visibility","visible"));
    
    })
    .on("mouseout", function(){
    		d3.select(this).style("fill", "blue");
        console.log(d3.select(this.parentNode).select(".expand").style("visibility","hidden"));
        
     });

   canvas.append("text")
    .attr("dx", "190")
    .attr("dy","200")
    .attr("class","view")
	  .text("VIEW")
    
    canvas.append("text")
    .attr("dx", "190")
    .attr("dy","200")
    .attr("class","expand")
	  .text("Expand")