patternomaly - Easily generate patterns for use in data graphics

  •        6

Easily generate patterns for use in data graphics. Color-blindness, that's why.



Related Projects

f2 - πŸ“±πŸ“ˆAn elegant, interactive and flexible charting library for mobile.

  •    Javascript

F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex and React Native. Based on the grammar of graphics, F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects. Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.

g2 - G2 (The Grammar of Graphics)

  •    Javascript

G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, users can describe the visual appearance of a visualization just by one statement. Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for G2.

EaselJS - The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier

  •    Javascript

EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch interactions.It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It works well alone, or with the rest of the CreateJS suite: SoundJS, PreloadJS, and TweenJS.

isomer - Simple isometric graphics library for HTML5 canvas

  •    Javascript

An isometric graphics library for HTML5 canvas. View the official project page or try it out.

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.

postcss-colorblind - A PostCSS plugin for seeing your site as a colorblind person may.

  •    Javascript

The biggest reason is that as many developers don't have problems seeing color, they never stop to consider that their (or their colleagues') choices of colors make their website unusable and frustrating to those who can't see some shades of color. It's not even a small problem either; lots of people struggle with red and green. However, there are JavaScript bookmarklets that let you do this on the fly without having to run a build step. I built this with the thought in mind you could create an automated step to create a report of how you're doing with color.

react-konva - React + Canvas = Love

  •    Javascript

React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the Konva Framework.

core - A canvas-based super high performant grid renderer API

  •    Javascript

Hypergrid 3.0 includes a revised data model with some breaking changes. For a complete list of changes, see the release notes.

node-canvas - Node canvas is a Cairo backed Canvas implementation for NodeJS.

  •    C++

Alpha versions of 2.0 can be installed using npm install canvas@next.node-canvas is a Cairo backed Canvas implementation for NodeJS.

awesome-canvas - A curated list of awesome HTML5 Canvas with examples, related articles and posts.


A curated list of awesome Canvas examples, related articles and posts. Inspired by awesome-python. Please take a quick gander at the contribution guidelines first.

metrics-graphics - A library optimized for concise and principled data graphics and layouts.

  •    Javascript

MetricsGraphics.js is a library optimized for visualizing and laying out time-series data. At under 80KB (minified), it provides a simple way to produce common types of graphics in a principled and consistent way. The library currently supports line charts, scatterplots, histograms, bar charts and data tables, as well as features like rug plots and basic linear regression. A sample set of examples may be found on the examples page. The example below demonstrates how easy it is to produce a graphic. Our graphics function provides a robust layer of indirection, allowing one to more efficiently build, say, a dashboard of interactive graphics, each of which may be pulling data from a different data source. For the complete list of options, and for download instructions, take a look at the sections below.

wind-js - An demo animation of wind on a Canvas layer in the JSAPI

  •    Javascript

This project is an experiment in client-side data processing and visualization. Most of the code in this project is taken from and has been re-purposed to support easier application to a variety of mapping APIs and Frameworks. The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). The data is passed into a JS class called Windy which takes the bounds of the map, the data, and the canvas element and then applies a Bilinear Interpolation to generate a smooth surface. Once the surface has been generated a function randomly places "particles" onto the canvas at random x/y points. Each particle is then "evolved", moving in a direction and at a velocity dictated by the interpolated surface.

konva - Konva

  •    Javascript

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

nanovg - Antialiased 2D vector drawing library on top of OpenGL for UI and visualizations.

  •    C

NanoVG is small antialiased vector graphics rendering library for OpenGL. It has lean API modeled after HTML5 canvas API. It is aimed to be a practical and fun toolset for building scalable user interfaces and visualizations. The NanoVG API is modeled loosely on HTML5 canvas API. If you know canvas, you're up to speed with NanoVG in no time.

awesome-webgl - A curated list of awesome WebGL libraries, resources and much more


This is a curated list of awesome WebGL libraries, resources and much more. WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas.

LibreOffice - The Document foundation

  •    C

LibreOffice is the free power-packed Open Source personal productivity suite for Windows, Macintosh and Linux. LibreOffice is the perfect choice for home users, businesses, government and other organizations. It's native file format is the ISO standardized ODF (Open Document Format), but LibreOffice can open and save Microsoft Word, PowerPoint and Excel files, as well as many other formats, bringing you the widest-available compatibility with other products.