I want to create a piece of software in the browser that listens to microphone and detects it's pitch region. Then I want to show it on realtime streamed line graph. On yAxis there will be mapped MIDI keys presenting the notes (under the hood - yAxis will be just Hz), and on x axis I want to show the line based on Hz.
I already have built something that listens to the microphone and detects frequencies in Hz in realtime. The website is written in React. Now I need to use some library chart that will update the line with the pitch value. If there is no such value (nobody singing/speaking), the chart will be filled with nulls or missed values.
Is there any chart library that is focused to has high performance with strong customization options? I tried apache/echarts, but it seems that it has trobule with streaming in realtime.
You could alternatively try LightningChartJS. We have multiple charts which can be used for audio visualization in real-time. These charts feature strong customization options as well as the ability to place multiple charts into a dashboard-like layout.
Have a look at our Interactive Examples and more specifically, the audio visualization example too.
I am a LightningChart Dev, so if you need any support, feel free to message me.
Related
I work on a database collecting archaeological sites. A goal of our project is to make the data accessible on the web. I would like to plot them on a GeoTIFF to show their distribution and change over time. I further want to calculate Delaunay triangulations and a heatmap which you could display as an overlay. Its important to me to visualize the change over time as an animation. I choose p5.js/processing because I'm not a very skilled programmer (some R, NetLogo and Processsing). i think it will fit the task especially regarding the animation. Before I get into more detail my first question is:
Is this a wise choice of tools? Would you recommend other tools?
If you think my choice is vital here is my second question:
I came across Daniel Shiffmans tutorial on visualizing earthquake data in p5.js and this comes close to what I would do:
https://www.youtube.com/watch?v=ZiYdOwOrGyc
The code is here:
https://github.com/CodingTrain/Rainbow-Code/blob/master/CodingChallenges/CC_57_Earthquake_Viz/sketch.js
In the above example he relies on mapbox.js. I would prefer to use a custom build GeoTiff from our project and avoid mapbox since its not 100% free. But how do I get his code to work with a custom GeoTiff as basemap? I can set his variables "clon" and "clat" to my custom Tiff center point but the coordinates did not get transformed right. I think the Problem is the in the zoom level aka "zoom". But how to determine the Zoom for my custom map? I did not find any other implementation of web mercator projection in p5.js nor processing. Or do i get the math beyond projection wrong?
I'm not very proficient with p5.js, but I have a good experience using d3.js for various dataviz tasks, including crunching geodata. So my suggestion would be to use best of both worlds — use p5.js for rendering and d3.js for data manipulation. In your case, it seems like you will need a simple reprojection (LonLat to Mercator).
To reiterate:
Use d3.js to project data from whatever projection it is (LonLat) into projection that p5.js is using (Mercator)
Render projected data in p5.js
Quick googling landed me this guide on d3 + p5 integration
On the d3 side, there is an API documentation
And here is a good example of GeoTIFF reading/rendering in d3.js. Ok, here is one more.
I have looked through a number of open source and proprietary charting tools such as:
Stock Chart v3
HIGHSTOCK
dygraphs
Virtualization
These are all good charting options, some have an added dataset in a separate panel used with interaction(Only Volume). I would like to have this with multiple charts, like this:
In the above image, there are separate charts for different indicators but when interacting with the chart you can see the values on the right side of all 5 indicators.
Would it be possible to append another chart and have combined interaction in the same way with any existing charting options?
When using amCharts you are not limited to 2 panels. You can have any number of them. It's just this example that has two. I guess most of other tools does the same.
I would like to fill the area between two line charts when the area is enclosed between the lines. See below. (TeeChart was not used to draw these charts)
How can I accomplish this in TeeChart HTML5 component?
Chart now:
What I want:
The SeriesRegion tool is a tool designed for this purpose, and it's implemented in the majority of TeeChart versions, but I'm afraid it isn't in TeeChart HTML5/JavaScript yet. I've added it to the wish list to be implemented in future releases (TF77016627).
I need a library or a framework plugin that can draw charts that can be modified real-time by resizing part of the chart itself. Is there such thing?
I plan to use it for adjusting the chart values. Mostly for controlling amount allocation.
For example. You have 4 hours and you have 5 distinct types of tasks. I want the user to be able to allocate time for each task and see visually what's the impact on the available time.
I think Visually Editable Charts of Fusion Charts is what you are looking for.
We use various charts from http://code.google.com/apis/chart/ for our web app, and it works great.
The chart are loaded once, and refreshed, each time the user change a value, with new data through their Javascript API in real-time.
gRaphael should be the most popular:
http://g.raphaeljs.com/
I can recommend HighCharts:
http://www.highcharts.com/
Found a few options: http://jamesalvarez.co.uk/uncategorized/draggable-piechart-js-class and http://www.shodor.org/interactivate/activities/PieChart/.
The first one looks the most promising.
My customer has some specific requirements for a graph to show in our web app. We use HighCharts elsewhere in the app for more traditional graphing, but it doesn't seem to work for this situation. Their requirements:
Allow the user to select a background image, set the scale and origin of the coordinate system. We'll graph our points against the user-defined coordinates.
Points can be color coded
Mouse-over boxes show more detail about the points
Support for zooming and panning, scaling the background appropriately
Less importantly:
Support for drawing vectors off the points
Some of this seems basic, but looking around at different graph packages, I was unable to find any with an example of this kind of usage.
I've entertained the thought of just hacking it together in canvas myself, but I've never worked with canvas before so I don't think it would be cost effective. The basics of plotting points with a scaled coordinate system against an image background wouldn't be too hard, but the mouse-over details, zooming and panning sound much more daunting to me.
More info: Right now we use jQuery, HighCharts, and ExtJS for our app. We tried flot in the past but switched to HighCharts after flot didn't meet our needs.
this looks promising:
http://danvk.org/dygraphs/
And this seems to have what You need, but it's not free:
http://www.ejschart.com/