gtr-cof - Interactive music theory dashboard for guitarists. http://guitardashboard.com/

  •        21

The aim is to provide a graphical representation of music theory elements (scales, modes, chords etc) mapped to a guitar fretboard. Guitar Dashboard is written in Typescript using VS Code. Make all code changes in the src/*.ts files. Compilation outputs to the docs folder, do not edit the *.js or *.js.map files in this directory. They are included in the source repository because the website is hosted in GitHub pages which does not support Typescript compilation.

https://github.com/mikehadlow/gtr-cof

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

webaudiofont - Use full GM set of musical instruments to play MIDI and single sounds or effects

  •    Javascript

WebAudioFont is a set of resources and associated technology that uses sample-based synthesis to play musical instruments in the browser. You can choose from thousands of instrument, see Catalog. Add a link to WebAudioFontPlayer.js and the instrument file. Invoke queueWaveTable.

alphaTab - alphaTab is a cross platform music notation and guitar tablature rendering library.

  •    CSharp

alphaTab is a cross platform music notation and guitar tablature rendering library. You can use alphaTab within your own website or application to load and display music sheets from data sources like Guitar Pro or the built in markup language named alphaTex.


awesome-d3 - A list of D3 libraries, plugins and utilities

  •    

This list keeps track of interesting D3js libraries, plugins and utilities. We decided not to list tutorials, resources or concepts here, because there is already a very good list of readings out there you can check out and contribute to. You can also explore the list with our interactive D3 Discovery tool.

d3js_doc - D3js中文文档 D3中文 :bar_chart: :chart_with_upwards_trend: :tada:

  •    HTML

Released March 22, 2018. D3 5.0 引入了很少的非向后兼容的改变.

d3-extended - Extends D3 with some common jQuery functions and more

  •    Javascript

d3 Extended is compatible with d3 v4. If you are looking for the v3 compatible module you can find it on the v3 branch. This module extends d3-selection with helpful functions which are similar to the jQuery API. If you want to get to know more about this project, feel free to read the blog post: Replacing jQuery with d3.

d3fc - A collection of components that make it easy to build interactive charts with D3

  •    HTML

A collection of components that make it easy to build interactive charts with D3. This project has recently upgraded to D3 version 5 to take advantage of the new promise-based API, and stays compatible with D3 version 4 for all other functionality. For more details, see the release notes for D3 version 5.0 and d3fc v14.0.0.

MuseScore - MuseScore Free music composition and notation software

  •    C++

MuseScore is a free music composition and notation software. It is easy to use and makes beautiful sheet music. MuseScore is often praised as a cost effective alternative for Sibelius and Finale. It is easy and fast note entry with mouse, keyboard or MIDI. It supports playback with integrated sequencer and FluidSynth software synthesizer.

Vue.D3.tree - Vue component to display tree based on D3.js layout.

  •    Vue

Update documentationVue components to display graphics based on D3.js layout. For all these events, the argument passed is {element, data} where element represents the node build by D3.js and data is the node raw data.

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.

supercollider - An audio server, programming language, and IDE for sound synthesis and algorithmic composition

  •    C++

SuperCollider is a platform for audio synthesis and algorithmic composition, used by musicians, artists, and researchers working with sound. It is free and open source software available for Windows, macOS, and Linux. SuperCollider was developed by James McCartney and originally released in 1996. In 2002, he generously released it as free software under the GNU General Public License. It is now maintained and developed by an active and enthusiastic community.

nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

  •    Javascript

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

d3-timeline - A simple D3 Timeline chart

  •    Javascript

This allows you to define a minimum width for an interval element. Sometimes, when you zoom out too much you might still want to be able to visualize the interval. It defaults to 8.

Rosegarden - Music software for Linux

  •    C++

Rosegarden is a well-rounded audio and MIDI sequencer, score editor, and general-purpose music composition and editing environment. Rosegarden is an easy-to-learn, attractive application that runs on Linux, ideal for composers, musicians, music students, and small studio or home recording environments.

vexflow - A JavaScript library for rendering music notation and guitar tablature.

  •    Javascript

VexFlow is an open-source web-based music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG, and runs on all modern browsers. Go try out The VexFlow Tutorial to learn how to use VexFlow. Also learn to use the simpler EasyScore API in the Using EasyScore guide.

Common Music

  •    

Common Music (CM) is a real-time music composition system implemented in C++ and Scheme. It generates musical output via MIDI, OSC, CLM, FOMUS and CSOUND. Its user application is called GRACE (Graphical Real-time Algorithmic Composition Environment)

mpld3 - D3 Renderings of Matplotlib Graphics

  •    Jupyter

Note: mpld3 is in the process of switching maintainers: feature requests & bug reports are likely to be delayed. If you are interested in contributing to this project, please contact one of the repository owners. This is an interactive D3js-based viewer which brings matplotlib graphics to the browser. Please visit http://mpld3.github.io for documentation and examples.