How can I make this graph?

I'm about to make a graph that looks similar to the one on the picture. Do any of you know a small library that can easily fix this? :-) Preferably in CSS only, but JavaScript is welcome too.

title here

You don't need a library for something like this. Just use svg. I see 7 circles, 3 lines, 3 text elements and a path.

http://www.w3schools.com/graphics/svg_intro.asp

Can you advice me some tutorials on this?

I'd recommend drawing this out in Illustrator, exporting to SVG, then using SVGOMG to compress before dropping it in your markup.

with D3.js it seems possible!

Maybe something like this?

http://www.highcharts.com/demo/polar

I don't think interactions are needed, maybe hover. If you know where I can read about how to render it in SVG I would like to give it a read, if isn't too much work to do.

@emilmoe tbh I would export it from an PSD and than play around with the coordinates inside of the SVG tag to create paths developer.mozilla.org/en/docs/Web/SVG/Tutorial/Pa… and play around with those by hand to get a feel for the needed algorithms to generate those coordinates to render custom tags and than build the hover effects https://css-tricks.com/using-svg/ but I'm not really a frontend-dev so maybe you should create an invite so you could get a zero code implementation instead of using my prototyping approach :)

Yeah that might be an idea :)

Thread

How can I make this graph?

Responses(4)

Recent threads

Search Hashnode

How can I make this graph?

Responses(4)

Recent threads