Built with blockbuilder.org
Last active
June 16, 2020 07:55
-
-
Save GitNoise/3f55505257cbd6a4cf9794fc31065f6b to your computer and use it in GitHub Desktop.
Rough skills plot
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
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/3.1.0/rough.js"/></script> | |
| <style> | |
| body { | |
| margin:0; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| text { | |
| font-family: Comic Sans MS; | |
| fill-opacity: 0.7; | |
| } | |
| path { | |
| stroke: #222; | |
| stroke-opacity: 0.6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| const data = [[ | |
| {name: 'adaf adsf', value: 5}, | |
| {name: 'adsf asdf', value: 4}, | |
| {name: 'adsf asdf', value: 3}, | |
| {name: 'asdf asdf', value: 2}, | |
| {name: 'adsf asdf', value: 1}, | |
| ], [ | |
| {name: 'asdf asdf', value: 1}, | |
| {name: 'asdf asdf', value: 2}, | |
| {name: 'asdf asdf', value: 3}, | |
| {name: 'asdf asdf', value: 4}, | |
| {name: 'asdf asdf', value: 5}, | |
| ]] | |
| data.forEach((ds,i) => { | |
| const svg = d3.select('body').append('svg') | |
| const roughSvg = rough.svg(svg); | |
| ds.forEach((d,j) => { | |
| const g = svg.append('g') | |
| g.attr('transform', `translate(0, ${(j+1)*10 + j*12})`) | |
| g.append('text') | |
| .attr('y', 15) | |
| .text(d.name) | |
| for(let ci = 0; ci<5; ci++) { | |
| let options = {} | |
| if (ci < d.value) { | |
| options = {'fill': i === 0 ? '#22fc6e' : '#fc6e22', 'fillStyle': 'cross-hatch'} | |
| } | |
| const circle = | |
| roughSvg.circle(250 + (ci * 10 + ci*16), 10, 20, options); | |
| g.node().appendChild(circle) | |
| } | |
| }) | |
| }) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment