grafica.js - A simple and configurable plotting library for p5.js

  •        112

grafica.js is a simple and configurable plotting library for p5.js. It's the javaScript version of the grafica Processing library. With it you can easily create 2D plots that will enjoy the full interactive capabilities of Processing in the web.Download the latest minified library release and follow the steps described here.

http://jagracar.com/grafica.php
https://github.com/jagracar/grafica.js

Tags
Implementation
License
Platform

   




Related Projects

p5 - JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing

  •    Javascript

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web.Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you're not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.

p5-music-viz - Workshop on music visualization with p5

  •    Javascript

This session is for anyone who would like to explore music, visuals and creative coding for the web. We'll demonstrate types of data we can get from digital signal processing using interactive sketches in p5.js and the p5.sound library that builds upon the Web Audio API. We'll explore various methods to map this data onto meaningful visuals that enhance our experience of music.

p5.js-sound - p5.sound brings the Processing approach to Web Audio and p5.js. Demos:

  •    Javascript

p5.sound brings the Processing approach to Web Audio as an addon for p5.js. Functionality includes audio input, playback, manipulation, effects, recording, sequencing, analysis and synthesis. The library is designed to be used in tandem with p5.js.This version of the library is updated most frequently. A stable version comes with p5.js. Here's the Change Log.

The-Nature-of-Code-Examples-p5.js - Port to p5.js of Nature of Code examples

  •    Javascript

This is the repository for example p5.js code from The Nature of Code book. If you are looking for the book's raw content (text, illustrations, images, CSS, etc.), have a look at The Nature of Code repo. The original Processing examples can be found here, along with a list of other ports.

p5.speech - Web Audio Speech Synthesis / Recognition for p5.js

  •    Javascript

p5.speech is a JavaScript library that provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen. It consists of two object classes (p5.Speech and p5.SpeechRec) along with accessor functions to speak and listen for text, change parameters (synthesis voices, recognition models, etc.), and retrieve callbacks from the system. Speech recognition requires launching from a server (e.g. a python simpleserver on a local machine).


p5.js-web-editor - In progress p5.js web editor, coming soon.

  •    Javascript

This project is currently in development! It will be announced when there is a (public) beta release.If you don't care about being able to upload media files to S3 or Login with Github, you can drop in the file exactly how it is. Or, if you don't want to do that, just ask me to send you mine. Refer to this gist for creating an S3 bucket for testing, or if you don't want to do that, I can add you to one of my S3 buckets.

party-mode - An experimental music visualizer using d3.js and the web audio api.

  •    Javascript

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. <html class='theme_1'>. This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.

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 https://github.com/cambecc/earth 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.

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.

EventDrops - A time based / event series interactive visualization using d3.js

  •    Javascript

EventDrops is a time based / event series interactive visualization tool powered by D3.js. If you want to pan and zoom on previous data on your own, here is the demo.

keen-js - Keen.io JavaScript SDKs

  •    Javascript

If you haven’t done so already, login to Keen to create a project. The Project ID and API Keys are available on the Access page of the Project Console. You will need these for the next steps. What is an event? An event is a record of something important happening in the life of your app or service: like a click, a purchase, or a device activation.

MathLight

  •    Silverlight

Math libraries for Silverlight (C#). Current version: - draw point sequences - draw functions - parse and eval expressions Plans: - visualization of graphs of equations; - JS API; - optimization.

neo4jd3 - Neo4j graph visualization using D3.js

  •    Javascript

Neo4j graph visualization using D3.js. First of all, make sure you have ruby and sass gem installed. Then, clone the repository, install all dependencies, build and serve the project.

js_data - Data manipulation and processing in JavaScript

  •    Javascript

Data manipulation, data cleaning, and data processing in JavaScript. This guide teaches the basics of manipulating data using JavaScript in the browser, or in node.js. Specifically, these tasks are geared around preparing data for further analysis and visualization.

raw - The missing link between spreadsheets and data visualization

  •    Javascript

RAWGraphs is an open web tool to create custom vector-based visualizations on top of the amazing d3.js library by Mike Bostock. It has been developed by DensityDesign Research Lab (Politecnico di Milano) and Calibro, and sustained through a corporate stewardship by ContactLab. Primarily conceived as a tool for designers and vis geeks, RAWGraphs aims at providing a missing link between spreadsheet applications (e.g. Microsoft Excel, Apple Numbers, Google Docs, OpenRefine, …) and vector graphics editors (e.g. Adobe Illustrator, Inkscape, …).

ggforce - Accelerating ggplot2

  •    R

ggforce is a package aimed at providing missing functionality to ggplot2 through the extension system introduced with ggplot2 v2.0.0. Broadly speaking ggplot2 has been aimed primarily at explorative data visualization in order to investigate the data at hand, and less at providing utilities for composing custom plots a la D3.js. ggforce is mainly an attempt to address these "shortcoming" (design choices might be a better description). The goal is to provide a repository of geoms, stats, etc. that are as well documented and implemented as the official ones found in ggplot2. The inclusion of any geom, stat, position etc in ggforce is not necessarily a recommendation of their use. ggplot2 has been successful in being opinionated about what functionality should be available. This is good as it insulates the user from making bad decisions when analyzing their data (to a certain degree), but it also makes it difficult to develop novel visualizations using the ggplot2 API. ggforce on the other hand positions itself closer to the "anything goes - the user is responsible for the quality of the output". Be very aware of this responsibility! Bad visualizations lie about, distorts, and obscure the data behind them, both to you and the ones you share your visualizations with.

dance - Don't be shy - take your data for a dance.

  •    Javascript

Dance.js is a simple data-driven visualization framework. It's basically a flavor of Backbone.js, but enriched with some of the ideas of the very popular D3.js visualization framework. A Dance.js dance involves several Performers (aka views or visualizations) who are performing on screen. Users of Backbone.js might already be familiar with the API, as it's pretty much the same as for Backbone.View. Dance.js comes with its own data manipulation framework, Data.js which functions as a replacement for Backbone.Model.

django-rest-pandas - 📊📈 Serves up Pandas dataframes via the Django REST Framework for use in client-side (i

  •    Python

Django REST Pandas (DRP) provides a simple way to generate and serve pandas DataFrames via the Django REST Framework. The resulting API can serve up CSV (and a number of other formats) for consumption by a client-side visualization tool like d3.js. The design philosophy of DRP enforces a strict separation between data and presentation. This keeps the implementation simple, but also has the nice side effect of making it trivial to provide the source data for your visualizations. This capability can often be leveraged by sending users to the same URL that your visualization code uses internally to load the data.