[ Launch: Dartboard ] 9bc89344a07ed622faa473fa1be9a421 by pathiggins13
-
-
Save higgyCodes/9bc89344a07ed622faa473fa1be9a421 to your computer and use it in GitHub Desktop.
Dartboard
This file contains hidden or 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
| {"description":"Dartboard","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"babel.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/mayDe6g.png"} |
This file contains hidden or 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
| var colors = {blue:"#2196F3", | |
| white:"#FFFFFF", | |
| pink:"#EC407A", | |
| orange: "#F57C00", | |
| green: "#3FC380"} | |
| var bullSize = 30; | |
| var startPoint = 0 | |
| var matchData = { | |
| matched: 7, | |
| userAtts: 15, | |
| jobAtts: 10 | |
| }; | |
| function findColor() { | |
| var matched = matchData.matched; | |
| var user = matchData.userAtts; | |
| var job = matchData.jobAtts; | |
| var matchRatio = matched/job | |
| if (job * 3 < user || matchRatio < 0.4) { | |
| return 'pink' | |
| } else if (matchRatio < 0.8) { | |
| return 'orange' | |
| } else { | |
| return 'green' | |
| } | |
| } | |
| function findDiff(size, blobRadius) { | |
| var matched = matchData.matched; | |
| var jobAtts = matchData.jobAtts; | |
| var score = 1 - matched / jobAtts; | |
| //if no points are matched the ball at d = 30 | |
| // if all points are matched the ball is d = | |
| return (blobRadius * score) + (bullSize * score) | |
| } | |
| var blobAtts = function(){ | |
| var atts = {"r": 40, "color" : "#EC407A"} | |
| var blobRadius = bullSize * (matchData.userAtts / matchData.jobAtts) | |
| var diff = findDiff(bullSize, blobRadius) | |
| atts.cx = startPoint + diff | |
| atts.cy = startPoint; | |
| atts.r = blobRadius | |
| return atts | |
| } | |
| var ur = matchData.userAtts / matchData.jobAtts | |
| var svg = d3.select("svg"); | |
| var fullGroup = svg.append("g"); | |
| var dartBoard = fullGroup.append("g"); | |
| var blob = fullGroup.append("g") | |
| var bullseye = dartBoard.selectAll("circle") | |
| .data([5, 4, 3, 2, 1], function(d, i) { return d; }); | |
| bullseye.enter().append("circle") | |
| .attr("cy", startPoint) | |
| .attr("cx", startPoint) | |
| .attr("r", function(d) { | |
| return d * bullSize }) | |
| .style("fill", function(d, i) { | |
| if (i % 2 === 0) { | |
| return colors['blue'] | |
| } else { | |
| return colors['white'] | |
| }}) | |
| .style("opacity", 1) | |
| .attr("transform", "translate(0,0) rotate(-2)"); | |
| bullseye.exit().remove(); | |
| var userData = blob.selectAll('circle') | |
| .data([1], function(d, i) { return d; }); | |
| userData.enter().append("circle") | |
| .attr(blobAtts()) | |
| .style("fill", colors[findColor()]) | |
| .style("opacity", 0.9) | |
| userData.exit().remove(); | |
| function randomAngle() { | |
| return Math.random() * 360 | |
| } | |
| //Randomize | |
| fullGroup.attr("transform", "translate(250, 250) rotate("+randomAngle()+")") | |
| //Constant | |
| //fullGroup.attr("transform", "translate(250, 250)") | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment