DEV Community

Cover image for Project Twenty Two: Graphs

Posted on

Project Twenty Two: Graphs

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?

Blue svg line chart with curves and dots

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.


  1. Graph should have sufficient contrast
  2. Data should be presented in an easy to read way
  3. Graph should have accessible labels


  1. Draw a static graph without labels or axes
  2. Get your hands on some data (or generate random one)
  3. Write a function that draws graph based on data
  4. Add labels
  5. Ensure accessibility
  6. Profit!


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?

Buy Me A Coffee

Top comments (0)