Built with blockbuilder.org
forked from Kashif1Naqvi's block: interactive pie chart
Last active
November 1, 2019 04:35
-
-
Save Kashif1Naqvi/af0d864cac1bb6cd5c41463fc257fc61 to your computer and use it in GitHub Desktop.
interactive pie chart updated
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"} | |
| ]; | |
| let svg,data,tooltips,segmant,arcClick,section,legeneds; | |
| 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","textAnimation"); | |
| segmant = d3.arc().innerRadius(0).outerRadius(190).padAngle(20).padRadius(20); | |
| arcClick = d3.arc().innerRadius(0).outerRadius(230).padAngle(20).padRadius(20); | |
| section = svg.append("g").attr("transform","translate(250,250)") | |
| .selectAll("path").data(data).enter() | |
| .append("path") | |
| .attr("d",segmant) | |
| .attr("fill","none") | |
| .attr("id",function(d,i){ | |
| return `myId${i}`; | |
| }) | |
| .on("mouseover",function(d,i){ | |
| tooltips.html("<div>" +key[i]+"<br> " +"<b>"+value[i] + "(" +(d.value/7*100).toFixed(1)+"%"+"</b>)</div>") | |
| d3.select(this) | |
| .attr("stroke","white") | |
| .attr("d", arcClick) | |
| .attr("stroke-width",29); | |
| // alert(i===i) | |
| if(i === 0 ){ | |
| tooltips.html("<div>" +key[i]+"<br> " +"<b>"+value[i] + "(" +(d.value/7*100).toFixed(1)+"%"+"</b>)</div>") | |
| .style("top" , function(d,i){ | |
| return (d3.event.pageY-65)+"px" | |
| }) | |
| .style("left",function(d,i){ | |
| return (d3.event.pageX-5)+ "px" | |
| }) | |
| .transition() | |
| .duration(700) | |
| .delay(i*20) | |
| .style('opacity',.9) | |
| } | |
| else if (i === 1) { | |
| tooltips.html("<div>" +key[i]+"<br> " +"<b>"+value[i] + "(" +(d.value/7*100).toFixed(1)+"%"+"</b>)</div>") | |
| .style("top" , function(d,i){ | |
| return (d3.event.pageY-30)+"px" | |
| }) | |
| .style("left",function(d,i){ | |
| return (d3.event.pageX-95)+ "px" | |
| }) | |
| .transition() | |
| .duration(700) | |
| .delay(i*20) | |
| .style('opacity',.9) | |
| } | |
| else if (i === 2) { | |
| tooltips.html("<div>" +key[i]+"<br> " +"<b>"+value[i] + "(" +(d.value/7*100).toFixed(1)+"%"+"</b>)</div>") | |
| .style("top" , function(d,i){ | |
| return (d3.event.pageY-55)+"px" | |
| }) | |
| .style("left",function(d,i){ | |
| return (d3.event.pageX-90)+ "px" | |
| }) | |
| .transition() | |
| .duration(700) | |
| .delay(i*20) | |
| .style('opacity',.9) | |
| } | |
| }) | |
| .on("mouseout", function(d,i){ | |
| tooltips.html("<p style='display:none;' ></p>") | |
| .style("left",(d3.event.pageX-25)+"px") | |
| .style("top" ,(d3.event.pageY-20) + "px") | |
| .style("border","0px solid white") | |
| .attr("id","clickhover") | |
| d3.select(this) | |
| .attr("stroke","white") | |
| .transition() | |
| .duration(200) | |
| .ease(d3.easeBounceOut) | |
| .attr("d", segmant) | |
| .attr("stroke","none") | |
| }) | |
| .transition() | |
| .style("opacity",.9) | |
| .delay(212) | |
| .duration(100) | |
| .attr("fill",function(d,i){ return color[i].d1; }) | |
| svg.select("g").selectAll("text").data(data).enter() | |
| .append("text").each(function(d){ | |
| let center = segmant.centroid(d,i); | |
| d3.select(this) | |
| .attr("x",center[0]-29) | |
| .attr("y",center[1]) | |
| .attr("class","text") | |
| .text((d.value/7*100).toFixed(1)+"%") | |
| }) | |
| .attr("id",function(d,i){ | |
| return `newId${i}`; | |
| }) | |
| 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}) | |
| .on("click",function(d,i){ | |
| 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) | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "meduim":3, | |
| "high ":2, | |
| "low":2 | |
| } | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>dev 02</title> | |
| <link href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao|Staatliches&display=swap" rel="stylesheet"> | |
| </head> | |
| <style> | |
| path{ | |
| stroke:white; | |
| stroke-width:1px; | |
| } | |
| text{ | |
| font-size: 15px; | |
| font-weight:normal; | |
| fill:black; | |
| pointer-events:none; | |
| } | |
| .text{ | |
| font-size: 20px; | |
| font-weight:bold; | |
| fill:white; | |
| font-family: 'Anton', sans-serif; | |
| } | |
| .legeneds text{ | |
| font-size: 25px; | |
| } | |
| h1{ | |
| margin-left: 95px; | |
| margin-top: 60px; | |
| font-family:serif; | |
| } | |
| .textAnimation { | |
| pointer-events:none; | |
| position:absolute; | |
| margin:1px; | |
| padding-bottom: : 5px; | |
| opacity: .9; | |
| padding:0px; | |
| background: none repeat scroll 0 white; | |
| border:solid none; | |
| box-shadow: 0px 3px 15px #888888; | |
| color:#8f8e8c; | |
| font: 14px sans-serif; | |
| width:80px; | |
| height:inherit; | |
| text-align: center; | |
| font-weight: normal; | |
| border-radius: 3px; | |
| / font-family: 'Staatliches', cursive; / | |
| font-family: 'Liu Jian Mao Cao', cursive; | |
| font-family: 'Courgette', cursive; | |
| } | |
| .textAnimation ::after { | |
| content: ""; | |
| position: absolute; | |
| top: 100%; | |
| left: 80%; | |
| margin-left:-15px; | |
| border-width:10px; | |
| border-style: solid; | |
| border-color: white transparent transparent transparent; | |
| } | |
| </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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment