Simple d3 v4 Pie Chart with mouse interactions.
Last active
March 10, 2017 20:07
-
-
Save cirofdo/1a941aadf738176e6adb52684ba23d37 to your computer and use it in GitHub Desktop.
Pie Chart with Mouse Interactions
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
| id | var | |
|---|---|---|
| A | 2704659 | |
| B | 4499890 | |
| C | 2159981 | |
| D | 3853788 | |
| E | 14106543 | |
| F | 8819342 | |
| G | 612463 |
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"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Pie Chart</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <script type="text/javascript" src="script.js"></script> | |
| </body> | |
| </html> |
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
| // Width, Height, Margin and Padding | |
| var width = 960, | |
| height = 500; | |
| var outerRadius = height/2 - 50, | |
| innerRadius = outerRadius/2, | |
| radius = Math.min(width, height) / 2; | |
| var color = d3.scaleOrdinal(d3.schemeCategory10); | |
| var arc = d3.arc() | |
| .outerRadius(outerRadius) | |
| .innerRadius(innerRadius); | |
| var outerArc = d3.arc() | |
| .outerRadius(outerRadius*1.1) | |
| .innerRadius(outerRadius*1.1); | |
| var labelArc = d3.arc() | |
| .outerRadius(outerRadius - 40) | |
| .innerRadius(outerRadius - 40); | |
| var arcOpacity = 0.8; | |
| var pie = d3.pie().padAngle(.01); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); | |
| var div = d3.select("body").append("div").attr("class", "toolTip"); | |
| // Data | |
| d3.csv("data.csv", function(d){ | |
| d.var = +d.var; | |
| return d; | |
| }, function(error, data) { | |
| if (error) throw error; | |
| pie.value(function(d) { return d.var; }); | |
| // Compute angles | |
| function midAngle(d){ | |
| return d.startAngle + (d.endAngle - d.startAngle)/2; | |
| } | |
| // Create arcs | |
| var g = svg.selectAll("arc") | |
| .data(pie(data)).enter().append("g") | |
| .attr("class", "arc"); | |
| // Add forms | |
| g.append("path") | |
| .attr("d", arc) | |
| .style("fill", function(d) { return color(d.data.id); }) | |
| .style("opacity", arcOpacity) | |
| .attr("class", function(d) { return "path_" + d.data.id } ); | |
| // Add labels | |
| g.append("text") | |
| .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) | |
| .text(function(d) { return d.data.id;}) | |
| .style("fill", "#fff"); | |
| // Add pie lines | |
| var polyline = g.append("polyline") | |
| .attr("class", "lines") | |
| .data(pie(data), function(d){ return d.data.id }) | |
| .attr("fill", "none") | |
| .attr("stroke", "#000") | |
| .attr("opacity", .5); | |
| polyline.transition() | |
| .attrTween("points", function(d) { | |
| this._current = this._current || d; | |
| var interpolate = d3.interpolate(this._current, d); | |
| this._current = interpolate(0); | |
| return function(t) { | |
| var d2 = interpolate(t); | |
| var pos = outerArc.centroid(d2); | |
| pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1); | |
| return [labelArc.centroid(d2), outerArc.centroid(d2), pos]; | |
| } | |
| }); | |
| var polytext = g.append("text") | |
| .attr("class", "polytext") | |
| .text(function(d) { return d.data.id; }) | |
| .style("fill", "#000"); | |
| polytext.transition() | |
| .attrTween("transform", function(d) { | |
| this._current = this._current || d; | |
| var interpolate = d3.interpolate(this._current, d); | |
| this._current = interpolate(0); | |
| return function(t) { | |
| var d2 = interpolate(t); | |
| var pos = outerArc.centroid(d2); | |
| pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1); | |
| return "translate("+ pos +")"; | |
| }; | |
| }) | |
| .styleTween("text-anchor", function(d){ | |
| this._current = this._current || d; | |
| var interpolate = d3.interpolate(this._current, d); | |
| this._current = interpolate(0); | |
| return function(t) { | |
| var d2 = interpolate(t); | |
| return midAngle(d2) < Math.PI ? "start":"end"; | |
| }; | |
| }) | |
| .text(function(d) { | |
| return (d.data.id +": "+ d.data.var); | |
| }); | |
| // Mouse interactions | |
| svg.selectAll("path") | |
| .on("mousemove", function(d) { | |
| // Arcs color and radius | |
| d3.selectAll(".path_" + d.data.id) | |
| .transition().attr("d", arc.outerRadius(outerRadius*1.05)) | |
| .transition().style("opacity", 1); | |
| // Tooltip | |
| div.style("left", d3.event.pageX+10+"px"); | |
| div.style("top", d3.event.pageY-25+"px"); | |
| div.style("display", "inline-block"); | |
| div.html((d.data.id)+"<br>"+(d.data.var)); | |
| }) | |
| .on("mouseout", function(d) { | |
| // Arcs color and radius | |
| d3.selectAll(".path_" + d.data.id) | |
| .style("opacity", arcOpacity) | |
| .transition().attr("d", arc.outerRadius(outerRadius)); | |
| //.transition().style("fill", function(d) { return color(d.data.id); }) | |
| // Tooltip | |
| div.style("display", "none"); | |
| }); | |
| }); |
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
| .toolTip { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| position: absolute; | |
| display: none; | |
| width: auto; | |
| height: auto; | |
| background: none repeat scroll 0 0 white; | |
| border: 0 none; | |
| border-radius: 8px 8px 8px 8px; | |
| box-shadow: -3px 3px 15px #888888; | |
| color: black; | |
| font: 12px sans-serif; | |
| padding: 5px; | |
| text-align: center; | |
| } | |
| text { | |
| font: 12px sans-serif; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment