I hope trigonometry doesn't make you shiver in terror because today we're toying with graphs and charts 😅
What's the first thing that comes to your mind when you think about a graph? Maybe something like that?
This graph might represent amount of visitors or revenue per month or any other metric. And usually you'd find them in a dashboard or some other internal tool. Or just for fun, that works too.
Linear Graph: requirements and recipe
As a user I want to be able to see data presented as a graph, so that I can have a visual overview quickly
There's a lot of different types and styles of graphs and bunch of ways to implement it and of course - it's entirely up to you, but you can use general requirements as a starting point.
Requirements
- Graph should have sufficient contrast
- Data should be presented in an easy to read way
- Graph should have accessible labels
Recipe
- Draw a static graph without labels or axes
- Get your hands on some data (or generate random one)
- Write a function that draws graph based on data
- Add labels
- Ensure accessibility
- Profit!
Hints
You can use either canvas or SVG to draw a graph. The latter comes with the bonus ability to add accessible labels as text.
For both canvas and SVGs its possible to draw a path from one point to another.
Hard Mode: Pie Chart
I promised you some trigonometry - and that's where it'll come in handy. A pie chart has segments with an angle proportional to a whole circle (360°) representing certain percentage.
How do you think: would you be able to write a function that would draw a pie chart? Maybe you can even animate it for extra special effect!
Share your creations and feedback and see you tomorrow!
Liked the idea a lot and would love to have it all year long?
Top comments (0)