forked from mbostock's block: Arc Corners II
Last active
August 18, 2016 18:49
-
-
Save headwinds/5d30212a387f099b0fc00a087d73f8ec to your computer and use it in GitHub Desktop.
Arc Sentiment SVG
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: gpl-3.0 |
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| .paths--straight { | |
| fill: none; | |
| stroke: transparent; | |
| } | |
| .paths--round { | |
| fill: #ccc; | |
| opacity: 0.5; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var sentimentData = [{label: "positive", value:35, color:"#009900"}, {label: "negative", color:"#990000", value:10}, {label: "neutral", value:55, color:"#CCC"}]; | |
| /* | |
| I'm creating two arrays here because I have no idea how | |
| to update the length of each arc - hmmmm.... | |
| I'm thinking it has to do with arc(d) somewhere in here... | |
| roundPath.data(arcs).attr("d", arc.cornerRadius(cornerRadius)); | |
| maybe | |
| roundPath.data(arcs).attr("d", function(d){return d.value}); | |
| */ | |
| let getSentimentValues = () => { | |
| return sentimentData.map( function(node){return node.value}); | |
| }; | |
| let getSentimentColor = () => { | |
| return sentimentData.map( function(node){return node.color}); | |
| }; | |
| let sentimentValues = getSentimentValues(); | |
| let sentimentColors = getSentimentColor(); | |
| var width = 960, | |
| height = 500, | |
| outerRadius = height / 2 - 30, | |
| cornerRadius = 5; | |
| var pie = d3.layout.pie(); | |
| var arc = d3.svg.arc() | |
| .outerRadius(outerRadius); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| let getFill = (i) => { | |
| return sentimentColors[i]; | |
| }; | |
| var roundPath = svg.append("g") | |
| .attr("class", "path--round") | |
| .selectAll("path") | |
| .data(sentimentValues) | |
| .enter().append("path") | |
| .attr("opacity", 0.5) | |
| .attr("fill", function(d,i){return getFill(i)}); | |
| var ease = d3.ease("cubic-in-out"), | |
| duration = 2500; | |
| d3.timer(function(elapsed) { | |
| var t = ease(1 - Math.abs((elapsed % duration) / duration - .5) * 2); | |
| let sentimentValues = sentimentData.map( function(node){return node.value}); | |
| var arcs = pie.padAngle(t * .01)(sentimentValues); | |
| arc.innerRadius(outerRadius / (2 - t)); | |
| roundPath.data(arcs).attr("d", arc.cornerRadius(cornerRadius)); | |
| if ( t > 0.8 ) return true; | |
| //return true; | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment