interactive pie chart

.block

license: mit

README.md

Built with blockbuilder.org

dev_02.js

d3.json("dev_02.json").then((d,i)=>{

  const value = Object.entries(d[0]).map(([key,value]) => {
    return value
  })

  const key = Object.entries(d[0]).map(([key,value]) => {
    return key
  })

  let width = 1000,height=800,
  color=[
    {d1:"#406ac7"},
    {d1:"red"},
    {d1:"#f7ab07"}
  ],svg,data,tooltips,segmant,arcClick,section,legends;

  svg = d3.select("body").append("svg").attr("width",width).attr("height",height).attr("id","myId");
  data = d3.pie().sort(null).value(function(d,i){return d})(value);
  tooltips = d3.select("body").append("div").attr("class","div");
  segmant  = d3.arc().innerRadius(0).outerRadius(190).padAngle(20).padRadius(20);
  arcClick = d3.arc().innerRadius(0).outerRadius(230);
  section  = svg.append("g").attr("transform","translate(250,250)")
                .selectAll("path").data(data).enter()
                .append("path")
                .attr("d",segmant)
                .attr("fill",function(d,i){   return color[i].d1;  })
                .on("mouseover",function(d,i){
                   tooltips.transition().duration(700).delay( i*20)
                   .style('opacity',.9)
                   tooltips.html("<div style='padding:10px;' >"+key[i]+"<p style='font-weight:bold;' >"+value[i]+"   "+"<i>("+(d.value/7*100).toFixed(1)+"%"+")</i>"+"</p></div>")
                           .style("left" , (d3.event.pageX-25) + "px")
                           .style("top", (d3.event.pageY-20) + "px")
                   d3.select(this)
                     .attr("stroke","white")
                     .attr("d", arcClick)
                     .attr("stroke-width",29).attr("id",`myId${i}`);
                })
                .on("mouseout", function(){
                    tooltips.html("").style("left" , (d3.event.pageX-25) + "px")
                    .style("top", (d3.event.pageY-20) + "px")
                    d3.select(this)
                      .attr("d", segmant)
                })
                .attr("class","click")
                .transition()
                .duration(320)
                .delay(502);
  svg.select("g").selectAll("text").data(data).enter()
              .append("text").each(function(d){
              let center = segmant.centroid(d);
              d3.select(this)
                .attr("x",center[0]-29)
                .attr("y",center[1])
                .attr("class","text")
                .text((d.value/7*100).toFixed(1)+"%")
              })
              .on("mouseover",function(d,i){
                 tooltips.html("<div style='padding:10px;' >"+key[i]+"<p style='font-weight:bold;' >"+value[i]+"   "+"<i>("+(d.value/7*100).toFixed(1)+"%"+")</i>"+"</p></div>")
                         .style("left" , (d3.event.pageX-25) + "px")
                         .style("top", (d3.event.pageY-20) + "px")
                 d3.select(this)
                   .attr("d", arcClick)
                   .attr("stroke-width",29).attr("id",`myId${i}`);
              })
              .on("mouseout", function(){
                  tooltips.html("").style("left" , (d3.event.pageX-2) + "px")
                  .style("top", (d3.event.pageY-2) + "px")
                  d3.select(this)
                    .attr("stroke","none")
                    .transition()
                    .duration(200)
                    .ease(d3.easeBounceOut)
                    .attr("d", segmant)

              })
  legends = svg.append("g").attr("transform","translate(600,220)")
               .selectAll(".legeneds").data(value).enter().append("g")
               .classed("legeneds",true).attr("transform",function(d,i){
                  return "translate(10,"+ (i-1) *30 + ")"
               });
  legends.append("circle").attr("cx",15).attr("cy",10).attr("r",10)
         .attr("fill",function(d,i){return color[i].d1})
         .attr("class","click")
         .on("click",function(d,i){
   					 alert("click")
    				 let myId = document.getElementById("myId")
             let arcClick  = d3.arc().innerRadius(0).outerRadius(230);
             let segmant = d3.arc().innerRadius(0).outerRadius(190).padAngle(20).padRadius(20);
             let active   = myId.active ? false : true, newOpacity = active ?  arcClick:segmant;
          		d3.select(`#myId${i}`).attr("d",newOpacity);
          		myId.active = active;
            })
  legends.append("text").text(function(d,i){
    return key[i]
  })
  .attr("fill",function(d,i){
    return  color[i].d1;
  })
  .attr("x",30)
  .attr("y",15)

})

dev_02.json

[
 {
    "meduim":3,
    "high ":2,
    "low":2
 }
]

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>dev 02</title>
  </head>
  <style>
  path{
    stroke:white;
    stroke-width:1px;
  }
  text{
    font-size: 25px;
    font-weight:normal;
    fill:black;
        pointer-events: none;

  }
  .text{
    font-size: 35px;
    font-weight:bold;
    fill:white;
    font-family: 'Anton', sans-serif;
  }
  .legeneds{
    font-size: 51px;
    font-weight: bold;
    }
    h1{
      margin-left: 95px;
      margin-top: 60px;
      font-family:serif;
    }
    .div{
      position:absolute;
      padding:0px;
      margin: 120px 120px 120px;
      background: none repeat scroll 0  white;
      border-radius: 30px 30px 30px;
      box-shadow:3px 3px 15px #888888;
      color:#8f8e8b;
      font: 16px sans-serif;
      text-align: center;
    }

  </style>
  <body>
    <h1>Assignment pie Chart</h1>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="dev_02.js" ></script>
  </body>
</html>