Accessible SVG Graphs
Accessible SVG Graphs
Focused on Accessibility and Animation
Free and Open Source Project by 5cript.com. Super easy to start with. Plug and play.
Utilizing SVG, a vector graphic format that maintains quality at any scale, opens up opportunities for integrating numerous ARIA attributes and CSS properties. As everyone, including governments, increasingly transitions to digital interactions in the post-COVID era, the creation of a universally accessible web is of paramount importance.
You can download the project from github or npm . This is a Free and Open Source project.
Donut
The sources of different ingridients used for our products. This is a demo and the dummy data should not be used elsewhere.
- 40% Italy
- 60% Turkey
- 40% Brazil
- 25% Vietnam
- 15% Colombia
- 25% Indonesia
- 40% China
- 25% United States
- 10% Eqypt
- 15% Mexico
- 5% Turkey
- 5% Spain
Please your cursor steadily over the different parts of the donut.
Ideally the colors should have contrast with each other.
Options
- animation: true|false
- duration: number in seconds
Pie
Website visitors from different social channels.
Options
- animation: true|false
- duration: number in seconds
Bar graph, children color choices
Options
- order: asc|desc|original
- animation: true|false
- duration: number in seconds
- yAxis: array of custom values
- fontSize: number (of pixels)
Scatterplot, relationship between motivation and grades
Data found here
Options
- animation: true|false
- duration: number in seconds
- xAxis: array of custom values
- yAxis: array of custom values
- fontSize: number (of pixels)
- radius: number (of pixels)
Line graph, Ethereum price every first of the year.
Options
- animation: true|false
- duration: number in seconds
- xAxis: array of custom values
- yAxis: array of custom values
- fontSize: number (of pixels)
- strikeWidth: number (of pixels)
Progress-bar graph, percentage in horizontal orientation.
70% of the project done!
Options
- animation: true|false
- duration: number in seconds
- outterColor: string
- innerColor: string
added in version 1.3.0.
Area, similar to line but with emphasis on the volume.
You need help? You want us to implement it for you? Reach out to us!
This project was made with care but it might not necessarily fit your use case. Some very popular JS graph libraries can be found below.