paths-js - Generate SVG paths for geometric shapes :bar_chart:

  •        15

Paths.js is a library to generate SVG paths, allowing you to create your own charts using a functional and testable API. It provides the primitives to create various shapes and charts starting from raw data, but it does not prescribe how you render these charts. This means you can use Paths.js to build components for your favorite frontend framework, and works even server-side on NodeJS. Paths.js offers three APIs, of increasing abstraction. The lowest level is a chainable API to generate an arbitrary SVG path. On top of this, paths for simple geometric shapes such as polygons or circle sectors are defined. At the highest level, there is an API to generate some simple graphs (pie, line chart, radar...) for a collection of data, assembling the simple shapes.

https://github.com/andreaferretti/paths-js

Tags
Implementation
License
Platform

   




Related Projects

react-native-pathjs-charts - Android and iOS charts based on react-native-svg and paths-js

  •    Javascript

This library is a cross-platform (iOS/Android) library of charts/graphs using react-native-svg and paths-js based on the excellent work done by Roman Samec in the react-pathjs-chart library. The project is an early attempt at providing a ubiquitous solution for charts & graphs for React Native that offer a unified view across devices. Components include Pie charts, Bar charts, Smoothline charts, Stockline charts, Scatterplots, Tree graphs and Radar graphs. Since Paths-Js makes no assumptions about rendering, this library is perfect for using SVG path objects to render custom charts easily.

paths - Build and edit SVGs in the browser

  •    Javascript

Paths is an SVG path element editor intended to demonstrate the path syntax in an interactive interface. Compared to other SVG elements, the path command syntax can look intimidating. This app is intended to help users understand how the commands work and how to get started with coding and manipulating paths. The path element is used to create complex shapes based on a series of commands. Each command begins with a letter and is followed by numbers representing x/y coordinates according to the SVG’s viewBox attribute. Uppercase letters represent absolute coordinate movements, and lowercase letters represent relative movements. For simplicity, the Paths app only supports absolute movements.

progressbar.js - Responsive and slick progress bars

  •    Javascript

Responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as you wish. Documentation is hosted at readthedocs.org.

reaviz - 📊 Data visualization library for React based on D3

  •    TypeScript

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

SwiftSVG - A simple, performant, and lightweight SVG parser

  •    Swift

SwiftSVG is not meant to be a a full SVG parser. The library supports the most common use cases of flat, solid color SVG elements. It supports grouping and transformations and can parse all path and shape elements. The best use case for SwiftSVG is for flat icons that you may want to theme at runtime and have good control over. Think icons for your app, especially if you offer light and dark themes. The library can handle complex paths, and more importantly can handle them quickly, so you can use it to display many SVGs, just not every single use case. See the complex example in the examples app.


rough - Create graphics with a hand-drawn, sketchy, appearance

  •    Javascript

Rough.js is a light weight (~9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG.

XAML & SVG Path Compressor

  •    

Path Compressor is a simple tool for shortening XAML and SVG Vector Path Data, which helps to reduce the size of XAML and SVG documents containing many or long paths. Feed it some XAML/SVG or a string of Path Data and it will give you back a shortened version.

jquery-drawsvg - Lightweight, simple to use jQuery plugin to animate SVG paths

  •    Javascript

This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. Look at the demos for more advanced usages.

android-pathview - Android view with both path from constructed path or from svg.

  •    Java

You want to animate svg or normal Paths?<br> Change the color, pathWidth or add svg.<br> Animate the "procentage" property to make the animation. It is in still in development.

svgi - 🔎 The SVG inspection tool

  •    Javascript

svgi is written in javascript (node) and distributed through npm. Both are required to install svgi. svgi requires a > 6 node version because it uses some features from the new versions of ECMAScript.

jFreeChart - Java and .NET chart library

  •    Java

jFreeChart is a widely used open source charting library. Its flexible design is easy to extend and targets both server-side and client-side applications. It supports many output types, including Swing components, image files (PNG and JPEG) and vector graphics file formats (including PDF, EPS and SVG).

XChart - Light weight Java library for plotting data

  •    Java

XChart is a light-weight and convenient library for plotting data designed to go from data to chart in the least amount of time possible and to take the guess-work out of customizing the chart style.

ngx-graph - Graph visualization library for angular

  •    TypeScript

This library is focused on handling graph data (anything with nodes and edges) rather than chart data. Currently the only visualization uses the Dagre layout, which is specialized for directed graphs. The plan is to implement multiple visualisations for graph data within this same library. Eventually, ngx-charts-force-directed-graph may be imported into this library as another option to visualize your graph data. ngx-graph is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

GoJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages

  •    Javascript

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

AndroidFillableLoaders - Android fillable progress view working with SVG paths

  •    Java

Android Open Source library providing an interesting fillable progress view working with SVG paths. This is a nice option too if you want to create an interesting branding logo for your app. Check this blog post in order to get more technical details about the library.

Orson Charts - A 3D chart library for Java applications (JavaFX, Swing or server-side)

  •    Java

Orson Charts is a 3D chart library for the Java(tm) platform that can generate a wide variety of 3D charts for use in client-side applications (JavaFX and Swing) and server-side applications (with export to PDF, SVG, PNG and JPEG).

react-native-chart - :bar_chart: Add line, area, pie, and bar charts to your React Native app

  •    Javascript

[![Join the chat at https://gitter.im/tomauty/react-native-chart](https://badges.gitter.im/tomauty/react-native-chart.svg)](https://gitter.im/tomauty/react-native-chart) [![npm version](https://badge.fury.io/js/react-native-chart.svg)](https://badge.fury.

go-chart - go chart is a basic charting library in native golang.

  •    Go

Package chart is a very simple golang native charting library that supports timeseries and continuous line charts. The v1.0 release has been tagged so things should be more or less stable, if something changes please log an issue.

angular-nvd3 - AngularJS directive for NVD3 reusable charting library (based on D3)

  •    Javascript

This thing is designed to make it easier to work with nvd3.js re-usable charting library. This directive allows you to easily customize your charts via JSON API.The key feature is that the original hierarchical structure of nvd3 models is completely preserved in directive JSON structure. This means that while you creating a complex chart that containing multiple elementary chart models (such as line, bar, axis, ...), you can in turn customize the properties of each internal elementary models as well as the global charting properties the way you want. This can be done as usual, but it becomes quite easily to customize while applying JSON approach to.