Donut charts #29
Donut charts #29
Conversation
|
@gracetian6 @laptou I made it so both of yall are "editors" and can share it. Everyone else who has the link may comment. |
client/css/analysis.css
Outdated
| /* the higher the number, the less filled */ | ||
| --percent: 8; |
There was a problem hiding this comment.
the higher the number, the less filled
Why did you do it like that? Also, why did you put the variable on :root instead of on the donut chart container?
You could make the --percent variable work like an actual percentage by doing this:
- set the
pathLengthattribute of thecircleelement to 100; then the browser will always do stroke calculations as if the circle's circumference is 100 units (which means a stroke dash offset of 1 will actually offset the stroke by 1%) - use
calc()to do subtraction at the site where you use the variable:stroke-dashoffset: calc(100 - var(--percent));
There was a problem hiding this comment.
- I put the variable on root because there is no container in this pr to add it to.
- I did it like this so that in JS, I could easily change the
--percentvariable for each donut from there and it would fill the circle accordingly. 440 is approximately 2πr where r is 70 as seen in the code.- For example, if Perspective returns 70% toxicity, do 440 - 440*.70 in js and then set the
--percentvariable from there. Very simple.
- For example, if Perspective returns 70% toxicity, do 440 - 440*.70 in js and then set the
- I tried to set the
pathLengthattribute to 100 and try it that way, but changing thestroke-dashoffsethad no effect.
There was a problem hiding this comment.
Check this out: https://jsfiddle.net/jc5pn9rm/
There was a problem hiding this comment.
And you can use calc() if you want the donut to fill up counterclockwise instead of clockwise
There was a problem hiding this comment.
Very very nice. Thank you
|
Will include these in better pull request. |
Finished the donut charts in a scaleable way. Each category will have a different color. I will also change the code to allow for more modification once everything is in master and I can actually run the front-end code on my computer.
JSFiddle: https://jsfiddle.net/ncdqm8hs/1/
And if that doesn't work, screen recording: https://drive.google.com/file/d/1zxy3eArrNZG_fTeJYt00xAc_gZFPBgKy/view?usp=sharing