A Pen by Taulant Sulko on CodePen.
-
-
Save taulant/c6dfc82a119eddfc31aa to your computer and use it in GitHub Desktop.
aybIG
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
| <html> | |
| <head> | |
| <title>Visualise Influence</title> | |
| <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.js" type="text/javascript"></script> | |
| <!-- | |
| TakeN from kineticJS | |
| http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/ | |
| Calculate the base of the trapezoid | |
| http://www.mathwarehouse.com/geometry/quadrilaterals/trapezoid.php | |
| --> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script defer="defer"> | |
| </script> | |
| </body> | |
| </html> |
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 stage = new Kinetic.Stage({ | |
| container: 'container', | |
| width: 1440, | |
| height: 400 | |
| }); | |
| var following = 589; | |
| var followers = 1120; | |
| if(followers > following){ | |
| var remains = followers - following; | |
| x1 = remains / 2; // 500 - 300 / 2 = 100 | |
| y1 = 0; | |
| x2 = (remains / 2) + following; | |
| y2 = 0; | |
| x3 = followers; | |
| y3 = 250; | |
| x4 = 0; | |
| y4 = 250; | |
| } else if(follwers < following){ | |
| var remains = following - followers; | |
| x1 = 0; | |
| } else { | |
| var remains = 0; | |
| x1 = 0; | |
| }; | |
| // Trapezoid points | |
| /* var x1 = 100; | |
| var y1 = 0; | |
| var x2 = 400; | |
| var y2 = 0; | |
| var x3 = 500; | |
| var y3 = 250; | |
| var x4 = 0; | |
| var y4 = 250;*/ | |
| var upperBase = x2 - x1; | |
| var lowerBase = x3 - x4; | |
| document.write("Upper base is " + upperBase + "<br>"); | |
| document.write("Lower base is " + lowerBase); | |
| var layer = new Kinetic.Layer(); | |
| var poly = new Kinetic.Polygon({ | |
| points: [x1,y1, x2,y2, x3,y3 , x4,y4], | |
| fill: '#00D2FF', | |
| strokeWidth: 0 | |
| }); | |
| // add the shape to the layer | |
| layer.add(poly); | |
| // add the layer to the stage | |
| stage.add(layer); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This was an attempt to visualise influence on follower/following based social media.